计算属性和监视

1、计算属性：

在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果

2、监视属性：

通过VM对象的$watch()或watch配置类监视指定的属性
当属性变化时，回调函数自动调用，在函数内部进行计算
3、计算属性高级：
通过getter和setter实现对属性数据的显示和监视
计算属性存在缓存，多次读取只执行一次getter计算

getter：属性的get方法
setter：属性的set方法

class与style绑定

1、class绑定

1）:class='xxx'
2）表达式是字符串: 'classA'
3）表达式是对象: {classA:isA, classB: isB}
4）表达式是数组: ['classA', 'classB']

2、style绑定

1）:style="{ color: activeColor, fontSize: fontSize + 'px' }"
2）其中 activeColor/fontSize 是 data 属性

条件渲染

1、条件渲染指令

1）v-if 与 v-else
2）v-show

2、比较 v-if 与 v-show

3）如果需要频繁切换 v-show 较好
4）当条件不成立时, v-if 的所有子节点不会解析

列表渲染

1、列表显示指令

数组: v-for / index
对象: v-for / key

2、列表的更新显示

删除 item
替换 item

3、列表的高级处理

列表过滤
列表排序

事件处理

1、绑定监听

1）v-on:xxx="fun"
2）@xxx="fun"
3）@xxx="fun(参数)"
4）默认事件形参: event
5）隐含属性对象: $event

2、事件修饰符

1）.prevent : 阻止事件的默认行为 event.preventDefault()
2）.stop : 停止事件冒泡 event.stopPropagation()

3、按键修饰符

1）.keycode : 操作的是某个 keycode 值的键
2）.keyName : 操作的某个按键名的键(少部分)

表单输入绑定

1、使用 v-model 对表单数据自动收集

1）text/textarea
2）checkbox
3）radio
4）select

Vue实例生命周期

1、声明周期流程图

02_lifecycle.png

2、Vue生命周期分析
1）初始化显示

beforeCreate()

created()

beforeMount()

mounted()

2）更新状态: this.xxx = value

beforeUpdate()

updated()

3）销毁 vue 实例: vm.$destory()

beforeDestory()

destoryed()

3、常用的生命周期的方法

1）created()/mounted(): 发送 ajax 请求, 启动定时器等异步任务
2）beforeDestory(): 做收尾工作, 如: 清除定时器

过渡动画

1、Vue动画理解

1）操作 css 的 trasition 或 animation

2）vue 会给目标元素添加/移除特定的 class

3）过渡的相关类名

xxx-enter-active: 指定显示的 transition

xxx-leave-active: 指定隐藏的 transition

xxx-enter/xxx-leave-to: 指定隐藏时的样式

2、基本过渡动画的编码

1）在目标元素外包裹

2）定义 class 样式

指定过渡样式: transition
指定隐藏时的样式: opacity/其它

过滤器

1、定义和使用过滤器
1）定义过滤器

Vue.filter(filterName, function(value[,arg1,arg2,...]){
    // 进行一定的数据处理
    return newValue
})

2）使用过滤器

{{myData | filterName}}
{{myData | filterName(arg)}}

内置指令与自定义指令

1、常用内置指令
1）v:text :

更新元素的 textContent

2）v-html :

更新元素的 innerHTML

3）v-if :

如果为 true, 当前标签才会输出到页面

4）v-else:

如果为 false, 当前标签才会输出到页面

5）v-show :

通过控制 display 样式来控制显示/隐藏

6）v-for :

遍历数组/对象

7）v-on :

绑定事件监听, 一般简写为@

8）v-bind :

强制绑定解析表达式, 可以省略 v-bind

9）v-model :

双向数据绑定

10）ref :

指定唯一标识, vue 对象通过$els 属性访问这个元素对象

11）v-cloak :

防止闪现, 与 css 配合: [v-cloak] { display: none }

自定义指令

1）注册全局指令

Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()
})

2）注册局部指令

directives : {
    'my-directive' : {
        bind (el, binding) {
            el.innerHTML = binding.value.toupperCase()
        }
    }
}

3）使用指令

v-my-directive='xxx'

自定义插件

1）Vue 插件是一个包含 install 方法的对象

2）通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等

Vue基础语法和生命周期