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