[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> ```