vue组件以及创建的使用使用总结小知识点

以下小部分步骤：

1.创建组件模板

2.引入vue，使用vue全局Vue.extend(模板) 方法构建vue子类

3.导出一个函数幂函数中返回通过new 子类（）；vue实例

4.传入参数使用组件：

弹窗组件的创建于使用

1.创建模板文件index.vue导出包含模板的对象：

<templte>
<div id="app" :class="flag ? 'fade-in' :'fade-out'" v-if="show">
<div id="content" :class="_class">{{_type}} {{}msg}</div>

</div>
</templte>
<script>
export default {};
</script>

2,在文件index.js中导入vue和index.js文件，并使用vue.extend（组件选项的对象） 全局Vue构造器方法，创建子类：

    import Vue from "Vue";
    import toast from "./index.vue"

      const Toast =Vue.extend(toast);

3.引用之前创建好的组件。

 4.调用，传入一个对象作为参数：

      this.$tip(res);

什么是组件？

组件（component）是Vue.js最强的功能之一，组件是自定义元素，Vue.js的编译器为他添加特殊功能

1.Vue.compontent

Vue.compontent(“组件的名称”，创建出来的组件模板对象)注册组件

2.组件内部：

1.进入前：（特别强调，没有this）

                  

beforeRouteEnter(to,from,next){}

2.跟新前：

   

    beforeRouteUpdate(to,from,next){}
                                                                                                                 
       produce/abc=>produce/123

3.离开前：

  beforeRouteLeave(to,from,next){}

三，解决跨域问题

1.什么是跨域？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

2.怎末解决跨域？

1、JSONP：

通过jsonp来获取get请求，但不支持post请求

3.浏览器同源策略：

  要求请求的地址与当前地址必须同源
                                                                                                     https://m.mi.com/v1/home/page",'client_id=180100031051&channel_id=&webp=1&page_type=home'