vue快速入门速查手册

vue快速入门速查手册

快速上手，各种语法糖查询

内容	使用简单说明
声明式渲染	内容渲染： {{message}}   组件属性渲染： v-bind:attr="message"    或者简写成  :attr="message"
判断v-if	<p v-if="seen">现在你看到我了</p>
循环v-for	<li v-for="(todo, index) in todos" :key="index"> {{ todo.text }} </li>
事件	v-on:[event]="[methods]" v-on:click="reverseMessage"

构建自己的组件 - 一个Vue实例

实例选项	说明
data	实例内的数据，vue2中，数据必须是一个方法 data () {     return {       msg: 'Welcome to Your Vue.js App',       list: ["语法糖介绍", "构建自定义组件", "敬请期待..."]     }  }
methods	实例内的方法
生命周期事件	beforeCreate -> created -> beforeMount -> mounted -> beforeDestory -> destoryed see：文档
watch	监控data变化时间 data1: function(newValue, oldValue) {}
dom元素获取	<div ref="box"></div> 获取元素 this.$refs.box
路由	获取路由变量 this.$route.param.[param] 路由跳转 this.$route.push([url])

环境变量配置

配置位于项目的config文件内，prod.env.js是生产配置，dev.env.js是开发环境配置

在npn run dev情况下，dev的配置会覆盖生产配置

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"https://xxx.api.com"'
}

应用：process.env.API_ROOT

使用axios发送http请求

axios({
  method: 'get',
  url: 'http://www.baidu.com',
  responseType:'json'
})
.then(function (response) {
  if (response.status == 200) {
    var rs = response.data;
    if (rs.code == 403) {
       that.$router.push("/login");
    } else {
       //do something
    }
  }
});

使用axios拦截器，这里使用mint-ui的加载效果做例子，一般放到main.js中全局使用

axios.interceptors.request.use((config) => {
    MintUI.Indicator.open({
        //打开loading
        text: '加载中...',
        spinnerType: 'fading-circle'
    });
   return config;
}, (err) => {
  return Promise.reject(err);
})
axios.interceptors.response.use((response) => {
    //关闭loading
    MintUI.Indicator.close();
    return response;
}, (err) => {
    MintUI.Indicator.close();
    return Promise.reject(err);
})

使用Mock.js模拟数据

先安装npm install mockjs --save-dev（注意不要使用--save）

参考文章：https://segmentfault.com/a/1190000010592626

ES6语法

1）箭头函数this指向

使用function定义的函数，this的指向随着调用环境的变化而变化的，而箭头函数中的this指向是固定不变的，一直指向的是定义函数的环境。

//function 
//使用function定义的函数
function foo(){
    console.log(this);
}
var obj = { aa: foo };
foo(); //Window
obj.aa() //obj { aa: foo }

//使用箭头函数定义函数
var foo = () => { console.log(this) };
var obj = { aa:foo };
foo(); //Window
obj.aa(); //Window