第三篇 常用的api

set添加数量属性

• 《{{book.name}}》 {{book.price.toFixed(2)}}元/本 {{book.number}}本 + -

总价：{{totalPrice}}

• book.number = 1这样添加的属性不具有响应性
• app.$set(book, 'number', 1); 注意set前的$,这种写法在异步时app已经赋值，故可用，而同步时不能用，因为app未定义
• this.$set(book, 'number', 1); 和上面相比，同步异步都可用
• Vue.set(book, 'number', 1); 全局的，任何时候也都能用
• 计算属性中的方法定义不能用箭头函数，据查是因为计算属性中的this绑定了上下文的缘故
• delete与set类似，不再重复说明

filter过滤器(全局)

车牌号为：鲁B {{plateNum | numberFilter}}

请输入车牌号：

filter过滤器(局部)以及传参

车牌号为：鲁B {{plateNum | upperCaseFilter|substringFilter(6)}}

请输入车牌号：

directive自定义指令（模拟v-show）

hello！

• filter创建时后面是个方法，而directive后面是个对象
• 这个对象的属性具有如下钩子函数(什么时候起作用)：
  • bind绑定时
  • inserted被插入到父元素时
  • update自己更新时
  • componentUpdated自己以及孩子更新时
  • unbind解绑时
• 以上所有方法都接受4个参数(如何绑定)：
  • el指令所绑定的元素，可用来直接操作DOM
  • binding是一个对象(绑定哪些内容)，如下：
    • name指令名，不包括v-前缀
    • value绑定的值(表达式的计算结果)
    • oldValue绑定的前一个值，仅在updated和componentUpdated钩子中可用
    • expression绑定的值(字符串形式)
    • arg传给指令的参数
    • modifiers包含修饰符的对象
  • vnodevue编译生成的虚拟节点
  • oldVnode上一个虚拟节点，仅在updated和componentUpdated钩子中可用
• HTML中v-后面的指令会被转成小写，所以定义的时候写成大写就找不到了！
• 如果一开始就不显示，isShow为true之后也不能显示，因为书上这段代码的逻辑是：绑定值为true时，元素恢复原来的显示状态，为false时元素隐藏。
• 经测试，上一条的问题在vue自带的指令v-show中也如此，不能把css隐藏的元素显示出来。

nextTick下次DOM更新后的回调

• $nextTick的执行时机是下次DOM更新后，不管现在是正在更新还是尚未更新。
• 在created创建后的周期函数里获取不到高度和文本内容，因为页面渲染是异步更新的，获取时页面可能还没加载完。
• 实例中采用局部定义方式this.$nextTick(() => { alert('文本高度为：'+msgDom.offsetHeight+'px'); })，可以用全局的Vue.nextTick( [callback, context] )，其中第二个参数默认指向window，可以更改