基础特性

渐进式开发

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

生命周期

Vue 2.0 生命周期

  • 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的 GetterSetter ,先将数据进行处理。

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-ifv-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 '_es6-promise@4.2.4@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的插件库,点击进入
这里写图片描述

实践视频

后续发布

Logo

前往低代码交流专区

更多推荐