Vue 2.0 一文教程

基础特性

渐进式开发

可以 单HTML页面 使用Vue，也可以整个项目使用Vue

生命周期

• beforeCreate 实例开始初始化时同步调用，数据观测和事件尚未初始化
• created 实例创建之后调用，完成数据绑定，事件方法。Document尚未挂载
• beforeMount 在Document挂载之前运行
• mounted 编译结束时调用。指令已生效，数据变化已能触发DOM更新 (不保证$el已经插入文档)
• beforeUpdate 再次更新实例时会调用，此时DOM尚未更新
• Updated 再次更新实例并更新完DOM后调用
• beforeDestroy 开始销毁实例时调用，此刻实例仍有效
• destroyed 实例被销毁之后调用

数据绑定

文本插值

最基础的形式，使用 双大括号{{}} (源自Mustache语法)

<span>Hello {{name}}</span>

插值也可以应用在HTML属性中

<div id='id_{{blogId}}'></div>

// 2.0 写法
<div v-bind:id='"id_"+blogId'/>
<div :id='"id_"+blogId'/>

过滤器

过滤器可以用在两个地方：双花括号插值 和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

计算属性

类比Java的 Getter 和 Setter ，先将数据进行处理。

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

该用例即为 单页面使用Vue 的用法

---

表单控件

Vue提供 v-model 指令对表单元素进行双向绑定，修改表单元素同时，实例中的对应属性值也会同时更新。

• Text

<input type="text" v-model="email"/>
<span>Your input is {{email}}</span>

• Radio

<input type="radio" value="male" v-model="gender">男
<input type="radio" value="famale" v-model="gender">女
<span>选择的性别是 {{gender}}</span>

• CheckBox

<input type="checkbox" value="1" v-model="multiChecked">1
<input type="checkbox" value="2" v-model="multiChecked">2
<input type="checkbox" value="3" v-model="multiChecked">3
<input type="checkbox" value="4" v-model="multiChecked">4
<span>你选择了 {{multiChecked.join('|')}} </span>

• Select

<select v-model="selected">
    <option selected>A</option>
    <option>B</option>
    <option>C</option>
</select>
<span>你选择了 {{selected}} </span>

Class及Style绑定

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

// Vue实例中必须有
data:{
    active:false
}

指令

内置指令

• v-bind 动态绑定DOM元素属性
• v-model 绑定表单控件
• v-if 及 v-else 根据条件展示对应的模板内容

<div v-if="yes"> yes </div>
<div v-else> no </div>

• v-show 功能同v-if，

v-if 与 v-show 的区别：v-if在条件为false的情况下并不进行模板的编译，而v-show则会在模板编译好之后将元素隐藏掉。v-if的切换消耗比v-show高，但初始条件为false的情况下，v-if的初始渲染要稍快

• v-for

<ul>
    <li v-for=item in items">
        <h1> {{item.title}} </h1>
    </li>
</ul>

• v-on 事件绑定

<button v-on:click='popLoginDialog'></button>

// 简写
<button @click='popLoginDialog'></button>

• v-text 更新元素的文本值

• v-HTML 用于更新元素的innerHTML，接受的字符串不会进行编译操作，按普通HTML处理。

<div v-HTML="blogContent"></div>

• v-el 在DOM元素注册一个索引，使得可以直接访问DOM元素。(通过$els属性调用)

<div v-el:blog-content> there is a blog el </div>
// 获取文本，vm即为该实例名
vm.$els.blogContent.innerText

由于HTML不区分大小写，在v-el如果使用了驼峰命名，系统会自动转换成小写。但可以使用 - 来连接期望大写的字母

• v-ref 功能同 v-el，作用于子组件上。(通过$refs访问)
• v-pre 跳过编译该元素
• v-cloak 可以隐藏未编译的Mustache标签直到实例准备完毕 (解决闪现问题)

<div v-cloak> {{message}} </div>

官方推荐搭配如下 CSS 属性一起使用

[v-cloak]{
    display:none
}

• v-once 标明元素或组件只渲染一次。（即使随后发生绑定数据的变化或更新，该元素或组件及包含的子元素都不会被编译和渲染）

自定义指令

通过 Vue.directive(id, definition) 可以注册一个全局指令

组件

组件选项与Vue选项的区别

在Vue中，属性的赋值是直接赋值

var vm = new Vue({
    el : '#app',
    data : {
        name : 'newcih'
    }
})

而在组件中需要定义

var MyComponent = Vue.extend({
    data : function() {
        return {
            name : 'newcih'
        }
    }
})

因为自定义组件可能拥有多个实例，如果直接将对象data传递给Vue.extend({})，那所有使用中的组件实例都会共享该data对象，所以需要通过函数返回一个新对象

组件Props

选项Props是组件中非常重要的一个选项。组件实例的作用域是孤立的，子组件的模板和模块中是无法直接调用父组件的数据，所以通过Props将父组件的数据传递给子组件

Vue.component('my-child', {
    props : ['parentContent'],
    template : '<span> {{parentContent}} is from parent </span>'
})

<my-child parent-Content="This data"></my-child>

同指令，注册组件的Props也要注意驼峰命名的转换，即通过 - 连接字母来达到大写字母的目的

一个完整的组件代码

文件名 components/Test.vue

<template>
    <!-- 存放模板代码 -->
    <div v-if="isLogin">
        Welcome, {{name}}
        <button @click="login">登录</button>
    </div>
</template>

<script>
export default {
    // 存放数据
    data () {
        return {
            name : 'newcih'
        }
    },
    // 生命周期函数
    created : function () {
        // 方法调用
    }，
    // 计算属性
    computed : {
        isLogin () {
            return true
        }
    },
    // 监听函数
    watch : {
        'name' (newValue, oldValue) {
            // 变量name的值变化时触发
        }
    },
    // 事件及自定义函数
    methods : {
        login : function () {
        }
    }

}
</script>

<style scoped>
    <!-- 存放css代码 -->
</style>

状态管理

Vuex是状态管理模式的一种实现库，主要以插件的形式和Vue.js进行配合使用，能够使我们在Vue.js中管理复杂的组件事件流。

在一些大型应用中，有时会遇到单页面应用包含着大量的组件及复杂的数据结构，而且可能各种组件还会相互影响各自的状态，在这种情况下组件树中的事件流会很快变得非常复杂，也使调试变得困难。为了解决这种情况，我们往往引入 状态管理 这种设计模式。

• Store 仓库，用于存储整个应用所需要的信息
• State 状态，Store中的数据
• Mutations 变更，更新Store的接口

一个完整的状态管理实现

文件名 vuex/store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isLogin: true
  },
  mutations: {
    UPDATE_LOGIN_STATE (state, loginState) {
      state.isLogin = loginState
    }
  },
  getters: {
    getLoginState: state => {
      return state.isLogin
    }
  }
})

触发 mutations 的方式可以为

this.$store.commit('UPDATE_LOGIN_STATE', true)

获取 state 数据的方式可以为

return this.$store.getters.getLoginState

获取 State 数据推荐在计算属性中获取，即放置到 computed 中执行

开发实践

项目结构

• my-project
  
  • build 存放webpack相关配置和脚本
  • config 存放配置文件，用于区分开发环境，测试环境，线上环境的不同
  • src 项目源码及需要引用的资源文件
    
    • assets
    • components
    • App.vue
    • main.js
  • static 不需要webpack处理的静态资源
  • test 用于存放测试文件
  • .babelirc
  • .editorconfig
  • .eslintignore
  • .eslintrc.js
  • .gitignore
  • index.html 项目入口，嵌入了App.vue组件
  • package.json
  • README.md

配置代理服务器

设置 config/index.js 文件中的属性如下

// proxyTable中添加'/api'表明 ： 接口'/api'开头的才使用代理，其它的如静态资源则使用本地文件
proxyTable : {
    '/api' : {
        target : 'http://my.service.com',
        changeOrigin : true,
        pathRewrite : {
            '^/api' : '/api'
        }
    }
}
// pathRewrite表明 : 将前端的接口代理URL中开头的 **/api** 替换为 **/api**，如果后台服务提供的接口并没有 **/api** 等前缀，则可以写为如下

pathRewrite : {
    '^/api' : ''
    // 或者是
    '^/api' : '/'
}

使用Axios发送请求

Axios是Vue 2.0后作者推荐的，不再维护vue-resource。Axios的使用手册可 点击查看

基本使用如下

// 发送Get请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 发送Post请求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Axios的Post请求默认发送的是 JSON 格式的数据，如果后台使用SpringMVC搭建，则可以使用注解 @RequestBody 接受参数

插件

开发插件

开发的插件必须提供 install 方法，第一个参数是 Vue构造器，第二个参数是可选的选项对象。一个例子如下

require('es6-promise').polyfill()
import axios from 'axios'
import {Promise} from '[email protected]@es6-promise'

export const Axios = axios.create({
  baseURL: '',
  timeout: 5000
})
// POST传参序列化(添加请求拦截器，即localStorage如果有token字段，则带上该字段到请求头的authentication字段)
Axios.interceptors.request.use(config => {
  if (localStorage.token) {
    config.headers.authentication = localStorage.token
  }
  return config
}, error => {
  return Promise.reject(error)
})
export default {
  install (Vue) {
    Object.defineProperty(Vue.prototype, '$http', {value: Axios})
  }
}

---

额外专题：关于 Promise

Promise是抽象异步处理对象以及对其进行各种操作的组件。在使用Promise进行一步处理的时候，我们必须按照接口规定的方法编写处理代码，而不会像回调函数那样可以自己自由的定义回调函数的参数，而必须遵守统一的编程方式来编写代码。Promise的功能是可以将复杂的异步处理轻松地进行模式化。

构造函数

var promise = new Promise(function(resolve, reject) {
    // 异步处理
    // 处理结束后，调用resolve或reject
}

静态方法

• Promise.reject() 返回一个使用接受到的值进行reject的新的promise对象
• Promise.resolove() 具有 .then 方法的对象。

---

使用Promise

1. 创建promise对象
   
   1. new Promise(fn) 返回一个promise对象
   2. 在 fn 中指定异步处理
      
      • 处理结果正常，调用 resolve(处理结果值)
      • 处理结果错误，调用 reject(Error对象)
2. 创建XHR的promise对象

function getURL(URL) {
    return new Promise(function(resolve, reject) {
        var req = new XMLHttpRequest();
        req.open('GET', URL, true);
        req.onload = function() {
            if (req.status == 200) {
                resolve(req.responseText);
            } else {
                reject(new Error(req.statusText));
            }
        };

        req.onerror = function() {
            reject(new Error(req.statusText));
        };
        req.send();
    });
}

// 运行示例
var URL = "http://httpbin.org/get";
getURL(URL).then(function onFulfilled(value) {
    console.log(value);
}).catch(function onRejected(error) {
    console.error(error);
});

使用插件

通过全局方法 Vue.use() 使用插件

// 调用 NewPlugin.install(Vue)
Vue.use(NewPlugin)

// 或是传入选项对象
Vue.use(NewPlugin, {someOption : true})

Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。然而在例如 CommonJS 的模块环境中，你应该始终显式地调用 Vue.use()：

// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')

// 不要忘了调用此方法
Vue.use(VueRouter)

Vue的插件库，点击进入

实践视频

后续发布