Vue聲明式渲染詳解
更新時間：2017年05月17日 10:43:14 作者：街角小七
這篇文章主要介紹了Vue聲明式渲染詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式的將數據渲染進 DOM，也就是將模板中的文本數據寫進DOM中，使用 {{data}} 的格式寫入。此代碼都是Vue.js官網上的實例。
1、首先導入Vue.js
<script type="text/javascript" src="vue.js"></script>
2、html和js代碼
<body>
<div id="id"> //id為實例中el的屬性
{{message}}
</div>
</body>
<script>
var vm = new Vue({
el:"#id",
data:{
message:'渲染到html中的數據！'
}
})
</script>
3、渲染結構：
下面看看將文本數據單向綁定到DOM元素屬性上，將這個元素節(jié)點的title 屬性和 Vue 實例的 message 屬性保持一致，代碼如下
<body>
<div id="id">
<span v-bind:title="message"> <!--綁定實例中的數據-->
<!-- <span :title="message"> 簡寫-->
鼠標懸停幾秒鐘查看此處動態(tài)綁定的提示信息！
</span>
</div>
</body>
<script>
var vm = new Vue({
el:"#id",
data:{
message:'頁面加載的時間'+new Date()
}
})
</script>
渲染結構：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue2.0實現倒計時的插件(時間戳 刷新 跳轉 都不影響)
我發(fā)現好多倒計時的插件，刷新都會變成從頭再來，于是自己用vue2.0寫了一個，感覺還不錯，特此分享到腳本之家平臺供大家參考下2017-03-03
Element ui table表格內容超出隱藏顯示省略號問題
這篇文章主要介紹了Element ui table表格內容超出隱藏顯示省略號問題,具有很好的參考價值,希望對大家有所幫助,2023-11-11
這篇文章主要介紹了 vue中v-for 循環(huán)對象中的屬性，文章圍繞v-for 循環(huán)對象的相關資料展開詳細內容,需要的朋友可以參考一下，希望對大家有所幫助2021-11-11
詳解vue 動態(tài)加載并注冊組件且通過 render動態(tài)創(chuàng)建該組件
這篇文章主要介紹了vue 動態(tài)加載并注冊組件且通過 render動態(tài)創(chuàng)建該組件,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
Vue3 setup語法糖銷毀一個或多個定時器(setTimeout/setInterval)
這篇文章主要給大家介紹了關于Vue3 setup語法糖銷毀一個或多個定時器(setTimeout/setInterval)的相關資料,vue是單頁面應用,路由切換后,定時器并不會自動關閉,需要手動清除,當頁面被銷毀時,清除定時器即可,需要的朋友可以參考下2023-10-10
下面小編就為大家分享一篇axios post提交formdata的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue 實現setInterval 創(chuàng)建和銷毀實例
這篇文章主要介紹了vue 實現setInterval 創(chuàng)建和銷毀實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章主要介紹了在 React、Vue項目中使用SVG的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue開發(fā)Sort組件，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-10-10
解決vue運行報錯Error:Cannot?find?module?'@vue/cli-plugin-b
解決了因為版本問題在創(chuàng)建項目時出現的各種報錯問題,這次在運行時出現的問題,下面這篇文章主要給大家介紹了關于解決vue運行報錯Error:Cannot?find?module?'@vue/cli-plugin-babel'的相關資料,需要的朋友可以參考下2023-04-04