Vue入门学习笔记3 vue全局API整理

这是学习vue的第三篇文章了，前面两篇分别介绍了vue入门和vue的内部指令，这篇将介绍vue的全局API
官方文档
 vue学习笔记1 Vue入门
 vue学习笔记2 Vue内部指令

1、全局API概览

API	描述
Vue.directive( id, [definition] )	自定义指令。用法，注册或获取全局指令。
Vue.extend( options )	拓展构造器。用法，使用基础 Vue 构造器，创建一个“子类”。
Vue.set( target, propertyName/index, value )	全局操作。用法，向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。
template	模板，自定义模板。
Vue.component( id, [definition] )	组件。用法，注册或获取全局组件。

Tip：更多API详情可以去官方文档查看

2、详情

2.1 Vue.directive( id, [definition] )

描述：
该API用于自定义指令，例如下面这个例子，我们自定义了一个叫“ruihe”的指令，这个指令绑定了一个color属性，用于改变字体的颜色。代码如下：
参数：

id 自定义指令的名称。
[definition] 这个参数应该是个对象，里面自定义了具体是业务逻辑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.directive 自定义指令 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>Vue.directive 自定义指令 实例</h1>
    <hr>
    <div id="app">
        <div v-ruihe="color">{{num}}</div>
        <button @click="add">Add</button>
    </div>
    <p>
        <button onclick="unbind()">解绑</button>
    </p>
    <script type="text/javascript">
        function unbind(){
            app.$destroy();
        }

        // 最简单的定义
        // Vue.directive("ruihe",function(el,binding){
        //     //el定位到具体的元素位置
        //     // console.log(el);
        //     //binding是一个对象，包含一些标签的信息
        //     // console.log(binding)
        //     el.style="color:"+binding.value;
        // });
        
        //标准的定义方法，内含具体的生命周期
        Vue.directive("ruihe",{
            bind:function(el,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 - unbind');
            }
        });
        
        var app = new Vue({
            el:"#app",
            data:{
                num:10,
                color:'red'
            },
            methods:{
                add:function(){
                    this.num++
                }
            }
        })
    </script>
</body>
</html>

Tip：这里面还涉及到了自定义指令的两种方法，分别是简单自定义指令的方法以及标准的写法。其中标准的写法中涉及到了指令生命周期，例子里注释已经写的很清楚了，不再描述。

2.2 Vue.extend( options )

描述：
该API是在vue的构造器的基础上拓展vue的构造器，以满足用户的所有个性需求。例子如下：

参数：

options 选项或称之为对象，是具体的业务逻辑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.extend 拓展实例构造器 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>vue.extend 拓展实例构造器 实例</h1>
    <hr>
    <!-- 直接通过元素标签进行绑定 -->
    <author></author>
    <!-- 通过元素ID进行绑定,开发时建议使用这种,可读性高 -->
    <div id="author"></div>
    <script type="text/javascript">
        var authorURL = Vue.extend({
            // 自定义一个组件模板
            template:"<p><a :href='authorURL'>{{authorName}}</a></p>",
            data:function(){
                return{
                    authorName:"panruihe",
                    authorURL:"http://fivewalking.xyz/"
                }
            }
        });

        // 相当于实例化对象
        new authorURL().$mount("author");
        new authorURL().$mount("#author")
    </script>
</body>
</html>

2.3 Vue.set( target, propertyName/index, value )
说明：
将数据进行全局操作。其存在的意义之一是：javascript限制没法改变数组下标或长度，此时Vue.set（）就能发挥作用解决这类问题。即，vue没办法监听到数组下标的改变

参数：

target 要操作的目标，以下面例子为例，我们要操作vue构造器中的arr数组，因此我们可以app.arr定位到这个目标
propertyName/index 要改变的属性名或下标。例如，我们下面这个例子，我们要操作（改变）arr数组里下标为1的元素，因此我们直接写下标即可。
value 要传入的新值。例如，下面这个例子，我们把下标为1的值原本是“bbb”改变成“dd”。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.set 全局操作 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>vue.set 全局操作 实例</h1>
    <hr>
    <div id="app">
        {{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++;
            /*
            javascript限制没发改变数组下标或长度，此时Vue.set（）就能发挥作用解决这类问题
            即，vue没办法监听到数组下标的改变
            */
            // app.arr[1]='ddd';
            /*通过Vue.set()能监听到数组的下标改变*/
            Vue.set(app.arr,1,'dd');
        }
        var outData={
            count:1,
            goods:'car',
            arr:['aaa','bbb','ccc']
        }
        var app = new Vue({
            el:"#app",
            data:outData
        })
    </script>
</body>
</html>

2.4 template 自定义模板

这个在官方的全局API部分里没有介绍，所以我不懂它算不算一个全局API，但是用的非常频繁，与组件类似。template 模板有三种形式，分别是选项模板、template选项模板、script标签模板。请看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template 模板 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>3种 Template 模板制作方法 实例</h1>
    <hr>
    <div id="app">
        {{mes}}
    </div>
    <!-- 
        2.1 template选项模板
        使用模板复杂度中等的制作 
    -->
    <template id="dd2">
        <h1 style="color:red;">我是template标签模板</h1>
    </template>

    <!-- 
        3.1 script标签模板
        适合复杂度高的制作
        可以用src引入外部模板，使页面更简洁
     -->
    <script type="x-template" id="dd3">
        <h1 style="color:red;">我是script标签模板</h1>
    </script>

    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                mes :'hell world!'
            },
            // 1 选项模板
            // 适合简单模板的制作
            // template:`
            //     <h1 style="color:red;">我是template选项模板</h1>
            // `

            // 2.2
            // template:`#dd2`

            // 3.2
            template:`#dd3`
        })
    </script>
</body>
</html>

2.5 component 组件
组件（component ）跟模板（template）类似，都是封装了一些功能或样式。这样能够实现代码的低耦合、开发效率也会大大提高，尤其在那种大公司搞大项目时优势非常明显。
直接上例子吧，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>component组件 实例3</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>component组件 实例3（component标签）</h1>
    <hr>
    <div id="app">
        <!-- 
            componten标签是vue定义的一个标签
            能够动态的根据data的值选择组件 
        -->
        <componten :is="who"></componten>
        <button @click="changeComponten()">changeComponten</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'
            },
            components:{
                "componentA":componentA,
                "componentB":componentB,
                "componentC":componentC
            },
            methods:{
                changeComponten:function(){
                    if(this.who=="componentA"){
                        this.who="componentB";
                    }else if(this.who=="componentB"){
                        this.who="componentC";
                    }else{
                        this.who="componentA"
                    }
                }
            }
        })
    </script>
</body>
</html>

下面我们分步说明一下这个组件吧，因为这个比模板用的还频繁，可以说现实开发中你几乎无时无刻在改组件、写组件。因此，组件非常重要、非常重要、非常重要

局部组件与全局组件
局部组件，写在vue构造器内，只要指定的对象才能使用。超出作用域则无效。
全局组件，写在vue构造器之外，整个页面的对象都能使用。
例子：

	<div id="app">
        <!-- 使用组件 -->
        <ruihe></ruihe>
        <pan></pan>
    </div>
    <!-- app对象和aqq对象均能使用全局的ruihe组件 -->
    <!-- <div id="aqq">
        <ruihe></ruihe>
    </div> -->
    <script type="text/javascript">
        // 1  全局组件 
        // 写在构造器外，该页面内的所以对象都能适用
        // 组件里可以写template模板也可以写各种数据
        Vue.component('ruihe',{
            template:`<div style="color:red;">我是全局的ruihe组件</div>`
        })
        var app = new Vue({
            el:"#app",
            // 2 局部组件
            components:{
                "pan":{
                    template:`<div style="color:green;">我是局部的pan组件</div>`
                }
            }
        })
        // 1.2
        // var app = new Vue({
        //     el:"#aqq",
        // })
    </script>

父子关系组件
简单一句话描述就是——在构造器外声明局部组件。
这样当我们要写复杂或者组件多的时候我们可以把组件声明在vue构造器外，这样代码就美观了很多，关键是可读性高以及安全性也得到了提高。
例子如下：

	<div id="app">
        <pan></pan>
    </div>
    <script type="text/javascript">
        // 在构造器外边声明局部组件

        // 父组件
        var city ={
            template:`<div style="color:green;">siChuan of China!</div>`
        }
        // 子组件
        var panComponent = {
            template:`
            <div>
                <p style="color:red;">pan from China!</p>
               <!-- 使用父组件 -->
                <city></city>
            </div>
            `,
            components:{
                "city":city
            }
        }

        var app = new Vue({
            el:"#app",
            // 创建组件
            components:{
                "pan":panComponent
            }
        })
    </script>

components标签
该标签的存在是为了动态的使用组件，通过data中的值动态的选择组件。
例子如下：

	<div id="app">
        <!-- 
            componten标签是vue定义的一个标签
            能够动态的根据data的值选择组件 
        -->
        <componten :is="who"></componten>
        <button @click="changeComponten()">changeComponten</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'
            },
            components:{
                "componentA":componentA,
                "componentB":componentB,
                "componentC":componentC
            },
            methods:{
                changeComponten:function(){
                    if(this.who=="componentA"){
                        this.who="componentB";
                    }else if(this.who=="componentB"){
                        this.who="componentC";
                    }else{
                        this.who="componentA"
                    }
                }
            }
        })
    </script>

Tip：其实还有一个非常重要的一个API，那就是钩子函数，也就是vue生命周期的节点函数，由于文章太长了就在下一篇中写吧。

Vue入门学习笔记3 vue全局API整理

Vue入门学习笔记3 vue全局API整理

猜你喜欢