昨天是最后一次给同事进行Vue的培训，这次培训主要是以基础入门为主。
整篇讲义参考了一些文章：https://gitbook.cn/gitchat/column/5a4af1c5658b7c0d9ebe1131/topic/5a4dfdddbb7105032b4fa06b
https://blog.csdn.net/insistlzh/article/details/79381796
在学习任何一种语言或者框架的时候，学到的知识，要会把它用出来才能变成自己的经验。大家自己平时学习的时候也要学会总结。这次，从整体说一下Vue常见的坑。
一、Vue.js
我认为Vue.js是一个数据驱动的渐进式的框架，双向数据绑定，通过指令的方式实现很多功能，组件式开发。
一般的项目中，只要不涉及到特殊的页面效果，都可以采用数据驱动页面的方法，包括页面间各种展示效果，通过CSS属性和Vue.js的指令配合就可以解决大部分的问题了。所以，大家在用这个框架的时候，要记住：数据驱动页面，用数据控制你的页面。
二、Vue常见的坑
1、this
在开发中，我们使用data中定义的变量或者methods定义的方法时，都是通过this.xxx或者this.xxx()的方式去调用。但是有的时候会出现报错，说this.xxx为undefined；我们明明已经定义了这些变量或方法，但它仍会报错
出现这种问题的原因：
①箭头函数
new Vue({
data: {
item: {
title: '',
description: '',
}
},
methods: {
saveItem: function() {
let vm = this;
this.$http.post('item', this.item)
.then(
function (response) {
vm.item.title = '';
vm.item.description = '';
},
function (response) {
console.log('error', response);
}
);
}
}
});
我们现在看一下上述代码，通过变量vm将tihs保存，这样的目的就是为了我们能够不受函数执行上下文影响获取Vue的实例对象；这种方式写起来很麻烦，我们可以使用箭头函数的方式，去精简我们的代码,如下：这样我们就可以不用总是保存一下this变量就可以获取到Vue实例了
saveItem: function() {
this.$http.post('item', this.item)
.then( (response)=> {
vm.item.title = '';
vm.item.description = '';
},(response) =>{
console.log('error', response);
}
);
}
箭头函数虽然很好用，但并不是所有的函数定义都要用到它。
saveItem:()=>{
this.$http.post('item',this.item).then(
//callbacks in here
)
}
如果写成这样的话，代码看起来更精简，但是会遇到一个坑，就是this的指向问题，此时的this并没有指向Vue实例，它获取的是window.item
ES6约定了一种新的函数定义方式，可以直接把函数名当作函数来声明。如下：
var obj = {
foo:function(){},
bar:function(){}
}
//ES6 methods definitions it becomes
var obj ={
foo(){},
bar(){}
}
我们用这种方式简写我们的saveItem方法，也不会出现this的继承问题
这也就是为什么在Vue中尽量用ES6的语法去写js
data相关
在Vue中的组件开发中，我们定义的data这个对象可以当作一个闭包return回来，官方文档的解释是：为了保证组件内部的状态独立，避免多个组件共用一个data
之前也说过，在data中也可以写成函数的形式
var sum = (a,b)=>{return a+b}//传统的块级结构，需要有return
var sum = (a,b)=>a+b;//简单结构 ---（为了代码规范，不建议用这种方式）
//如果返回一个值得时候，可以直接把值写上，但是如果返回得是一个对象字面量，就必须把你返回得对象用括号包起来返回。
②交互
在使用axios进行交互的时候，你返回函数中想用this.xxx进行赋值或调用方法，this.xxx或this.xxx() 有时也会报undedined的错误
解决方法：
var that=this;
axios.get('/list?now_page=4')
.then(function (res) {
that.listData=res.data
})
.catch(function (err) {
console.log(err);
});
2、父子组件传参
父组件给子组件的数据是异步获取的，子组件获取到数据后再渲染，在父组件传递数据之前，子组件先进行渲染时，子组件此时在 mounted 中打印数据是 undefined。
解决方法一：
给子组件加v-if，先不让它显示，等到数据获取后再显示。
解决方法二：
可以用vuex状态管理
3、图片路径
在开发中涉及到图片路径的切换，你会发现在一开始设置的时候，路径是可用的，但是在打包的时候，会报错，变成‘../../../a/b/c/image/bg.png’。出现这种问题的原因是在开发时和打包后的路径是不一样的，这时我们可以用require('相对路径')的方式解决
<img :src="imgUrl">
data(){
return {
imgUrl:require('../asserts/images/bg.png');
}
}
4、请求问题
XMLHttpRequest cannot load XXX. Response for preflight has invalid HTTP status code 405
出现这种问题是因为在post请求中，post的默认格式是request payload，而不是 form data。解决这个问题，我们只需要添加一个 headers 进行设置，如下。
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
5、template的问题
<template>
<div class="box1"></div>
<div class="box2"></div>
</template>
以上代码会报错如下：
template syntax error Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
解决方法：
在 template 下面只能有一个元素，你的其他元素都应该在这个元素中，如下面的代码。
<template>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</template>
6、开发中的指令使用（不做讲解，遇到自己查文档）
7、自定义指令
最容易被忽视的环节，大家把其他的掌握好后再去了解学习
8、组件开发（重点，需要不断实践，在实践中处理）
9、axios请求
请求的一般坑我就不说了，这些都是个人原因，这里讲解一种情况，如果你的后台进行了请求限制，也就是说限定了你只能用 post 或者 get 请求，这个时候你是用 axios.js 进行交互，你用的也是 post 或者 get，但是后台也出现了错误请求。
我在工作中发现的一种情况是，在页面交互过程中，axios 一定几率会发送两次请求，一次是自己设置的请求方式，还有一次是 options。
经过查找资料，得出以下结论。
跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（Preflight Request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。
也就是说，它会先使用 options 去测试，你这个接口是否能够正常通讯，如果不能就不会发送真正的请求过来，如果测试通讯正常，则开始正常请求。
关于这个问题，需要在后台进行设置，允许 options 请求，不然你的请求就会受到影响。后台作出判断，如果请求方式为 options，告诉它可以通讯，其它什么都不用做。