模板语法
动态的 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