[http://jsrun.pro/g2fKp/edit](http://jsrun.pro/g2fKp/edit) ### 設置文本值 —— {{}} ``` <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); ``` ### 指定 頁面元素的屬性以 v- 開頭（代表是vue的屬性）。 ### 綁定指令 v-bind ``` <div id="app-2"> <span v-bind:title="message"> 鼠標懸停幾秒鐘查看此處動態綁定的提示信息！ </span> </div> var app2 = new Vue({ el: '#app-2', data: { message: '頁面加載于 ' + new Date().toLocaleString() } }) ``` v-bind:title="message": 將元素的title屬性和Vue對象的message屬性綁定， 保持一致。 ### 條件 v-if, 控制是否顯示該元素 ### 條件 v-for, 循環 ### v-on 添加事件監聽器 ``` var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) ``` 注意： 這里的方法沒有去改變頁面元素，僅僅是改變數據 ### v-model 數據和頁面顯示綁定 ### 組件定義 ``` <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id" ></todo-item> ``` todo-item 看起來和HTML的標準標簽div span類似， 這是Vue的自定義標簽。 以下看起來是一個網站的標準模板， 有導航欄， 工具欄和正文。 ``` <div id="app"> <app-nav></app-nav> <app-view> <app-sidebar></app-sidebar> <app-content></app-content> </app-view> </div> ```