Vue聲明式渲染詳解
更新時間：2017年05月17日 10:43:14 作者：街角小七
這篇文章主要介紹了Vue聲明式渲染詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn) DOM，也就是將模板中的文本數(shù)據(jù)寫進(jìn)DOM中，使用 {{data}} 的格式寫入。此代碼都是Vue.js官網(wǎng)上的實(shí)例。
1、首先導(dǎo)入Vue.js
<script type="text/javascript" src="vue.js"></script>
2、html和js代碼
<body>
<div id="id"> //id為實(shí)例中el的屬性
{{message}}
</div>
</body>
<script>
var vm = new Vue({
el:"#id",
data:{
message:'渲染到html中的數(shù)據(jù)！'
}
})
</script>
3、渲染結(jié)構(gòu)：
下面看看將文本數(shù)據(jù)單向綁定到DOM元素屬性上，將這個元素節(jié)點(diǎn)的title 屬性和 Vue 實(shí)例的 message 屬性保持一致，代碼如下
<body>
<div id="id">
<span v-bind:title="message"> <!--綁定實(shí)例中的數(shù)據(jù)-->
<!-- <span :title="message"> 簡寫-->
鼠標(biāo)懸停幾秒鐘查看此處動態(tài)綁定的提示信息！
</span>
</div>
</body>
<script>
var vm = new Vue({
el:"#id",
data:{
message:'頁面加載的時間'+new Date()
}
})
</script>
渲染結(jié)構(gòu)：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中的reactive函數(shù)聲明數(shù)組方式
這篇文章主要介紹了vue3中的reactive函數(shù)聲明數(shù)組方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue+ElementUI?實(shí)現(xiàn)分頁功能-mysql數(shù)據(jù)
這篇文章主要介紹了Vue+ElementUI?實(shí)現(xiàn)分頁查詢-mysql數(shù)據(jù)，當(dāng)數(shù)據(jù)庫中數(shù)據(jù)比較多時,就每次只查詢一部分來緩解服務(wù)器和頁面壓力。這里使用elementui的?Pagination?分頁?組件,配合mysql的limit語句，實(shí)現(xiàn)分頁查詢mysql數(shù)據(jù),下面來看看具體實(shí)現(xiàn)過程,希望對大家學(xué)習(xí)有所幫助2021-12-12
這篇文章主要介紹了vue+echarts繪制折線圖、柱狀圖和扇形圖教程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
使用vue實(shí)現(xiàn)多規(guī)格選擇實(shí)例（SKU）
這篇文章主要介紹了使用vue實(shí)現(xiàn)多規(guī)格選擇實(shí)例（SKU），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
當(dāng)啟動vue項(xiàng)目安裝依賴時報(bào)錯的解決方案
這篇文章主要介紹了當(dāng)啟動vue項(xiàng)目安裝依賴時報(bào)錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue實(shí)現(xiàn)一個6個輸入框的驗(yàn)證碼輸入組件功能的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)一個6個輸入框的驗(yàn)證碼輸入組件功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
再做前端頁面的時候,想獲取本地的ip地址,可能是為了和服務(wù)器通信,可能是為了展示,無論哪種,下面給大家總結(jié)下方法,這篇文章主要給大家介紹了關(guān)于vue前端獲取本地IP地址的相關(guān)資料,需要的朋友可以參考下2024-05-05
詳解vue-cli快速構(gòu)建vue應(yīng)用并實(shí)現(xiàn)webpack打包
這篇文章主要介紹了詳解vue-cli快速構(gòu)建vue應(yīng)用并實(shí)現(xiàn)webpack打包，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)可拖拽組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
今天小編就為大家分享一篇vuex存儲token示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11