Vue-API

Vue.directive自定义指令

全局API

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

Vue.directive自定义指令

利用Vue.directive定义一些属于自己的指令

在这里，我们定义一个v-lcc的指令，作用就是让文字变成红色。再在自定义指令前我们写一个小功能，在页面上有一个数字为10，数字的下面有一个按钮，我们每点击一次按钮后，数字加1.

<body>
    <h1>vue-directive 实例</h1>
    <hr>
    <div id="app">
       <div v-lcc="color">{{num}}</div> 
       <button @click="add">ADD</button>
    </div>
<script type="text/javascript">
      Vue.directive("lcc",function(el,bingding){
      el.style="color:"+bingding.value;
    })
     var app=new Vue({
        el:'#app',
        data:{
           num:10,
           color:'red'
        },
        methods: {
            add:function(){
                this.num++;
            }
        },
    })
    </script>
</body>

自定义指令中传递的三个参数

el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。

vnode: Vue编译生成的虚拟节点。
可以利用console.log()命令打印出来查看。

Vue.directive("lcc",function(el,bingding){
    //   console.log(el);
    //   console.log(bingding);
    //   console.log(bingding.name);
    //   console.log(bingding.value);
    //   console.log(bingding.expression);
      el.style="color:"+bingding.value;
    })

自定义指令的生命周期
自定义指令有五个生命周期（也叫钩子函数)分别是bind,inserted,update,componentUpdated,unbind.

bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。

unbind:只调用一次，指令与元素解绑时调用。

bind:function(){//被绑定
     console.log('1 - bind');
},
inserted:function(){//绑定到节点
      console.log('2 - inserted');
},
update:function(){//组件更新
      console.log('3 - update');
},
componentUpdated:function(){//组件更新完成
      console.log('4 - componentUpdated');
},
unbind:function(){//解绑
      console.log('5 - unbind');
}

Vue.extend构造器的延伸

什么是Vue.extend？

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

自定义无参数标签

我们利用Vue.extend构造author标签。

<body>
    <h1>vue extend 构造器</h1>
    <hr>
    <author></author>//第一种用法，挂载到自定义标签上
    <div id="author"></div>//第二种用法，挂载到普通标签上
    <script type="text/javascript">
    var authorExtend=Vue.extend({
        template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",
        data:function()
        {
            return {
            authorName:'lcc',
            authorUrl:'https://liangcongcong.github.io'
            }
        }
    });
    //扩展实例构造器是需要挂载的，我们再进行一次挂载
    new authorExtend().$mount('author'); 
    new authorExtend().$mount('#author');
    </script>
</body>

Vue.set全局操作

Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要每次点击按钮给值加1.就需要用到Vue.set。

引用构造器外部数据
外部数据，就是不在Vue构造器里里的data处声明，而是在构造器外部声明，然后在data处引用就可以了。外部数据的加入让程序更加灵活，我们可以在外部获取任何想要的数据形式，然后让data引用。

//在构造器外部声明数据
 var outData={
    count:1,
    goodName:'car'
};
var app=new Vue({
    el:'#app',
    //引用外部数据
    data:outData
})

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

1、用Vue.set改变

function add(){ Vue.set(outData,'count',4); }

2、用Vue对象的方法添加

app.count++;

3、直接操作外部数据

outData.count++;

为什么要有Vue.set的存在?

由于Javascript的限制，Vue不能自动检测以下变动的数组。

当利用索引直接设置一个项时，vue不会自动更新。
当修改数组的长度时，vue不会自动更新。

<body>
    <h1>vue.set 实例</h1>
    <hr>
    <div id="app1">
        {{count}} 
    <ul>
     <li v-for="item in arr">{{item}}</li>
    </ul>
    </div>  
    <p><button onclick="add()">add</button></p>
    <script type="text/javascript">
    function add(){
      //Vue.set(outData,'count',2);
      //app.count++;
      //outData.count++;
      //app.arr[1]='dd';
      Vue.set(app.arr,1,'dd');
    }
    var outData={
        count:1,
        // goods:'car'
        arr:['aaa','bbb','ccc']
    }
    var app=new Vue({
        el:'#app1',
        data:outData
    })
    </script>
</body>

当我们利用app.arr[1]=’dd’，修改数组中的数据时，我们的界面是不会自动跟新数组的，我们需要用Vue.set(app.arr,1,’dd’)来设置改变，vue才会给我们自动更新，这就是Vue.set存在的意义。

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

<body>
    <h1>Vue的生命周期 实例</h1>
    <hr>
    <div id="app1">
        {{count}}
        <p><button @click="add">add</button></p>
    </div>
    <button onclick="app.$destroy()">销毁</button>
    <script type="text/javascript">
    var app=new Vue({
        el:'#app1',
        data:{
            count:1
        },
        methods: {
            add:function()
            {
                this.count++;
            }
        },
            beforeCreate:function(){
                console.log('1-beforeCreate 初始化之后');
            },
            created:function(){
                console.log('2-created 创建完成');
            },
            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-activated');
            },
            deactivated:function(){
                console.log('8-deactivated');
            },
            beforeDestroy:function(){
                console.log('9-beforeDestroy 销毁之前');
            },
            destroyed:function(){
                console.log('10-destroyed 销毁之后')
            }
    })
    </script>
</body>

Template 制作模版

一、直接写在选项里的模板

直接在构造器里的template选项后边编写。这种写法比较直观，但是如果模板html代码太多，不建议这么写。

javascript代码

var app=new Vue({
     el:'#app',
     data:{
         message:'hello Vue!'
      },
     template:`
        <h1 style="color:red">我是选项模板</h1>
     `
})

二、写在template标签里的模板

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

三、写在script标签里的模板

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

Vue.directive自定义指令

Vue.extend构造器的延伸

Vue.set全局操作

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

Template 制作模版

CATALOG

FEATURED TAGS

FRIENDS