Vue2.0代码入门篇之全局API的学习笔记

最新推荐文章于 2024-01-09 17:35:32 发布

Arabic1666

最新推荐文章于 2024-01-09 17:35:32 发布

阅读量271

点赞数

分类专栏： JavaScript Vue系列文章标签： Vue JavaScript 全局API

本文链接：https://blog.csdn.net/Arabic1666/article/details/80213396

版权

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Vue系列

3 篇文章 0 订阅

订阅专栏

代码理解：

HTML buf

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>helloVue全局API</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <!-- 自定义指令加分变色 -->
    <div id="app">
        <p v-text="cnt"></p>
        <!-- 绑定动作click  而非onclick事件 -->
        <!-- 自定义指令 会自动转为小写(HTML不区分大小写)    callobj -->
        <button @click="addCount" v-callObj="color"> Add </button>
        <button οnclick="unbind()"> UNBind </button>
        <hr>
        <p v-callfunc="color"> 自定义指令 </p>
        <hr>
        <p> {{itemCnt}} </p>
        <p>{{arr}}</p>
        <button οnclick="setCnt()" > Set </button>
    </div>
    <hr>
    <!-- 自定义标签 挂载组件-->
    <author id="vueMount"></author>
</body>
</html>

JavaScriptb buf

<script type="text/javascript">
    // Vue.directive自定义指令(小写 对应html规则)  eg:callobj 全局
    //该指令定义对象有如下5个可选钩子函数   对应生命周期说明如下
    Vue.directive("callobj", {
        bind: function (){           //只调用一次，指令第一次绑定到元素时调用
            this.value = "blue";
            console.log('1 - bind');
        },
        inserted: function (){       //被绑定元素插入父节点时调用 
            console.log('2 - inserted');
        },
        update: (el, binding)=>{ //组件更新时调用 (data修改即触发)
            console.log('3 - update');
            console.log(el.previousElementSibling); 
            el.previousElementSibling.style.color = binding.value;
        },
        componentUpdated: (e)=>{  //组件更新完成时调用
            console.log('4 - componentUpdated');
            setTimeout(() => {
                e.previousElementSibling.style.color = ""; 
                console.log("delay 500ms");
            }, 500);
        },
        unbind: ()=>{//解绑时调用
            console.log('5 - unbind');
        }
    });
    // 函数(对象)简写式    只关心 bind 和 update 时触发相同行为
    // el即指令绑定标签
    // binding为对象
    // binding.name:指令名(除去v-) binding.value:绑定值("计算"后)   binding.expression：表达式
    Vue.directive("callfunc", function (el, binding) {
        console.log(el);                    // <p style="color: red;">asssa</p>
        console.log(binding.value);         // red
        console.log(binding.name);          // callFunc
        console.log(binding.expression);    // color
        el.style.color=binding.value;
    });
    //构造器外部定义数据  可直接使用数据
    var outerData = {
        cnt: 0,
        color: 'red',
        item: 'book',
        itemCnt: 11, 
        arr: ["aaa", "bbb", "ddd"],
    }
    function setCnt() {
        // Vue.set() 与 Vue.delete()对应使用    外部修改数据
        //parm1：对象或者数组
        //parm2: key
        //parm3: value
        // 数据数组
        // Vue.delete(outerData.arr, 0);
        Vue.set(outerData.arr, 1, 'EEE');
        //失败(单独调用下面这条语句的情况下?)  
        //原因：Vue不能检测 通过下标更新设置数组&修改数组长度
        //outerData.arr[1] = 'eee'; 
        
        // 数据对象 以下三种均可设置    不能使用this.data 伪变量
        // Vue.set(outerData, 'itemCnt', 2); 
         app.itemCnt++;
        // outerData.itemCnt++;
    }
    var app = new Vue({
        el:'#app',
        data:  outerData,   //外部数据 引用
        methods: {
            addCount:function(){
                this.cnt++;
            }
        },
        beforeCreate:function(){
            console.log('1-beforeCreate 初始化之前');
        },
        created:function(){
            console.log('2-created 创建完成');
        },
        beforeMount:function(){
            console.log('3-beforeMount 挂载之前');
        },
        mounted:function(){ //先于update
            console.log('4-mounted 被创建挂载');
        },
        beforeUpdate:function(){//慢于componentUpdated
            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 销毁之后')
        }
    });
    // 销毁Vue对象
    // $destroy:完全销毁一个实例。清理与其它实例的连接，解绑它的全部指令及事件监听器。 
    // 并不会清除已渲染在页面上的DOM
    function unbind() {
        app.$destroy();
        //而且还能继续输出此对象定义的数据  
        console.log("destroyed:" + app.color);
    }

    // Vue.extend() 扩展使用Vue实例构造器  参数必须是：一个包含组件选项的对象
    // 服务于组件component 用于对组件的扩展 
    // 当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂载到自定义元素上。
    var authorExtend = Vue.extend({
        template: ` <p><a :href='authorURL' v-text='authorName'></a></p> `,
        data: function () {  
            return {
                authorName: "Arabic1666",
                authorURL: "https://blog.csdn.net/Arabic1666",
            }
        },
    });
    // 手动挂载到标签、类、id上面   挂载点标签相当于new Vue()中的 el
    new authorExtend().$mount('#vueMount');
</script>