重读了一遍 Vue.js 的文档

[lmk123]

第一次通读 Vue.js 的文档的时候是 v1.0.12。现在 Vue.js 已经 v1.0.24，虽然仍然没有到 v1.1，但添加了很多新的功能，所以今天花了点时间重新通读了一遍文档，顺便将其中容易遗漏的细节记录一下。

教程

Class 与 Style 绑定－绑定 HTML Class－数组语法

在 1.0.19+ 中，可以在数组语法中使用对象语法：

<div v-bind:class="[classA, { classB: isB, classC: isC }]">

方法与事件处理器 － 事件修饰符

1.0.16 添加了两个额外的修饰符：

<!-- 添加事件侦听器时使用 capture 模式 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

表单控件绑定－绑定 value－Checkbox

<input
 type="checkbox"
 v-model="toggle"
 v-bind:true-value="a"
 v-bind:false-value="b">

// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

一直不知道 Checkbox 可以分别指定 true 和 false 时的值。

过渡－自定义过渡类名

当需要和第三方的 CSS 动画库，比如 Animate.css 配合时会非常有用。

和 Framework7 配合也挺有用的，它用的是 .modal-in、.modal-out 这一类的命名。

过渡－过渡流程详解

文档上说 v-show 也能使用过渡，但在开发 vue-framework7 的时候，v-if 能触发过渡，但是替换成 v-show 的话总是不正常。有空深入研究一下。

组件－Prop 验证

type 也可以是一个自定义构造器，使用 instanceof 检测。

感觉没有什么场景会用到这一点，但作为以前不知道的事情还是记录一下。

组件－使用 v-on 绑定自定义事件

这个做法挺好，以后就这么干了。

组件－transition-mode

可以 <router-view transition="iOS-switch" transition-mode="out-in"></router-view> 实现类似于 iOS 风格的页面切换效果。

全局 Mixin

一旦全局注册混合，它会影响所有之后创建的 Vue 实例。

文档上把上句中的“所有”两个字加粗了，但是我加粗了“之后”这两个字，因为碰到了一个小坑：vuejs/vue-router#410

API

选项／数据

data

名字以 _ 或 $开始的属性不会被 Vue 实例代理，因为它们可能与 Vue 的内置属性与 API 方法冲突。用 vm.$data._property 访问它们。

一开始我以为可以通过这个办法来避免 Vue 将一些常量属性变成 getter/setter。

我所说的“常量属性”是指一些模版里要用到、但永远不会发生变化的数据——将这种数据的所有属性转换成 getter/setter 太浪费性能了。

举个例子，下面的 options 属性仅仅是用来渲染一个下拉框的，永远不会发生变化：

<select>
  <option v-for="option in options" v-text="option.name" :value='option.value'></option>
</select>

new Vue({
  data: {
    options: [{ name:'选项一', value: 1 }, { name: '选项二', value: 2 }]
  },
  ready () {
    console.log(this.options)
  }
})

查看控制台，你会发现 Vue.js 会遍历 options 里的每一个对象并将它们的属性转换成 getter/setter。

本来我以为，如果我们这样写，那 Vue 就会“放过” _options：

<select>
  <option v-for="option in $data._options" v-text="option.name" :value='option.value'></option>
</select>

new Vue({
  data: {
    _options: [{ name:'选项一', value: 1 }, { name: '选项二', value: 2 }]
  },
  ready () {
    console.log(this._options) // undefined
    console.log(this.$data._options)
  }
})

可是查看控制台，我发现 Vue 仍然遍历了 _options ，其中的每个对象属性都变成了 getter/setter。改变了 this.$data._options，DOM 仍然是会更新的！说白了仅仅只是没法用 this._options 访问到而已。查看在线示例

不过我们可以这么写：

<select>
  <option v-for="option in $data._options" v-text="option.name" :value='option.value'></option>
</select>

new Vue({
  data () {
    this._options = [{ name:'选项一', value: 1 }, { name: '选项二', value: 2 }]
  },
  ready () {
    console.log(this._options) // 数组能在模版里使用，但没有被转换成 getter/setter
  }
})

查看在线示例

extends

这个新加的配置挺有意思。

完。

[DFLovingWM]

我也一直苦恼template需要使用的常量怎么放，受教了！