之前做过项目，一直没有总结过，现在重新看文档加深一遍~~

一、介绍

1、声明与渲染

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

2、指令

• v-if
  true是加载，false则不加载
• v-for
• v-on
  v-on:click @click
• v-model 双向数据绑定

3、vue组件

一个组件实质上也是一个vue实例
props: ['todo']

<div id="app-7">
  <ol>
    //使用 v-bind 指令将 todo 传到每一个重复的组件中
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>
--
Vue.component('todo-item', {
  //将数据从父作用域传到子组件,模板可渲染动态数据
  props: ['todo'],
  template: '<li>This is a todo</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { text: 'Vegetables' },
      { text: 'Cheese' },
      { text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

二、Vue实例

1、构造函数创建实例

var vm = new Vue（{}）

2、属性，方法

data：{} 属性
method：{}定义方法

3、实例生命周期

• 数据检测，编译模板，挂载实例到DOM，数据变化时更新DOM
• 生命周期钩子
  created 在实例被创建之后被调用
  mounted
  updated
  destroyed 销毁实例时调用
• Vue.js没有构造器的概念
  4、生命周期图示

Paste_Image.png

三、模板语法

1、插值

1)、文本

{{}} 插值
v-once 一次性插值

<span v-once>This will never change: {{ msg }}</span>

• 双大括号会将数据解释为纯文本，而非 HTML

2)、纯html

v-html 可以输出真正的 HTML
<div v-html="rawHtml"></div>
注：动态渲染的html容易导致XSS攻击，绝不要对用户提供的内容插值

3)、属性

{{}}不能在html属性中使用，得用v-bind
<div v-bind:id="dynamicId"></div>

<button v-bind:disabled="true">Button</button>

4)、使用javascript表达式

{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

注：表达式中可以访问Math、Date这样的全局变量，但不能访问用户自定义变量

2、指令

1)、参数

指令可以接受参数
<a v-bind:href="url"></a>

2)、修饰符

. 用于指出一个指定应该以特殊方式绑定
<form v-on:submit.prevent="onSubmit"></form>

3、Filters 过滤器

由管道符 | 表示，添加在{{}}尾部
{{ message | capitalize }}
注： Vue 2.x 中，过滤器只能在 mustache 绑定和 v-bind表达式（从 2.1.0 开始支持）中使用，因为过滤器设计目的就是用于文本转换。

过滤器函数总接受表达式的值作为第一个参数。
new Vue({
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

过滤器可以串联：
{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可接受参数：
{{ message | filterA('arg1', arg2) }}
这里，字符串 'arg1' 将传给过滤器作为第二个参数， 
arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

4、缩写

v-on:click @click

四、计算属性

<div id="example">
  <p>初始值: "{{ message }}"</p>
  <p>计算之后的值: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    //声明计算属性
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

vm.reversedMessage 的值始终取决于 vm.message 的值

• 计算属性 和 Methods 比较
  计算属性是基于它的依赖缓存，只要message不发生改变，那计算属性必然也不会改变，计算属性不会总执行。
  相比而言，每当重新渲染的时候，method 调用总会执行函数
• 计算属性 和 Watched Property 比较
  $watch： 用于监听vue实例的数据变动
  <div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

上面代码是命令式的和重复的。

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

• 计算setter
  计算属性默认只有getter，可以自己定义setter

computed: {
  fullName: {
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    set: function (newValue) {  // setter
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

• 观察watchers
  用途：在数据变化响应时，执行异步操作或开销较大的操作时
  watch示例
  使用 watch 选项允许我们执行异步操作（访问一个 API），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。

五、具体指令详解

1、class

1)、对象语法

• 对象，可以多个属性

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

• 直接绑定data中的一个对象

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

• 常用且强大的模式如下
  绑定返回对象的[计算属性]

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

2)、数组语法

v-bind:class="[activeClass, errorClass]"
v-bind:class="[isAc ? acClass : '', eClass]"

当有多个条件 class 时可以在数组语法中使用对象语法
 v-bind:class="[{ active: isActive }, errorClass]"

3)、用在组件上

Vue.component('my-co', {
  template: '<p class="foo bar">Hi</p>'
})
//这些类将被添加到根元素上面 
<my-co v-bind:class="{ active: isActive }"></my-co>

Paste_Image.png

2、style

1)、对象语法,数组语法

//绑定到一个样式对象通常更好
<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

<div v-bind:style="[baseStyles, overridingStyles]">

3、条件渲染（v-if /v-show）

• <template> 元素当做包装元素，最终的渲染结果不会包含它

  
  
  Paste_Image.png
• v-if
• v-else
• v-else-if （2.1.0 新增）
• 使用key控制元素的可重用

  为高效的渲染元素，vue通常会复用已有的元素而不是从头渲染

key必须是唯一值

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

<label>元素会被复用，input不会被复用（有key属性）

• v-show
  v-show 的元素会始终渲染并保持在 DOM 中。（切换元素的 display）
  v-show 不支持 <template> 语法
• v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。
  因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

4、列表渲染（v-for）

v-for="(item, index) in items"
v-for="item of items"

• Template v-for

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>