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 () { |
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