08.vue.js实战笔记（计算属性、v-bind及class和style的绑定、内置指令、方法与事件）

1.计算属性

所有的计算属性都以函数的形式写在vue实例的computed选项内，最终返回计算后的结果

    
    
    
    


    

        
总价：{{prices}}
    
    
    

每个计算属性都有一个getter和setter；计算属性不仅依赖当前实例的数据，还依赖其他实例的数据

计算属性缓存：

计算属性是基于它的依赖缓存的，一个计算属性所依赖的数据发生变化时，才会重新取值；但methods不一样，只要重新渲染，就会被调用，函数也会被执行

2.v-bind及class和style的绑定

v-bind：动态更新HTML元素上的属性。元素的样式名称class和内联样式style也是HTML的属性，也可以用v-bind指令。

绑定class的几种方式：

（1）对象语法

类名active依赖于数据isActive，当其为true时，div会拥有类名active，否则没有。

对象中也可以传入多个属性，动态切换class；：class可以和普通class共存：

（2）数组语法

当需要应用多个class时，可使用数组语法

data:{
    activeCls:'active',
    errorCls:'error'
}

（3）在组件上使用

如果直接在自定义组件上使用class或：class，样式规则会直接应用到这个组件的根元素上：

声明一个组件：

Vue.component('my-component',{
   template:'
一些文本
'
})

在调用这个组件时，应用对象语法给组件绑定class：

 data:{  isActive:true  }

最后渲染的结果为：

一些文本

这种用法仅适用于自定义组件的最外层是一个根元素，否则会无效。

绑定内联样式：

使用:style给元素绑定内联样式，也有对象语法和数组语法

文本

data:{
    color:'red',
    fontSize:14
}

但一般不直接将样式全放在元素上，会写在data里：

文本

data:{
    styles:{
        color:'red',
        fontSize:14 + 'px'
    }
}

3.内置指令

（1）v-cloak

    解决初始化慢导致页面闪动问题，和display:none配合使用；

    当网速较慢，vue.js文件还没加载完时，页面会显示{{message}}字样，直到vue创建实例编译模板时，DOM才会被替换，

    这个过程屏幕有闪动，加一句css就可以解决问题：

[v-cloak]{
    display:none
}

（2）v-once

定义它的元素或组件只渲染一次，包括元素或组件的所有子节点

首次渲染后，不再随数据的变化重新渲染，将被视为静态内容

（3）条件渲染指令

  v-if     v-else-if    v-else

（4）v-show

v-if 与 v-show 的区别：

v-if是真正的条件渲染，会根据表达式适当的销毁或重建元素及绑定的事件或子组件，只有在条件第一次变为真时才开始编译；

v-show是简单的css属性切换，无论条件真与否，都会被编译。

v-if适用于条件不经常改变的场景，v-show适用于频繁切换条件

（5）列表渲染指令v-for

    

        
{{book.name}}
    

 也可以用v-for=“book of books” ； 也可以加索引： v-for= “（book，index）in books ”

v-if 和 v-for 都可以用在内置标签上

数组和对象都可以使用v-for 进行遍历； 遍历对象时有两个可选参数：key   index

v-for还可以迭代整数：

{{n}}

数组更新：

vue的核心是数据与视图的双向绑定；

数组方法：

会改变原数组： push( ) 、pop（）、shift（）、unshift（）、splice（）、sort（）、reverse（）

不会改变原数组：filter（）、concat（）、slice（）

过滤与排序：

当不想改变原数组，只是通过数组的副本做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组：

上边代码是将书名中包含JavaScript关键词的数据过滤出来，计算属性filterBooks依赖books，但不会修改books

实现排序也类似：

computed:{
    sortBooks(){
        return this.books.sort((a,b) => {
            return a.name.length

4.方法与事件

v-on 事件处理  

+1

+1

+10

对于handleAdd（）方法传参：

handleAdd(count){
    count = count || 1
    this.counter += count
}

vue提供一个特殊的变量$event，用于访问原生DOM事件：

打开链接

handleClick(message,event){
    event.preventDefault()
    window.alert(message)
}

修饰符：

event.preventDefault( ) 也可以用vue修饰符实现，在@绑定的事件后加小圆点“.” ，跟后缀使用修饰符

（1）.stop    @click.stop="handle"   阻止单击事件冒泡

（2）.prevent   @submit.prevent="handle"  提交事件不再重载页面

（3）.capture   @click.capture="handle"  添加事件侦听器时使用事件捕获模式

（4）.self   @click.self="handle"   只当事件在该元素本身（而不是子元素）触发时触发回调

（5）.once  @click.once="handle"  只触发一次