Vue.js 学习笔记

实例生命周期钩子

• created 钩子可以用来在一个实例被创建之后执行代码
• 不要在选项属性或回调上使用箭头函数，比如：created: () => console.log(this.a)

模板语法

插值

• v-once指令，执行一次性插值，例：

<span v-once>这个将不会改变：{{ msg }}</span>

使用JavaScript表达式

• {{}} //中可使用JavaScript表达式
  

指令

指令（Directives）是带有v-前缀的特殊属性

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

<a v-bind:href="url">...</a>

缩写

• v-bind 缩写 v-bind:href 等于 :href
• v-on 缩写 v-on:click 等于 @click

计算属性和观察者

计算属性缓存vs方法

计算属性是基于他们的依赖进行缓存的

绑定HTML Class

对象语法

使用计算属性

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

用在组件上

当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。

条件渲染

使用 v-if 和 v-else 实现

在 <template> 元素上使用 v-if 条件渲染分组

可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

v-else 和 v-else-if

v-else-if 2.1.0版新增

v-show

与v-if不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

v-if vs v-show

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-if 与 v-for 一起使用

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。