Vue基础知识
1 . 计算属性 (主要产生缓存的数据属性,防止DOM 性能消耗)
计算属性的方法既可以在模板语法中使用,有可以在指令系统中使用.
模板内的表达式非常便利,但是设计他们的初衷是用于简便运算的,在模板中放入太多的逻辑会让模板过重且难以维护. 例如 :
<div id="example"> {{ message.split('').reverse().join('') }} </div>
在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。所以,对于任何复杂逻辑,你都应当使用计算属性。例如:
<div id="example"> <p>原数据: "{{ message }}"</p> <p>翻转后的数据: "{{ reversedMessage }}"</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter(计算属性默认只有getter方法) reversedMessage: function () { return this.message.split('').reverse().join('') // `this`指向vm实例 } } })
2 . 侦听器 (watch)
虽然计算属性在大多数情况下更合适,但有时候也需要一个自定义的侦听器. 也就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化. 当需要在数据变化时执行异步或开销较大的操作时,这个方法是最有用的.
watch 可以监听单个属性,如果想监听多个属性,则声明多个属性的监听. 如下 :
<div id="app"> <p>{{ msg }}</p> <button @click='clickHandler'>修改</button> </div> <script src="vue.js"></script> <script> new Vue({ el:'#app', data(){ return { msg:"alex", age:18 } }, methods:{ clickHandler(){ this.msg = "wusir" } }, watch:{ // 监听属性'msg' 'msg':function (value) { console.log(value); if (value === 'wusir'){ this.msg = '大武sir'; } }, // 监听属性'age' 'age':function (value) { } } }) </script>
注意 : 计算属性即可以监听单个属性,有可以监听多个属性. 如下示例 :
<div id="app"> <p>{{ myMsg }}</p> <button @click='clickHandler'>修改</button> </div> <script src="vue.js"></script> <script> new Vue({ el:'#app', data(){ return { msg:"alex", age:18 } }, methods:{ clickHandler(){ this.msg = "wusir"; this.age = 20; } }, computed:{ myMsg: function () { // 即监听msg属性,又监听age属性 return `我的名字叫${this.msg},年龄是${this.age}`; } } }) </script>
3 . 查看接口 :
\