vue全局配置axios vue的全局api

什么是全局api 

全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，比如我们今天要学习的指令Vue.directive。说的简单些就是，在构造器外部用Vue提供给我们的API函数来定义新的功能。

什么是Vue.extend？

Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂载到自定义元素上。

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

定义一个标签

<sjd id="sjdw"></sjd>

vue.扩展实例构造器

var authorExtend= Vue.extend({
   template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",         //地址必须是绑定事件
   data:function(){
   return {
   authorName:'sjd',
   authorUrl:"http://www.sjd1118.icoc.cc"
      }
     }
    });
                    //挂载到标签上
                      new authorExtend().$mount(‘sjd');    //也可以是class id

在外部改变数据的三种方法：

<div id="app">
     <ul>
      <li v-for=" aa in arr">{{aa}}</li>
    </ul>
    </div>//在构造器外部声明数据
 var outData={
            arr:['aaa','bbb','ccc']
        };//构造器实例化
 var app=new Vue({
     el:'#app',
     data:outData         //引用外部数据
        })

1.用Vue.set改变function add(){vue.set(app.arr, 1,'fff');}   //把bbb变成ffff

2.      app.count++;

3.     outData++;

为什么要有Vue.set的存在？由于JavaScript的限制，Vue不能自动检测以下变动的数组当你利用索引直接设置一个项时，vue不会为我们自动更新。当你修改数组的长度时，vue不会为我们自动更新这时我们的界面是不会自动更新数组的，我们需要用Vue.set(app.arr,1,'ddd') 来设置改变，vue才会给我们自动更新，这就是Vue.set存在的意义。

Vue的生命周期（钩子函数）

Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。

beforeCreate:function(){
                console.log('1-beforeCreate 创建化之前');
            },
            created:function(){
                console.log('2-created 创建完成');  //常用 于加载动画   如loading
            },
            beforeMount:function(){
                console.log('3-beforeMount 挂载之前');
            },
            mounted:function(){
                console.log('4-mounted 被创建被挂在之后');  //常用  结束动画显示正常应用
            },
            beforeUpdate:function(){
                console.log('5-beforeUpdate 数据更新前');
            },
            updated:function(){
                console.log('6-updated 被更新后');
            },
            activated:function(){
                console.log('7-激活后');
            },
            deactivated:function(){
                console.log('8-解散后');
            },
            beforeDestroy:function(){
                console.log('9-beforeDestroy 销毁之前');
            },
            destroyed:function(){
                console.log('10-destroyed 销毁之后')
            }

Template 制作模版

1、在构造器里面直接建模版template:`我是选项模板`         这种写法比较直观，但是如果模板html代码太多，不建议这么写。

var app=new Vue({
   el:'#app',
    data:{
             message:'hello Vue!'
       },
    template:`<h1 style="color:red">我是选项模板</h1>`     //这个点是是ESC下面的那个键上
})

2.在标签里面建模版

<template id="demo2">
             <h2 style="color:red">我是template标签模板</h2>
    </template>    <script type="text/javascript">
   var app=new Vue({
   el:'#app',
    data:{
          message:'hello Vue!'
    },
   template:'#demo2'
        })
    </script>

3.使用script标签写模板，可以外部引入    注意：type:x-template  一定是这个       id

<script type="x-template" id="demo3">
        <h2 style="color:red">我是script标签模板</h2>
    </script>    <script type="text/javascript">
        var app=new Vue({
         el:'#app',
     data:{
           message:'hello Vue!'
     },
      template:'#demo3'
   })
    </script>

Component 组件自定义组件

其实组件就是制作自定义的标签，这些标签在HTML中是没有的

<div id="app">
    <sjd></sjd>
</div>
 <script type="text/javascript">
        //注册全局组件          适用于所以 所有的Vue实力
        Vue.component('jspang',{
      template:`<div style="color:red;">全局化注册的jspang标签</div>`
     })
        var app=new Vue({
          el:'#app',
       data:(}
        })
    </script>//局部注册         只使用与#app 的div 里
<script type="text/javascript">
   var app=new Vue({
    el:'#app',
     components:{
     "js":{
     template:`<div style="color:red;">局部注册的panda标签</div>`
   }
  }
        })

组件和指令的区别

组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中我们还是用组件比较多，指令用的比较少。因为指令看起来封装的没那么好，个人观点。

 

Component 组件props 属性设置

props选项就是设置和获取标签上的属性值的，

上面的代码定义了panda的组件，并用props设置了here的属性值，在here属性值里传递了China给组件。

最后输出的结果是红色字体的Panda from China.

属性时经常会加入’-‘来进行分词，比如：<panda   from-here=”China”></panda>      我们必须用小驼峰式写法props:[‘formHere’]。 因为这里有坑，所以还是少用-为好。

var app=new Vue({
   el:'#app',
   components:{
   "panda":{
    template:`<div style="color:red;">Panda from {{ here }}.</div>`,
    props:['fromHere']
   }
  }
        })

把构造器中data的值传递给组件，我们只要进行绑定就可以了。就是我们第一季学的v-bind:xxx.

<panda v-bind:here="message"></panda>

Component 父子组件关系

构造器外部写局部注册组件

先声明一个对象：panda ,对象里就是组件的内容。

声明好对象后在构造器里引用就可以了。

父子组件的嵌套

Component 标签

 <component></component>标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。

 

在这明明可以靠脸吃饭的年代，却不要脸的去卖弄自己的才华。。。