Vue.js中的extend綁定節(jié)點(diǎn)并顯示的方法
更新時(shí)間：2019年06月20日 17:22:52 投稿：laozhang
在本篇內(nèi)容里小編給大家整理了關(guān)于Vue.js中的extend綁定節(jié)點(diǎn)并顯示的方法以及相關(guān)知識(shí)點(diǎn)，需要的朋友們學(xué)習(xí)下。
在使用Vue.js時(shí)，可以使用Vue.extend()方法創(chuàng)建一個(gè)子類，傳入?yún)?shù)包含了一個(gè)對(duì)象。其中，在extend中的data和vue實(shí)例化對(duì)象中的data寫法不一樣。下面利用實(shí)例說(shuō)明，操作如下：
第一步，創(chuàng)建一個(gè)靜態(tài)頁(yè)面并引入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，如下圖所示：
第五步，保存代碼并打開(kāi)瀏覽器預(yù)覽界面效果，可是控制臺(tái)出現(xiàn)了錯(cuò)誤警告，如下圖所示：
第六步，調(diào)整template標(biāo)簽屬性嵌套，去掉多層標(biāo)簽元素，只留一個(gè)div標(biāo)簽；class前面的:去掉，如下圖所示：
相關(guān)文章
這篇文章主要介紹了 vue3 自定義指令詳情，自定義指令分為全局和局部?jī)煞N類型，大家并不陌生。今天我們就講講在 vue3 中，自定義指令定義、使用以及鉤子函數(shù)都有哪些變化？,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了從組件封裝看Vue的作用域插槽的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
如何使用Vue3+Vite+TS快速搭建一套實(shí)用的腳手架
Vite是一個(gè)面向現(xiàn)代瀏覽器的一個(gè)更輕、更快的?Web?應(yīng)用開(kāi)發(fā)工具,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3+Vite+TS快速搭建一套實(shí)用腳手架的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
本文主要介紹了Vue3中key的作用和工作原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue前端開(kāi)發(fā)輔助函數(shù)狀態(tài)管理詳解示例
vue的應(yīng)用狀態(tài)管理提供了mapState、mapGetters、mapMutations、mapActions四個(gè)輔助函數(shù)，所謂的輔助函數(shù)分別對(duì)State、Getters、Mutations、Actions在完成狀態(tài)的使用進(jìn)行簡(jiǎn)化2021-10-10
map()函數(shù)是在JS的數(shù)組中定義的,它返回一個(gè)新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于vue中map()快速使用的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
Vue3中toRef、toRefs都是與響應(yīng)式數(shù)據(jù)相關(guān)的，本文主要來(lái)給大家講解一下Vue3中的toRef和toRefs的使用，感興趣的朋友跟隨小編一起看看吧2023-01-01
安裝vue-cli報(bào)錯(cuò) -4058 的解決方法
這篇文章主要介紹了安裝vue-cli報(bào)錯(cuò) -4058 的解決方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章主要介紹了vue-cli3 中跨域解決方案，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
在vue3中新的組合式API中沒(méi)有this,那我們?nèi)绻枰玫絫his怎么辦?下面這篇文章主要給大家介紹了關(guān)于Vue3中使用this的詳細(xì)教程,需要的朋友可以參考下2023-07-07