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文件，并在主體元素標(biāo)簽中插入一個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ù)覽界面效果，可是控制臺出現(xiàn)了錯誤警告，如下圖所示：
第六步，調(diào)整template標(biāo)簽屬性嵌套，去掉多層標(biāo)簽元素，只留一個div標(biāo)簽；class前面的:去掉，如下圖所示：
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了 vue3 自定義指令詳情，自定義指令分為全局和局部兩種類型，大家并不陌生。今天我們就講講在 vue3 中，自定義指令定義、使用以及鉤子函數(shù)都有哪些變化？,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了從組件封裝看Vue的作用域插槽的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
Vite是一個面向現(xiàn)代瀏覽器的一個更輕、更快的?Web?應(yīng)用開發(fā)工具,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3+Vite+TS快速搭建一套實用腳手架的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
本文主要介紹了Vue3中key的作用和工作原理，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
vue前端開發(fā)輔助函數(shù)狀態(tài)管理詳解示例
vue的應(yīng)用狀態(tài)管理提供了mapState、mapGetters、mapMutations、mapActions四個輔助函數(shù)，所謂的輔助函數(shù)分別對State、Getters、Mutations、Actions在完成狀態(tài)的使用進行簡化2021-10-10
map()函數(shù)是在JS的數(shù)組中定義的,它返回一個新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于vue中map()快速使用的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
Vue3中toRef、toRefs都是與響應(yīng)式數(shù)據(jù)相關(guān)的，本文主要來給大家講解一下Vue3中的toRef和toRefs的使用，感興趣的朋友跟隨小編一起看看吧2023-01-01
這篇文章主要介紹了安裝vue-cli報錯 -4058 的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了vue-cli3 中跨域解決方案，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
在vue3中新的組合式API中沒有this,那我們?nèi)绻枰玫絫his怎么辦?下面這篇文章主要給大家介紹了關(guān)于Vue3中使用this的詳細教程,需要的朋友可以參考下2023-07-07