Vue介绍及应用

简介

Vue是一个构建用户界面的UI框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。通过简单的api实现响应式的数据绑定和组合视图组件，Vue的核心是一个数据绑定系统。Vue的特性如下：

• 轻量级的框架（压缩后只有几十kb）
• 指令
• 双向数据绑定
• 可复用性（组件）
• 解耦数据与视图（数据驱动视图）
• 虚拟Dom（通过Dom Diff算法提升性能）
• 前端路由
• 状态管理

Vue基础语法

指令

v-text 等同于双大括号，用于文本插值。
v-html 输出真正的html，更新元素的innerHTML。
v-show/if 显示或隐藏元素，v-show 是通过display属性实现，v-if则是每次都新建或删除。
v-for 对数组或对象进行循环操作，可用template进行分组。
v-bind 用于属性动态绑定到表达式。
v-on 用于绑定事件监听器，支持事件修饰符 。
v-model 用于input、select、text、checkbox等表单控件元素上实现双向数据绑定。
v-once 使用了此指令的元素或组件及其所有的子节点，都只会渲染一次。
v-slot 具名插槽和作用域插槽。
自定义指令： 通过Vue.directive可以自定义指令。

计算属性、侦听器与过滤器

• 计算属性computed
  vue模板内的表达式支持简单的运算，但表达式复杂时，会难以维护。计算属性可以解决这个问题，在一个计算属性里可以进行复杂的逻辑运算，函数调用等，最终只需返回一个结果。
  每个计算属性都包含一个getter和setter。在需要时，可以设置setter函数，当手动修改计算属性时，会触发setter函数。

• 侦听器watch
  Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性watch ，在watch对象中，键是侦听的变量，值是变量变化时调用的函数，函数接收两个参数，第一个是变化前的值，第二个是变化后的值。

• 过滤器filter
  Vue提供过滤器用于一些常见的文本格式化，过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示，在组件中通过filter选项可以创建自定义的过滤器。

组件

• Vue的可复用性体现在组件上，组件可以扩展 HTML 元素，封装可重用的代码。
• 组件注册后才可以使用。
• 注册全局组件 Vue.component(tagName, options)。
• 注册局部组件 在Vue实例通过components选项注册局部组件。
• 组件中data必须是一个函数。
• 组件的模板只能有一个根元素。
• 一个组件可以分为数据和视图，数据更新时，视图也会自动更新。在视图中可以绑定事件，根据用户的操作触发methods中定义的方法，从而改变数据、更新视图。

组件通信

Vue支持多种方式进行组件通信，父子组件的通信，兄弟组件的通信，跨级组件的通信等。

• props：父组件向子组件传递数据，子组件在父组件作为标签引入，通过设置标签的属性传递数据，在子组件用props接受。
• 发布订阅模式：子组件向父组件传递数据，父组件on绑定一个事件，子组件emit触发这个事件。
• 时间总线bus：使用一个空Vue实例作为中央事件总线(bus)，通过bus.$on监听和bus.$emit触发来进行数据传递，这种通信方式可以进行任何组件间的通信，包括父子组件，兄弟组件，跨级组件。
• 依赖注入：Vue提供了依赖注入的方式允许跨级向后代组件传递数据 。provide选项指定需要传递的数据 ，在后代组件中通过inject选项接受。

生命周期

Vue实例从创建到销毁有一个完整的生命周期。每一个组件都会有开始创建、模板编译、挂载Dom、渲染前→更新→渲染后、销毁等一系列过程。Vue共提供8个响应的钩子函数，便于我们在相应时期进行操作。

• beforeCreate函数 dom还没有挂载，无法访问到数据和真实的dom。
• created函数 dom还没有挂载，数据已经初始化。
• beforeMount函数 虚拟dom已经创建完成，马上就要渲染。
• mounted函数 dom已经挂载，组件出现在页面中。
• beforeUpdate函数 数据更改之后，diff算法尚未进行。
• updated函数 数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom。
• beforeDestroy函数 调用$destroy方法后。
• destroyed函数 组件的数据绑定、监听等已经被销毁。

vue-router

vue-router 是官方维护的路由管理器，与Vue高度集成，使构建单页应用变得更简单。
vue-router的原理是不同的页面加载不同的组件，程序运行时会根据当前路由动态渲染不同的组件，路由切换时，切换的是挂载的组件，其他的内容不会变化。

基本用法

npm install vue-router --save
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
      //路由配置
})
new Vue({
  el:'#app',
  router:router,
  render:h=>{return h(app)}
})

动态路由：某种模式匹配的所有路由，映射到同一个组件。
嵌套路由：对应多层嵌套的。
命令路由：给路由命名，用来链接路由或执行跳转。
编程式导航：除了使用进行导航，还可以使用router的实例方法进行跳转。
重定向和别名：在路由中配置redirect和alias实现重定向和别名的效果。
命名视图：用于同级展示多个视图。
History模式：美化页面中的url，需后台配置支持。

vuex

在组件通信时，有bus、prop和依赖注入等方式，也可以使用vue的状态管理插件vuex。

基本用法

npm install vuex --save  安装

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

Vue.use(Vuex)

const store = new store({
      //vuex配置
})

new Vue({
  el:'#app',
  store:store,
  render:h=>{return h(app)}
})

store保存了应用的数据状态和操作过程，只要组件使用store的数据，store数据变化时，对应的组件也会立即更新。store提供了state，mutations等选项用来配置我们需要的操作。

store的state选项保存数据，通过$store.state获取数据。
store的mutations选项用来直接修改state里的数据，通过$store.commit方法执行mutations。
store的getters选项用来封装数据提取后的复杂操作，通过$store.store.getters获取数据。
store的actions选项用来异步修改state的数据，通过$store.dispatch触发。
store的modules选项用来将store分割成不同的模块。当项目非常复杂时，store里的选项中数据会非常多，难以维护，使用modules可以分成不同的文件，每个modules都有自己的state、mutations、actions、getters。

构建应用

基于vue-cli快速构建vue应用

• 安装
  npm install -g vue-cli

• 初始化项目
  vue init webpack project 进行选项配置
  cd project 打开工程
  npm install 安装npm包
  npm run dev 启动项目
  即可快速构建一个Vue项目

• vue引入element组件库
  npm install element-ui 安装element
  import ElementUI from ‘element-ui’
  import ‘element-ui/lib/theme-chalk/index.css’
  Vue.use(ElementUI)

• vue引入iview组件库
  npm install iview --save　安装iview
  import iView from ‘iview’;
  import ‘iview/dist/styles/iview.css’;
  Vue.use(iView);

• vue-cli3 可以使用 TypeScript 生成新工程
  安装vue-cli3
  npm install --global @vue/cli
  创建一个新工程
  vue create my-project-name
  选择 Manually select features选项配置