Vue笔记
v-once:
指令,执行一次性插值,也就是说,在数据改变时,插值内容不会随之更新。但是请牢记,这也将影响到同一节点上的所有绑定:
<span v-once>这里的值永远不会改变:{{ msg }}</span>
v-html:
在网站中动态渲染任意的 HTML 是非常危险的,因为这很容易导致网站受到 XSS 攻击。请只对可信内容使用 HTML 插值,绝对不要对用户提供的内容使用 HTML 插值。
computed 属性:
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 一个 computed 属性的 getter 函数
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
computed VS methods
俩种方法效果相同。然而,细微的差异之处在于,computed 属性会基于它所依赖的数据进行缓存。每个 computed 属性,只有在它所依赖的数据发生变化时,才会重新取值(re-evaluate)。这就意味着,只要 message 没有发生变化,多次访问 computed 属性 reversedMessage,将会立刻返回之前计算过的结果,而不必每次都重新执行函数。
相比之下,每当触发重新渲染(re-render)时,method 调用方式将总是再次执行函数。
为什么我们需要将依赖数据缓存起来?假设一种场景,我们有一个高性能开销(expensive)的 computed 属性 A,在 computed 属性的 getter 函数内部,需要遍历循环一个巨大数组,并进行大量计算。然后还有其他 computed 属性直接或间接依赖于 A。如果没有缓存,我们将不可避免地多次执行 A 的 getter 函数,这远多余实际需要执行的次数!然而在某些场景下,你可能不希望有缓存,请使用 method 方法替代。
computed VS watch
Vue 其实还提供了一种更加通用的方式,来观察和响应 Vue 实例上的数据变化:watch 属性。watch 属性是很吸引人的使用方式,然而,当你有一些数据需要随着另外一些数据变化时,过度滥用 watch 属性会造成一些问题 - 尤其是那些具有 AngularJS 开发背景的开发人员。因此,更推荐的方式是,使用 computed 属性,而不是命令式(imperative)的 watch 回调函数。(PS:优先使用computed)
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
v-bind:class
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值 。
多个绑定的情况:
<div class="static"
v-bind:class="{ active: isActive, text-danger: hasError }">
</div>
我们可以把一个数组传给 v-bind:class ,以应用一个 class 列表:
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
三元显示法
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
条件渲染
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
2.1.0+ 新增 v-else-if
<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>
v-for列表渲染
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
v-for组件
<my-component v-for="item in items" :key="item.id"></my-component>
现在,在 2.2.0+ 版本,当对组件使用 v-for 时,必须设置 key 属性。
表单
.lazy
在默认情况下, v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分),但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:
<input v-model.number="age" type="number">
这通常很有用,因为在 type=”number” 时 HTML 中输入的值也总是会返回字符串类型。
.trim
如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:
<input v-model.trim="msg">