Vue基础知识

实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

其他的生命钩子：mounted、updated、destoryed。生命钩子的this上下文指向调用它的Vue实例。
不要在选项 property 或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())
箭头函数没有this，他会作为变量一直向上级作用域查找

模板语法

插本

文本

Mustache（胡子）语法
v-once指令，不会随着数据更新而更新

原始html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html指令

指令

v-if =‘seen’ 真假插入/移除元素
v-bind 响应式更新html attribute
v-on 监听dom事件

动态参数

可以用方括号括起来的 JavaScript 表达式作为一个指令的参数

<a v-bind:[attributeName]="url"> ... </a>

//如果你的 Vue 实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。

Class 与 Style 绑定

绑定html class

对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class

<div v-bind:class="{ active: isActive }"></div>

v-bind:class 指令也可以与普通的 class attribute 共存

我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式

<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'
    }
  }
}

数组语法

我们可以把一个数组传给v-bind:class,以应用一个class列表

<div v-bind:class="[activeClass, errorClass]"></div>


//三元表达式可以根据条件切换列表中的class
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

绑定内联样式

对象语法

<div v-bind:style="styleObject"></div>

//直接绑定到样式对象

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

vue.js会自动添加css property浏览器引擎的前缀

条件渲染

v-if

v-else
v-else-if
在元素上使用v-if条件渲染分组
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级

key管理可复用的元素

vue为了尽可能高效地渲染元素，通常会复用已有的元素。
key attribute可以表达出两个元素是完全独立的不要复用他们

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

v-show

v-show元素始终渲染保留在dom中，只是简单的切换元素的display属性值
v-show 不支持 <template> 元素，也不支持 v-else

v-show与v-if

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if是惰性的，只有条件为真时才会渲染，v-show不管初始条件总是会渲染
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

列表渲染

v-for把数组对应为元素

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。

<ul id="example-2">
    
  <li v-for="(item, index) in items">
//还可以用of代替in
//<li v-for="(item, index) of items">
    
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

在v-for里使用对象

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

可以提供第二和第三个参数

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>