Vue培训项目总结

　　　　昨天是最后一次给同事进行Vue的培训，此次培训主要是以基础入门为主。

　　　　整篇讲义参考了一些文章：https://gitbook.cn/gitchat/column/5a4af1c5658b7c0d9ebe1131/topic/5a4dfdddbb7105032b4fa06b

　　　　　　　　　　　　　　　　https://blog.csdn.net/insistlzh/article/details/79381796

　　　　在学习任何一种语言或者框架的时候，学到的知识，要会把它用出来才能变成本身的经验。你们本身平时学习的时候也要学会总结。此次，从总体说一下Vue常见的坑。　　　　

　　  1、Vue.js

　　　　我认为Vue.js是一个数据驱动的渐进式的框架，双向数据绑定，经过指令的方式实现不少功能，组件式开发。

　　　　通常的项目中，只要不涉及到特殊的页面效果，均可以采用数据驱动页面的方法，包括页面间各类展现效果，经过CSS属性和Vue.js的指令配合就能够解决大部分的问题了。因此，你们在用这个框架的时候，要记住：数据驱动页面，用数据控制你的页面。

　　　　

　　2、Vue常见的坑

　　　　一、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);
 });

　　二、父子组件传参

　　　　父组件给子组件的数据是异步获取的，子组件获取到数据后再渲染，在父组件传递数据以前，子组件先进行渲染时，子组件此时在 mounted 中打印数据是 undefined。

　　　　解决方法一：

　　　　　　给子组件加v-if，先不让它显示，等到数据获取后再显示。

　　　　解决方法二：

　　　　　　能够用vuex状态管理 

　　三、图片路径

　　　　在开发中涉及到图片路径的切换，你会发如今一开始设置的时候，路径是可用的，可是在打包的时候，会报错，变成‘../../../a/b/c/image/bg.png’。出现这种问题的缘由是在开发时和打包后的路径是不同的，这时咱们能够用require('相对路径')的方式解决　　

<img :src="imgUrl">

data(){
    return {
       imgUrl:require('../asserts/images/bg.png'); 
    }
}

　　四、请求问题

　　　　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'}

　　五、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>

　　六、开发中的指令使用（不作讲解，遇到本身查文档）

　　七、自定义指令

　　　　最容易被忽视的环节，你们把其余的掌握好后再去了解学习

　　八、组件开发（重点，须要不断实践，在实践中处理）

　　九、axios请求

　　　　请求的通常坑我就不说了，这些都是我的缘由，这里讲解一种状况，若是你的后台进行了请求限制，也就是说限定了你只能用 post 或者 get 请求，这个时候你是用 axios.js 进行交互，你用的也是 post 或者 get，可是后台也出现了错误请求。

　　我在工做中发现的一种状况是，在页面交互过程当中，axios 必定概率会发送两次请求，一次是本身设置的请求方式，还有一次是 options。

 

　　通过查找资料，得出如下结论。

 

　　　　跨域资源共享标准新增了一组 HTTP 首部字段，容许服务器声明哪些源站有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生反作用的 HTTP 请求方法（特别是 GET 之外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（Preflight Request），从而获知服务端是否容许该跨域请求。服务器确认容许以后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也能够通知客户端，是否须要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。

也就是说，它会先使用 options 去测试，你这个接口是否可以正常通信，若是不能就不会发送真正的请求过来，若是测试通信正常，则开始正常请求。

关于这个问题，须要在后台进行设置，容许 options 请求，否则你的请求就会受到影响。后台做出判断，若是请求方式为 options，告诉它能够通信，其它什么都不用作。