目录
计算属性:computed声明一个计算属性reversedMessage
侦听属性:watch有一些数据需要随着其它数据变动而变动时使用
计算属性的 setter,计算属性默认只有 getter,需要时可以提供一个 setter
侦听器:当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
1、模板语法
v-bind:绑定HTML 特性,<h2 v-bind:title="title"></h2>。布尔特性:<button v-bind:disabled="isButtonDisabled">Button</button>,如果
isButtonDisabled
的值是null
、undefined
或false
,则disabled
特性甚至不会被包含在渲染出来的<button>
元素中。
v-if:条件,如:<p v-if="bool">是否显示</p>
v-for:循环数据,如:<p v-for="arr in arrs">{ { arr.attr }}</p>
v-on:事件,如:<button v-on:click="function">点击</button>
v-model:实现表单输入和应用状态之间的双向绑定,如:<p>{ { message }}</p> <input v-model="message">
v-once:一次性的插值,当数据改变时内容不会更新,如: <span v-once>这个将不会改变: { { msg }}</span>
v-html:输出html,如:<span v-html="rawHtml"></span>---- rawHtml='<span style="color: red">This should be red.</span>'
使用 JavaScript 表达式,每个绑定都只能包含单个表达式:如:{ { number + 1 }},{ { ok ? 'YES' : 'NO' }},{ { message.split('').reverse().join('') }},<div v-bind:id="'list-' + id"></div>
动态参数:<a v-bind:[attributeName]="url"> ... </a>。attributeName 会被作为一个 JavaScript 表达式进行动态求值
<a v-on:[eventName]="doSomething"> ... </a>。当
eventName
的值为"focus"
时,v-on:[eventName]
将等价于v-on:focus
。异常情况下值为
null。
这个特殊的null
值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
修饰符:修饰符 (modifier) 是以半角句号
.
指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent
修饰符告诉v-on
指令对于触发的事件调用event.preventDefault()
:<form v-on:submit.prevent="onSubmit">...</form>
缩写:
v-bind 缩写:v-bind:href="" -> :href=""
v-on 缩写:v-on:click="doSomething" -> @click="doSomething"
2、计算属性和侦听器
计算属性:computed声明一个计算属性reversedMessage
<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: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } })
结果:
Original message: "Hello"
Computed reversed message: "olleH"
像绑定普通属性一样在模板中绑定计算属性。Vue 知道
vm.reversedMessage
依赖于vm.message
,因此当vm.message
发生改变时,所有依赖vm.reversedMessage
的绑定也会更新。方法:methods
<p>Reversed message: "{ { reversedMessage() }}"</p>
// 在组件中 methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } }
计算属性与方法的区别:计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要
message
还没有发生改变,多次访问reversedMessage
计算属性会立即返回之前的计算结