插值表达式
文本
在 Vue 中进行数据绑定,我们最常用的方法就是使用 {{ }}
的文本插值。例如:
<span>Hello, {{ name }}</span>
在解析时, {{ name }}
将会被解析为对应的数据对象中 name
属性的值,如果数据对象中的 name
值发生了变化,由于 Vue 是双向数据绑定,所以标签中的内容也会实时更新。
{{ }}
语法只可以替换指定区域的文本内容,不能输出真正的 HTML ,如果需要嵌入 HTML 代码,需要用到 v-html
属性。等同于原生 JS 语法中的 innerHTML
。同理,也有 v-text
等同于 innerText
,例:
<span v-html="msg"></span>
<span v-text="htmlMsg"></span>
在解析时, v-html
和 v-text
的 attribute 值,对应着数据对象中的同名 property 值。
属性
v-html
和 v-text
虽然写作 标签的 attribute 格式,但操作的实际上是标签中间的内容,如果想要动态的操作 attribute 的值,应该使用 v-bind
指令,缩写为 :
,例如:
<span v-bind:id="span1"></span>
<span :id="span2"></span>
从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:
<a :[attributeName]="url">点击跳转</a>
这里的 attributeName
会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。例如,如果你的 Vue 实例有一个 data
property attributeName
,其值为 "href"
,那么这个绑定将等价于 :href
。
注意:动态参数预期会求出一个字符串,异常情况下值为 null
。这个特殊的 null
值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
JavaScript 表达式
迄今为止,在我们的模板中,我们一直都只绑定简单的 property 键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持:
{{ number + 1 }}
{{ isTrue ? 1 : 2 }}
{{ str.split('').reverse().join('') }}
<div :id="'div-' + index"></div>
注意:模板语法中只支持表达式,不支持语句:
{{ var a = 1 }}
<div :id="if (isTrue) { 'div1' } else { 'div2' }"></div>
计算属性
什么是计算属性
正如上文所说,Vue 模板语法中限制只能使用表达式进行简单运算,如果碰上复杂的逻辑使用 methods 又太过沉重而难以维护。所以,对于复杂逻辑,建议使用计算属性:
let vm = new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
reverseMsg() {
return this.message.split('').reverse().join('')
}
}
})
// message ==> Hello , reverseMsg ==> olleH
reverseMessage
是依赖于 message
的,当 message
发生变化时, reverseMessage
的值也随着发生变化
计算属性(computed
)VS 方法(methods
)
使用计算属性和使用方法能达到相同的结果,但是两者的缓存机制不同,计算属性是基于他们的响应式依赖进行缓存的,也就是说,只有当响应式依赖的值发生变化时,计算属性才会更新。但是方法在每次调用的时候都会占用资源。
所以,计算属性有一个优点,就是当同一个页面多次调用一个计算属性时,只需要计算一次,之后每次都可以从缓存中取值,因为之后每次调用时,计算属性的响应式依赖并未发生变化。但是,因为这个机制,使得计算属性不能用来存放需要实时更新的数据。
侦听器
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch
选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。使用 watch
选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。
let vm = new Vue({
el: '#vm',
data: {
message: 'Hello'
},
watch: {
message: function (val, oldVal) {}
},
})