Vue——计算属性和监听器 and Class 与 Style 绑定

4 计算属性和监听器

前面（3.9指令动态参数）里面提到过计算属性
- 什么是计算属性？
- 就把它理解为特殊的属性吧。
- 也可以说Vue构造函数的配置对象里面的computed便保存着计算属性。
- 其实computed保存的知识getter方法？
- 所有需要在插值表达式（即“{{}}”等）中用到的的复杂逻辑，都应当使用计算属性。模板中的表达式的职责应该是简单运算，不应该放入太多的逻辑。
计算属性和方法
- 调用方法其实也可以达到和计算属性一样的效果，使用方法同样能够响应式。
- 不同的地方在于：计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这意味着只要message不变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。
- 我理解的区别：计算属性会缓存。
- 如果你不希望有缓存，请用方法来替代。
- 这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：
```
 computed: {
   now: function () {
     return Date.now()
   }
 }
```

尝试：


        
            {{message}}
        
        
            使用计算属性reverse:
            {{reversedMessage}}
        
        
            只使用模板表达式{{message.split('').reverse().join('')}}
        
        
            使用方法{{reversedMsg()}}

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 的值可以是一个对象。如下：
- 对象中的属性作为 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 列表将相应的更新。
- 绑定的对象不必内联定义在模板里。草率了。符合我预想的功能出现了。如下：
```
data: {
   classObject: {
      active: true,
      'text-danger': false
   }
}
```
- 好了，绑定的对象可以放在普通属性里。那么 计算属性 也是可以的。官方说，这是个常用且强大的模式呢。如下：
```
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。如下：
- 这样写将始终添加 errorClass，但是只有在 isActive 是 truthy 时才添加 activeClass。不过，当有多个条件 class 时这样写有些繁琐。
- 好，数组语法就到这里了？它还可以嵌套对象啊！如下：
绑定内联样式，v-bind:style
内联样式——对象语法
- 对象语法非常像 CSS，属性就是 CSS 属性，值就是对应 Vue 实例的数据 property。
- 但是属性未必和 CSS 中一模一样，可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。如下：
```
data: {
   activeColor: 'red',
   fontSize: 30
}
```
- 也可以直接绑定到一个样式对象。这会让模板更清晰。如下;
```
data: {
   styleObject: {
   color: 'red',
   fontSize: '13px'
   }
}
```
- 没错，和 v-bind:class 一样，能用普通属性就能用计算属性。
内联样式——数组语法
- 好奇数组怎么写样式吗？
- 答案是写不了，哈哈哈
- v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上。如下：
内联样式——自动添加前缀
当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
- 好用！省事儿~
内联样式——多重值没看明白~

Vue——计算属性和监听器 and Class 与 Style 绑定

4 计算属性和监听器

5 Class与Style绑定

你可能感兴趣的:(Vue——计算属性和监听器 and Class 与 Style 绑定)