Vue 2.6 + 补漏

指令#

动态参数#

<a v-bind:[attributeName]="url"> ... </a> <a v-on:[eventName]="doSomething"> ... </a>

如果你的 Vue 实例有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。

约束

<!-- 这会触发一个编译警告 --> <a v-bind:['foo' + bar]="value"> ... </a> <!-- 在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]` --> <a v-bind:[someAttr]="value"> ... </a>

计算属性和侦听器#

计算属性#

计算属性缓存 vs 方法#

为什么计算属性有缓存?

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在组件中 methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } }

可以在模板中直接使用methods中的方法 计算属性是基于它们的响应式依赖进行缓存的

• 使用methods 访问reversedMessage() ，每一次都会执行一遍
• 使用computed 访问reversedMessage() ，如果内部依赖的message没有变化，不会执行内部逻辑，会返回上一次计算的结果

注意：计算属性依赖的数据必须是响应式数据（如data内定义的数据）

计算属性 vs 侦听属性#

• 计算属性 依赖变化 依赖数据变化才执行函数逻辑

• 侦听器 自身变化 自身数据变化才执行逻辑

  计算属性的 setter#

  计算属性默认还有getter

computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } }

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName也会相应地被更新。

侦听器#

数据变化时执行异步或开销较大的操作时使用

watch: { // 如果 `question` 发生改变，这个函数就会运行 foo: function (new, old) { //... }, list:{ handler:function(){ }, deep:true // 如果list是个数组或对象，改变某一项或属性都会 深度检测到 } },

Class和Style#

class#

对象用法#

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

注意前面已经有class了  isActive 是bl 值， 也可以直接在data或者计算属性里写 

数组用法#

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> or <div v-bind:class="[{ active: isActive }, errorClass]"></div>

 用在组件上#

会被加到组件根元素上

<my-component class="baz boo"></my-component> <!-- class="之前的 baz boo" -->

Style#

 对象用法#

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

可以直接在data里写或者计算属性也可以 vue-js 可以自动加前缀 如transform  注意 {直接写，字符串} 不管是在template还是data里 

条件渲染#

v-if#

2.1 新增

<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div>

key #

Vue 会尽可能高效地渲染元素，会复用一些元素（同一DOM，不同数据） 使用 Key 添加唯一标识，阻止复用

v-show#

v-show 只是控制 css display属性 注意，v-show 不支持< template >元素，也不支持 v-else。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

v-for比v-if 优先级更高  不推荐使用

列表渲染#

使用对象#

<div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </div>

遍历时按Object.keys()遍历顺序

维护状态#

注意：key 必须是 number和string

数组更新检测#

变异方法#

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

这些方法改变原数组，可以做响应式变化

注意事项#

由于 JavaScript 的限制，Vue 不能检测以下数组的变动：

var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是响应性的 vm.items.length = 2 // 不是响应性的

1. 使用 vm.$set 

vm.$set(vm.items, indexOfItem, newValue)

1. 使用 splice()

同样对象也是如此

1. 修改添加单个

//Vue.set(object, propertyName, value) Vue.set(vm.userProfile, 'age', 27)

1. 修改添加多个

vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' })

可以在v-for 使用的

<li v-for="n in even(numbers)">{{ n }}</li> //函数 <div> <span v-for="n in 10">{{ n }} </span> </div> // 1 2 3 4 5.. 10 <ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider" role="presentation"></li> </template> </ul>

组件上使用 v-for key 是必须的

事件处理#

事件修饰符 >>>#

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>

??? 修饰符 

v-model#

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件；
• checkbox 和 radio 使用 checked 属性和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。