Vue.js中的extend綁定節(jié)點并顯示的方法
更新時間：2019年06月20日 17:22:52 投稿：laozhang
在本篇內(nèi)容里小編給大家整理了關(guān)于Vue.js中的extend綁定節(jié)點并顯示的方法以及相關(guān)知識點，需要的朋友們學(xué)習(xí)下。
在使用Vue.js時，可以使用Vue.extend()方法創(chuàng)建一個子類，傳入?yún)?shù)包含了一個對象。其中，在extend中的data和vue實例化對象中的data寫法不一樣。下面利用實例說明，操作如下：
第一步，創(chuàng)建一個靜態(tài)頁面并引入vue.js文件，并在主體元素標簽中插入一個div，設(shè)置id屬性，如下圖所示：
第二步，在<script></script>標簽中調(diào)用Vue.extend()，設(shè)置template和data，如下圖所示：
第三步，使用new關(guān)鍵字調(diào)用$mount()，將創(chuàng)建的類掛載到div元素上，如下圖所示：
第四步，為了顯示變量的字體等樣式，需要添加相關(guān)的樣式屬性，這里使用:class，如下圖所示：
第五步，保存代碼并打開瀏覽器預(yù)覽界面效果，可是控制臺出現(xiàn)了錯誤警告，如下圖所示：
第六步，調(diào)整template標簽屬性嵌套，去掉多層標簽元素，只留一個div標簽；class前面的:去掉，如下圖所示：
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了vue中的自定義指令clickOutside，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue如何通過點擊事件實現(xiàn)頁面跳轉(zhuǎn)詳解
頁面跳轉(zhuǎn),我們一般都通過路由跳轉(zhuǎn)實現(xiàn),通常情況下可直接使用router-link標簽實現(xiàn)頁面跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于vue如何通過點擊事件實現(xiàn)頁面跳轉(zhuǎn)的相關(guān)資料,需要的朋友可以參考下2022-07-07
Axios是一個基于Promise用于瀏覽器和nodejs的HTTP客戶端,本質(zhì)上也是對原生XHR的封裝,只不過它是Promise的實現(xiàn)版本,符合最新的ES規(guī)范,下面這篇文章主要給大家介紹了關(guān)于vue中使用axios最詳細教程的相關(guān)資料,需要的朋友可以參考下2022-08-08
為了方便大家寫代碼，Vue 給大家提供了很多方便的修飾符，比如我們經(jīng)常用到的取消冒泡，阻止默認事件等等，這篇文章將給大家分享Vue 中的常用的修飾符2022-08-08
Vue ESLint是一個基于ESLint的插件,它專門為Vue.js應(yīng)用設(shè)計,用于提供JavaScript代碼風(fēng)格檢查和最佳實踐規(guī)則,Vue項目通常會集成ESLint,目的是為了提升代碼質(zhì)量、保持一致性和可維護性,本文介紹了Vue項目中禁用ESLint的幾種常見方法,需要的朋友可以參考下2024-07-07
Jenkins?Sidebar?Link插件實現(xiàn)添加側(cè)邊欄功能詳解
這篇文章主要介紹了vue框架實現(xiàn)添加側(cè)邊欄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue初始化項目時報錯:Error:Cannot find module vue-temp
這篇文章主要介紹了vue初始化項目時報錯:Error:Cannot find module vue-template-compiler問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
現(xiàn)在的短信驗證碼一般為4位或6位，則頁面中會相應(yīng)的顯示4個或6個文本框.好多網(wǎng)站需求都有此功能，今天小編給大家分享基于vue.js實現(xiàn)移動端短信驗證碼功能，需要的朋友參考下吧2017-03-03
這篇文章主要介紹了使用vue實現(xiàn)一個電子簽名組件的示例代碼,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要介紹了vue項目中l(wèi)oadsh庫常用方法說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11