每个绑定都只能包含单个表达式{{单个表达式}}
模板表达式——可使用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 只会阻止对元素自身的点击。