每个绑定都只能包含单个表达式{{单个表达式}}

模板表达式——可使用Math和Date

v-bind:style = [值1， 值2 ]

数组中的值1 和值2 中存储的是一个对象 这个对象里面存储的 css属性和 属性值

v-bind:style = { 键： 值 }

键 代表 CSS的属性 值 存贮的是 CSS 属性值

v-for = “(item,index) in 数组名”

item 代表数组中的每一项 index 代表索引

<p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>

key来给每个节点做一个唯一标识 key的作用主要是为了高效的更新虚拟DOM

v-for in 后面可放（普通数组，对象数组，对象，数字）

VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】

如何将data 中的数据渲染到页面上？

利用循环遍历 list 然后把list 中的数据渲染到页面

计算机属性

computed: { //计算机属性的getter reversedMessage: function () { return this.message.split('').reverse().join('') }

计算机属性有缓存可避免多次执行 若不希望有缓存，用方法替代

事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。 Vue 不推荐我们操作DOM 为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符 修饰符是由点开头的指令后缀来表示的

<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 即阻止冒泡也阻止默认事件 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。

因此,用 v-on:click.prevent.self 会阻止所有的点击, 而 v-on:click.self.prevent 只会阻止对元素自身的点击。

组件component，越简单，复用率越高