模板语法

动态的 html 页面

包含了一些 JS 语法代码

a.双大括号表达式

b.指令(以 v-开头的自定义标签属性)

基本指令

v-if与 v-else

v-show

比较v-if 与 v-show

如果需要频繁切换v-show较好

当条件成立时，v-if的所有子节点不会解析

vue 生命周期分析

初始化显示

*beforeCreate()

*created()

*beforeMount()

*mounted()

更新状态: this.xxx = value

*beforeUpdate()

*updated()

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

*beforeDestory()

*destoryed()

计算属性和监视

在computed属性对象中定义计算属性的方法

在页面中使用{{方法名}}来显示计算的结果

监视属性

通过vm对象的$watch()或watch配置来简述指定的属性

当属性变化时，回调函数自动调用，在函数内部进行计算

计算属性高级

通过getter/setter实现对属性数据的显示和监视

当属性变化时，回调函数自动调用，在函数内部进行计算

类和样式

理解

在应用界面，某个元素的样式时变化的

class/style绑定就是专门实现动态样式效果的技术

class绑定

:class='xxx'

表达式时字符串：'classA'

表达式是对象：{'classA','classB'}

表达式时数组：['classA','classB']

style绑定

:style="{ color: activeColor, fontSize: fontSize + 'px' }"

其中 activeColor/fontSize 是 data 属性

父子组件间的通信

基本原则

不要在子组件中直接修改父组件的状态数据

数据在哪, 更新数据的行为(函数)就应该定义在哪

props

vue 的自定义事件

消息订阅与发布(如: pubsub 库)

slot

vuex