首頁 > 開發者 > JavaScript
Vue聲明式渲染詳解，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元素屬性上，將這個元素節點的title 屬性和 Vue 執行個體的 message 屬性保持一致，代碼如下
<body> <div id="id"> <span v-bind:title="message"> <!--綁定執行個體中的資料--> <!-- <span :title="message"> 簡寫--> 滑鼠移至上方幾秒鐘查看此處動態綁定的提示資訊！ </span> </div></body><script> var vm = new Vue({ el:"#id", data:{ message:'頁面載入的時間'+new Date() } })</script>
渲染結構：
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
