(第二季)Vue2.0-全局API

作者: 郭少华 | 来源:发表于2018-01-29 14:00 被阅读114次

全局API介绍

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

Vue.directive 自定义指令

<div id="app">
        <div v-guosh="color">{{message}}</div>
        <p><button @click="add">ADD</button></p>
        <p><button onclick="unbind()">解绑</button></p>
    </div>
    <script type="text/javascript">
        function unbind(){
            app.$destroy(); //解除绑定
        }
        Vue.directive("guosh",{
            //el指令所绑定的元素，可以用来直接操作 DOM
            //binding 一个对象 
            bind:function(el,binding){//被绑定
                console.log(binding);
                console.log('1 - bind');
                el.style="color:"+binding.value;
            },
            inserted:function(){//绑定到节点
                console.log('2 - inserted');
            },
            update:function(){//组件更新
                console.log('3 - update');
            },
            componentUpdated:function(){//组件更新完成
                console.log('4 - componentUpdated');
            },
            unbind:function(){//解绑
                console.log('5 - bind');
            }

        });
        
        var app =  new Vue({
            el:'#app',
            data:{
                message:1,
                color:'green'
            },
            methods: {
                add:function(){
                    this.message++;
                }
            }
        })
    
    </script>

钩子函数

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

钩子函数参数

el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
- name：指令名，不包括 v- 前缀例如：guosh。
- value：指令的绑定值，例如：v-guosh="color" 中，绑定值为 green。
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式。例如 v-guosh="color" 中，表达式为 "color"。
- arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
- modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

Vue.extend构造器的延伸

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

 <div id="author"></div>
    <script type="text/javascript">
        var authorURL = Vue.extend({
            template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",
            data:function(){
                return{
                    authorName:'guosh',
                    authorUrl:'http://guoshaohua.cn'
                }
            }
        });
        //创建 authorUR 实例，并挂载到一个元素上
        new authorURL().$mount("#author");
    </script>

Vue.set全局操作

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

    <div id="app">
        {{count}}
        <ul>
            <li v-for="item in arr">
                {{item}}
            </li>
        </ul>
    </div>
    <button onclick="add();">add</button>
    <script type="text/javascript">
        function add(){
            Vue.set(app,'count',2);
            //把arr下标1的值改成dddd
            Vue.set(app.arr,1,'dddd');
        }
        var outData={
            count:1,
            arr:['aaa','bbb','ccc']
        }
        
        var app = new Vue({
            el:'#app',
            //引用外部数据
            data:outData
        })
    </script>

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

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

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

<div id="app">
        <ul>
            <li v-for=" aa in arr">{{aa}}</li>
        </ul>
       
    </div>
    <button onclick="add()">外部添加</button>
 
    <script type="text/javascript">
     
        function add(){
            console.log("我已经执行了");
           app.arr[1]='ddd';
           //Vue.set(app.arr,1,'ddd');
        }
        var outData={
            arr:['aaa','bbb','ccc']
        };
        var app=new Vue({
            el:'#app',
            data:outData
        })
    </script>

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

Vue的生命周期(钩子函数)

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

<div id="app">
        {{count}}
        <p><button @click="add">add</button></p> 
    </div>
    <button onclick="app.$destroy()">销毁</button>
    <script type="text/javascript">
        var app =  new Vue({
            el:"#app",
            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>

生命周期展示图.png

Template 制作模版

直接写在选项里的模板

    <div id="app">
        {{message}}
    </div>

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

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

写在<template>标签里的模板

这种写法更像是在写HTML代码，就算不会写Vue的人，也可以制作页面

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

写在<script>标签里的模板

这种写模板的方法，可以让模板文件从外部引入。

<div id="app">
        {{message}}
    </div>
    <script  type="x-template" id="add3">
            <h1 style="color:red">我script模板</h1>
    </script>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                message:'hello world'
            },
            template:"#add3"
        })
    </script>

Component 初识组件

什么是组件？

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

全局注册组件

    <div id="app">
        <guosh></guosh>
    </div>
    
    <script type="text/javascript">
        Vue.component("guosh",{
            template:`<div style="color:red">我是全局组件</div>`
        })

        var app = new Vue({
            el:"#app"
        })
    </script>

我们在javascript里注册了一个组件，在HTML中调用了他。这就是最简单的一个组件的编写方法，并且它可以放到多个构造器的作用域里。

局部注册组件

局部注册组件和全局注册组件是向对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。

    <div id="app">
        <guo></guo>
    </div>
    
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            //定义局部组件
            components: {
                "guo":{
                    template:"<div style='color:red'>我是局部组件</div>"
                }
            }
        })
    </script>

从代码中你可以看出局部注册其实就是写在构造器里，但是你需要注意的是，构造器里的components 是加s的，而全局注册是不加s的。

Component-props属性设置

定义属性并获取属性值

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

    <div id="app">
        <guo here="China"></guo>
    </div>
    
    <script type="text/javascript">

        var app = new Vue({
            el:"#app"
            //定义局部组件
            components: {
                "guo":{
                    template:"<div style='color:red'>属性值{{here}}</div>",
                    props: ['here']
                }
            }
        })
    </script>

属性种带'-'的处理方式

我们在写属性时经常会加入’-‘来进行分词，比如：<guo from-here=”China”></guo>，那这时我们在props里如果写成props:[‘form-here’]是错误的，我们必须用小驼峰式写法props:[‘formHere’]。

    <div id="app">
        <guo fom-here="fomChina" ></guo>
    </div>
    
    <script type="text/javascript">

        var app = new Vue({
            el:"#app",
            data:{
                message:'hello'
            },
            //定义局部组件
            components: {
                "guo":{
                    template:"<div style='color:red'>属性值{{fomHere}} </div>",
                    props: ['fomHere']
                }
            }
        })
    </script>

在构造器里向组件中传值

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

     <div id="app">
        <guo:heres="message"></guo>
    </div>
    
    <script type="text/javascript">

        var app = new Vue({
            el:"#app",
            data:{
                message:'hello'
            },
            //定义局部组件
            components: {
                "guo":{
                    template:"<div style='color:red'>属性值 {{heres}}</div>",
                    props: ['heres']
                }
            }
        })
    </script>

Component 父子组件关系

 //必须把子组件放到上面按顺序执行否则会找到不子组件
        //子组件
        var city={
            template:`<div style='color:green'>我是子组件</div>`
        }
        //父组件
        var guoComponent={
            template:`<div style='color:red'>我是父组件<city></city></div>`,
            components: {
                "city":city
            }
        }
        var app = new Vue({
            el:"#app",
            //定义局部组件
            components: {
                "guo":guoComponent
            }
        })
    </script>

Component 标签

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

 <div id="app">
        <!--可以动态的使用下面定义的组件-->
        <component :is="who"></component>
        <button @click="changeComponent">更换</button>
    </div>
    
    <script type="text/javascript">
        var componentA={
            template:`<div style='color:red'>I'm componentA</div>`
        }
        var componentB={
            template:`<div style='color:green'>I'm componentB</div>`
        }

        var componentC={
            template:`<div style='color:pink'>I'm componentC</div>`
        }
        

        var app = new Vue({
            el:"#app",
            data:{
               who:"componentA" 
            },
            methods:{
                "changeComponent":function(){
                    if(this.who=="componentA"){
                        this.who="componentB";
                    }
                    else if(this.who=="componentB"){
                        this.who="componentC";
                    }
                    else{
                        this.who="componentA"; 
                    }

                }
            },
            components: {
                "componentA":componentA,
                "componentB":componentB,
                "componentC":componentC
            }
        })
    </script>