一、Class与Style绑定
1 绑定HTML class
#对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class。比如，
HTML：
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>
JS：
data: { isActive: true,hasError: false}
渲染为：
<div class="static active"></div>
上面的语法表示,可以通过设置data属性中的真假值来动态改变class属性
也可以直接绑定数据里的一个对象：
HTML：
<div v-bind:class="classObject"></div>
JS：
data: { classObject: { active: true, 'text-danger': false } }
渲染的结果和上面一样：
<div class="static active"></div>
#数组语法
把一个数组传给 v-bind:class，以应用一个class 列表
HTML：
<div v-bind:class="[activeClass, errorClass]">
JS：
data: { activeClass: 'active', errorClass: 'text-danger' }
渲染为：
<div class="active text-danger"></div>
2 绑定内联样式
#对象语法
v-bind:style的对象语法十分直观——看着非常像 CSS ，其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）
HTML:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
JS:
data: { activeColor: 'red', fontSize: 30 }
#数字语法
v-bind:style 的数组语法可以将多个样式对象应用到一个元素上：
HTML:
<div v-bind:style="[baseStyles, overridingStyles]">
二、条件渲染
v-if
v-if为真值，则渲染。否则不渲染。如，<h1 v-if="ok">Yes</h1>
template v-if
因为v-if是一个指令，需要将它添加到一个元素上。如果我们想切换多个元素，可以把一个 <template> 元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它。如下面的代码，
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-else
可以用 v-else 指令给 v-if 或 v-show添加一个 “else” 块：
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
v-else 元素必须紧跟在v-if 或 v-show 元素的后面——否则它不能被识别
v-show
另一个根据条件展示元素的选项是v-show 指令。用法和v-if大体上一样，
eg，<h1 v-show="ok">Hello!</h1>
不同的是有v-show 的元素会始终渲染并保持在 DOM 中。v-show是简单的切换元素的 CSS 属性display。
注意： v-show 不支持 <template> 语法。
v-if vs. v-show
v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。
三、列表渲染
v-for
基本用法：
v-for 指令根据一组数组的选项列表进行渲染，其特殊的语法形式是 item in items 或item of items， items 是源数据数组，item 是数组元素迭代的别名。
主要有对象属性的迭代，整数的迭代，Template v-for。
四、数组更新检测
1.变异方法
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
2.重塑数组
变异方法(mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异(non-mutating method)方法，例如： filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
Vue不会 丢弃现有 DOM 并重新渲染整个列表它实现了一些智能启发式方法来最大化 DOM 元素重用。
3.注意事项
由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
1.当你直接设置一个项的索引时，例如： vm.items[indexOfItem] = newValue
2.当你修改数组的长度时，例如： vm.items.length = newLength
解决方法如下：
第一种情况，
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)
第二种情况，
example1.items.splice(newLength)
4.显示过滤/排序结果
五、 事件处理器 v-on
监听事件：监听 DOM 事件来触发一些 JavaScript 代码
方法事件处理器： 接收一个定义的方法来调用
内联处理器方法：绑定内联 JavaScript 语句
事件修饰符：.stop .prevent .capture .self，通过由点(.)表示的指令后缀来调用修饰符。
按键修饰符：监测键盘的键值。形式：v-on:keyup.keycode，为了方便使用，vue提供了一些常见的按键别名：enter tabdelete (捕获 “删除” 和 “退格” 键)esc space up down left right
六、监听事件 v-model
表单控件绑定
v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
网友评论