vue入门指南总结

五一闲在家没事做，又重温了一下vue的入门指南，边看边记录，便于记忆。

1.安装

1.1 直接

1.2 npm

npm install vue

1.3 CLI

CLI官方文档

2.介绍

Vue是一套用于构建用户界面的渐进式框架，支持申明式渲染，条件与循环，处理用户输入，组件化应用构建等。

3.Vue实例

一个Vue应用由一个通过new Vue创建的根vue，以及可选的嵌套组件和可选的组件树组成，所有的vue组件都是vue实例。

var vm = new Vue({
  // 选项
})

3.1.数据与方法

当一个Vue实例被创建时，它将data对象中所有的property加入到Vue的响应式系统中，当这些property的值发生改变时，视图将产生响应，更新为最新的值。

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true

注意
只有当实例被创建时就已经存在于data中的property才是响应式的。

除了用户自定义的data数据外，vue实例还提供了一些自身的property和方法，它们都有前缀$。

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

3.1.生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程，比如设置数据监听，编译模板，挂载DOM，监听数据更新等等，这些生命周期的函数给了用户在不同阶段添加自己的代码的机会。生命周期钩子的this上下文指向调用它的vue实例。

4.模板语法

Vue使用了基于html的模板语法，允许开发者声明式的将DOM绑定至底层Vue实例的数据，所有Vue的模板都是合法的HTML，所以能被规范的浏览器和HTML解析器解析。在底层的实现上，Vue将模板编译成虚拟DOM渲染函数，结合响应系统，Vue能够智能的计算出最少需要重新渲染多少组件，并把DOM操作的次数减少到最少。

4.1.文本

使用{{}}可以方便的显示文本信息，如下所示：

Message: {{ msg }}

当msg的值发生变化时，界面上也将发生相应的变化 。

4.2.原始html

如果需要在界面上渲染html内容，需要使用v-html指令：

4.3.Attribute

使用v-bind可以动态设置attribute的值。

Button

4.4.表达式

在vue的模板中，除了使用data中设置的property外，还可以使用表达式的形势：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

4.5.指令

指令是带有v-前缘的特殊attribute，指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM。

现在你看到我了

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素。

4.6.动态参数

从2.6.0开始，可以用广括号括起来的javascript表达式作为一个指令的参数，可以是attribute和事件名：

 ... 
 ... 

4.7.修饰符

修饰符是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定，例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

...

4.8.缩写

对于一些频繁使用的指令，使用缩写是很必要的，因此Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind

...


...

v-on

...


...

5.计算属性和侦听器

5.1 计算属性

模板内只能写一些简单的表达式，来进行简单的运算，但当逻辑较复杂时，让模板难以维护，所以，对于任何复杂逻辑，都应当使用计算属性,不仅能简化逻辑，还能提升代码的复用。

  
Original message: "{{ message }}"
  
Computed reversed message: "{{ reversedMessage }}"

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作 property vm.reversedMessage 的 getter 函数：

computed与methods区别
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

5.2侦听属性

Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动：侦听属性。通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。在watch中定义需要监听的property,当属性发生变化时，将执行对应的方法：

{{ fullName }}
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
    }
  }
})

6. Class 与 Style绑定

在操作元素的class列表和内联样式时，可以使用v-bind来处理它们，只需要通过表达式计算出字符串结果即可。

6.1.绑定HTML Class

6.1.1 对象语法

可以给class传递一个对象，来动态的切换class：

绑定的data如下所示：

data: {
  isActive: true,
  hasError: false
}

渲染结果如下所示：

当 isActive或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 "static active text-danger"。
绑定的数据对象不必内联定义在模板里：

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

或者使用计算属性：

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

6.1.2 数组语法

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

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染结果为：

6.2.绑定内联样式

6.2.1 对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

data: {
  activeColor: 'red',
  fontSize: 30
}

6.2.2.数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

7.条件渲染

7.1. v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。v-if必须将它添加到一个元素上，除了作用于html中的元素外，还可以在template中使用：

Vue is awesome!

7.2. v-else

可以使用 v-else 指令来表示 v-if 的else 块：

  Now you see me


  Now you don't

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

7.3.v-else-if

v-else-if，可以充当 v-if 的else-if 块，可以连续使用：

div v-if="type === 'A'">
  A

B

C

Not A/B/C

7.4.用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做能使 Vue变得非常快。但有时候为了防止元素复用，需要使用key属性。比如在使用v-for指令的时候，经常用传到：

  

    {{ item.message }}
  

7.5. v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

Hello!

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