Vue使用学习总结

前段时间，在项目使用vuejs做了一个SPA应用，在此做下总结以作备忘。
目前vuejs已经发布了2.4.0版本，我们使用版本是：2.3.3，其官方推荐ES6语法。
vuejs是数据驱动的MVVM前端框架，其中频繁的像jquery类似操作dom元素是不推荐的。不过也要看项目中需求，避免不了频繁dom操作还是需要引入jquery/zepto操作库。

一、基本使用介绍

基本语法依照官方文档：https://vuejs.org/v2/guide/,使用vue-cli可以快速搭建vue应用程序结构，使用webpack模板

1. 几个重要语法:

   • 双向绑定：v-model
   • 绑定动态属性： v-bind (简写 - :)
   • 绑定事件：v-on(简写 - @) (.prevent - preventDefault(), .stop - stopPropagation...), 方法参数$event - 事件对象
   • 控制流程分支：判断 - v-if/v-else-if/v-else ; 循环 - v-for
   • 组件是否显示： v-show
   • 页面布局： 会使用到
   • 动效：(被包裹组件能有v-show属性控制)
   • $nextTick(callback)(等待下一次DOM渲染时执行传入的回调)
   • ...

2. 路由管理

   vue-router(版本：2.3.1)

   如：

new Router({
base: '<设置基路径>',
mode: 'history|hash',
routes: [{
path:'/',
name:'home',
component: Home
}]
});

```

html部分可以使用`` 设置跳转链接

`` 基于路径模式跳转
或者 ``  基于router name模式跳转

3. 状态管理

   Vuex(版本：2.3.1) （状态值储存于内存中）

   当涉及到view之间需要传递状态值时，通常可以使用router传递参数或者使用事件(发布/订阅)模式解决。此处可以使用官方推荐的vuex做状态管理。它将状态管理功能提取出来，调用方dispatch一个操作，vuex内部其实触发mutation操作更新state中的值，后续获取方通过getter就能获取想要的值。

4. 获取服务端数据

   axios(版本：0.16.2)

   页面中很大一部分逻辑是和后端服务进行交互的，此处使用的axios发送服务请求。

   基本使用方法:

   import axios from 'axios'
   
   axios({
   
   headers: {},
   
   withCredentials: true,
   
   url: '请求地址',
   
   method: 'HTTP Method',
   
   data: <请求数据>,
   
   timeout: <请求timeout时间>
   
   })```
   
   更多具体使用可参照: [https://www.npmjs.com/package/axios](https://www.npmjs.com/package/axios)
   
   *如果*需要使用mock数据，此处可使用axios-mock-adapter (版本：1.9.0)
   
   

二、拓展使用

1. 使用自定义组件

   有时为了项目中某些组件能被多个view使用，此时可以将其提出封装成自定义组件。

   其中自定义组件主要关键是父组件与子组件通讯，父组件向子组件传递变量初始值，子组件内部的状态变化不能直接更改父组件变量值，通过事件机制（发布-订阅）向父组件通知变化. （子组件内部$emit事件，父组件监听事件变化）子组件定义相应props，暴露公共属性，同时定义事件/watch关注内部状态值变化，然后发布事件通知父组件。

   另外还有一种组件形式类似表单验证错误时弹出的Toast框，此种组件形式可以通过定义好vue template，再通过Vue.extend(), $mount到页面上，在封装成js模块暴露出来以供使用。
   同时此种形式的组件也可以使用饿了么开源的mint-ui

2. 使用自定义命令 directives

   vue提供了directives以供开发者编写自定义的类似v-model功能，例如，项目中需要对文本框中的输入的文本做特定格式化(如银行卡号格式化每四位加一个空格),此时可考虑编写directives。