4 计算属性和监听器
-
前面（3.9指令动态参数）里面提到过计算属性
- 什么是计算属性？
- 就把它理解为特殊的属性吧。
- 也可以说Vue构造函数的配置对象里面的computed便保存着计算属性。
- 其实computed保存的知识getter方法？
- 所有需要在插值表达式（即“{{}}”等）中用到的的复杂逻辑，都应当使用计算属性。模板中的表达式的职责应该是简单运算，不应该放入太多的逻辑。
-
计算属性和方法
- 调用方法其实也可以达到和计算属性一样的效果，使用方法同样能够响应式。
- 不同的地方在于：计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这意味着只要message不变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。
- 我理解的区别：计算属性会缓存。
- 如果你不希望有缓存，请用方法来替代。
- 这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：
computed: { now: function () { return Date.now() } }
尝试：
<div id="app2">
<p>
{{message}}
</p>
<p>
使用计算属性reverse:
{{reversedMessage}}
</p>
<p>
只使用模板表达式{{message.split('').reverse().join('')}}
</p>
<p>
使用方法{{reversedMsg()}}
</p>
</div>
var app2 = new Vue({
el : "#app2",
data : {
message: "hello comupted!"
},
computed: {
reversedMessage: function(){
return this.message.split('').reverse().join('');
}
},
methods: {
reversedMsg: function(){
return this.message.split('').reverse().join('');
}
}
});
-
监听属性
- Vue构造函数的配置对象里面的watch
- 应该和$watch不同吧，前面没提到过，得去看下API文档，它是干嘛用的。
- 好像是里面的监听函数与data中的属性同名，只要data中的数据发生变动，便会调用watch中的同名方法。
-
计算属性的setter
- 计算属性默认只有getter
- 不过在需要时你也可以提供一个 setter，如下：
// ... 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] } } } // ... -
监听器
- 即 watch
- 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。比如网络请求。
- 好像这就是$watch
- v-model的值会展示在输入框中
5 Class与Style绑定
-
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。只要是 attribute 就可以通过 v-bind 来操作，显然 style 和 class 都能通过 v-bind 来处理。
- Vue 对 v-bind 用于 style 和 class 做了专门的加强。表达式的结果除了字符串外，还可以是对象或数组。
-
绑定 HTML Class
- 对象语法，v-bind:class 的值可以是一个对象。如下：
<div v-bind:class="{ active: isActive }"></div>对象中的属性作为 class 的值，属性值的 truthiness （Boolean 值）决定该 class 是否存在。上面的例子，如果 isActive 的值为 false ，则 active 不会存在于该元素的 class 中。
-
需要注意的是，该对象只是写在 v-bind:class 的值里面的。在 Vue 实例中，该对象是不存在的。该对象的属性是确定的，只有属性值对应着 Vue 实例中的数据 property 。意味着 class 名在写 HTML 的时候就确定了，无法修改，能变化的只有是否要为该元素添加该 class。上面的例子中，class 值 active 无法变化，只有 isActive 存在于 Vue 实例中。啰嗦了。
... data: { isActive: true } ... v-bind:class 指令也可与普通的 class attribute 共存。
当对象中的属性值改变时，class 列表将相应的更新。
-
绑定的对象不必内联定义在模板里。草率了。符合我预想的功能出现了。如下：
<div v-bind:class="classObject"></div>data: { classObject: { active: true, 'text-danger': false } } -
好了，绑定的对象可以放在普通属性里。那么 计算属性 也是可以的。官方说，这是个常用且强大的模式呢。如下：
<div v-bind:class="classObject"></div>data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } } 数组语法 v-bind:class 的值可以是一个数组。
数组和对象又不一样了。数组中的变量对应 Vue 实例数据的 property。变量的值直接作为 class 值,而不再是 Boolean 值。
-
但别忘了 Vue 中的数据绑定是支持表达式的。所以可以用三元表达式实现切换列表中的 class。如下：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> 这样写将始终添加 errorClass，但是只有在 isActive 是 truthy 时才添加 activeClass。不过，当有多个条件 class 时这样写有些繁琐。
-
好，数组语法就到这里了？它还可以嵌套对象啊！如下：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
绑定内联样式，v-bind:style
-
内联样式——对象语法
- 对象语法非常像 CSS，属性就是 CSS 属性，值就是对应 Vue 实例的数据 property。
- 但是属性未必和 CSS 中一模一样，可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。如下：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>data: { activeColor: 'red', fontSize: 30 } - 也可以直接绑定到一个样式对象。这会让模板更清晰。如下;
<div v-bind:style="styleObject"></div>data: { styleObject: { color: 'red', fontSize: '13px' } } - 没错，和 v-bind:class 一样，能用普通属性就能用计算属性。
-
内联样式——数组语法
- 好奇数组怎么写样式吗？
- 答案是写不了，哈哈哈
- v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上。如下：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
-
内联样式——自动添加前缀
当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。- 好用！省事儿~
内联样式——多重值 没看明白~
