Vue学习系列（基础篇） - 石沉大海

前言

虽然Vue.js是一个趋向指令的框架。相比现有的React和Angular1 2框架而言，Vue的性能较好，而且官方也说了学习Vue，只要有HTML和JavaScript基础，看着文档就会（中文字你一定看得懂）。具体关于Vue的信息，你可以在官网查看，这里就不复述了，给你一张官网的飞机票。
注：讲解的是Vue 2.0

创建实例

在当前环境中引入Vue了过后，你就可以通过new Vue()的方式创建Vue应用。每一个Vue实例都会代理data对象里的所有属性。

实例生命周期

每一个Vue的实例被创建之前都要经历一系列的初始化过程。而这些过程中，实例也会调用一些生命周期钩子，给我们提供了一些添加自定义逻辑的机会。生命周期如下图：

模版语法

上面说到每一个Vue实例中都会代理data对象里的所有属性，当你想要将数据插入到HTML中的时候，使用的是「Mustache 语法（双大括号）」。

1	<span>Message: {{ msg }}<span>

这样一来，Vue实例上的数据对象上msg属性发生变化，插值处的内容也会一同更新。当然你也想一次性插值，可以通过使用`v-once指令来实现。

1	<span v-once>Message: {{ msg }}<span>

那如果我想将数据绑定到HTML属性上可是使用「Mustache 语法（双大括号）」吗？在Vue 2.x明确规定，使用v-bind指令即可。

1
2
3

<span v-bind:title="msg">Message: {{ msg }}<span>
<!-- v-bind 缩写 : 所以上述可以写成-->
<span :title="msg">Message: {{ msg }}<span>

在数据绑定上，Vue.js 也支持JavaScript表达式，是表达式噢！


{{ ok? "Yes":"No"}}
<span>Message: {{ msg.split('').reverse().join('') }}<span>

指令

指令（Directives）是带有v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（除了v-for）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。指令API

常用的指令

v-show：更具表达式的真假，切换元素display:none;的CSS属性。
v-if / v-else / v-else-if：根据表达式的值的真假而渲染页面。在切换时元素及它的数据绑定 / 组件被销毁并重建。注意使用v-else时候，该元素要紧贴v-if元素。
v-for：遍历数据源，实现多次渲染页面。
v-on：绑定事件监听器。用于普通的元素就是监听原生的DOM事件。用于自定义的元素上，就可以监听子组件触发的自定义事件(这就是父子组件的通信方法)。缩写：@
v-bind：动态的绑定特性。缩写：:
v-model：实现数据的双向绑定，一般用于表单控件

参数

有一些指令可以接受参数，在指令后用冒号指明。

1	<span v-bind:title="msg">Message: {{ msg }}<span>

在这里 title 是参数，告知 v-bind 指令将该元素的 title 属性与表达式 msg 的值绑定。
监听DOM事件，使用的指令是v-on：

1	<input type="submit" v-on:click="doSomething" value="提交">

修饰符

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

1	<input type="submit" v-on:click.prevent="doSomething" value="提交">

过滤器

Vue允许你自定义过滤取，可以用作一些常见文本的格式化。

<!--可以在下面这两个地方-->
{{ msg | capitalize}}
<div v-bind:id="rawId | formatId"></div>

过滤器函数总接受表达式的值作为第一个参数。

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

计算属性

在模版中可以使用表达式，而表达式往往是一些简单的运算。如果在模版中放入大量逻辑会让模版难以维护。为了让模版更清晰和简单，便用到计算属性。顺便一提，在子组件不建议将props的值进行修改，也可以使用计算属性做一层嵌套。

<div id="example">
  <span>原始的信息是：{{msg}}</span>
  <span>Message: {{ msg.split('').reverse().join('') }}<span>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    msg: 'Hello'
  },
  computed: {
    // 默认只有getter 属性
    reversedMessage: function () {
      // `this` 指向的就是 vm 实例
      return this.msg.split('').reverse().join('')
    }
  }
})

其实还可以在methods里申明一个方法，在模版中调用方法就行。就像这样：

<div id="example">
  <span>原始的信息是：{{msg}}</span>
  <span>Message: {{reversedMessage() }}<span>
</div>

new Vue({
  // el data 和上面一样
  methods:{
    reversedMessage(){
      return this.msg.split('').reverse().join('')
    }
  }
})

那么这样有区别吗？
其实是有，在页面渲染的过程中，计算属性是根据依赖数据（这里就是data里的msg）而变化的，一旦依赖数据（msg）发生了变化，计算属性就会重新计算给出返回值，依赖数据不变的情况下，计算属性会缓存之前计算的数据。而methods里的方法，只要发生看重新的渲染，函数总会执行。
虽然计算属性可以满足我们觉得多数的需求，可当我们想在某个数据变化响应一些方法，这时候我们就可以使用watch。

提供一个学习的仓库

以上是笔者认为是关于Vue的最基础的知识。因为没有写如何使用Vue，所以笔者有一个repo里已经写好关于搭建Vue环境，目录下有一个app.js文件就是关于Vue的基础代码。提供飞机票