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 侦听属性
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>
维护状态
数组更新检测
变异方法
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 // 不是响应性的
- 使用 vm.$set
vm.$set(vm.items, indexOfItem, newValue)
- 使用 splice()
同样对象也是如此
- 修改添加单个
//Vue.set(object, propertyName, value)
Vue.set(vm.userProfile, 'age', 27)
- 修改添加多个
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>
事件处理
事件修饰符 >>>
.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
作为事件。