Vue培训项目总结

　　　　昨天是最后一次给同事进行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，告诉它可以通讯，其它什么都不用做。