Vue学习随笔(二)

最新推荐文章于 2025-04-03 17:08:16 发布

冰_戒

最新推荐文章于 2025-04-03 17:08:16 发布

阅读量189

点赞数

CC 4.0 BY-SA版权

文章标签： Vue

本文链接：https://blog.youkuaiyun.com/huang_yong_peng/article/details/82833502

本文深入探讨Vue.js的全局API，包括自定义指令的实现与生命周期，以及如何使用Vue.extend构造器创建组件。通过示例代码，详细解析了自定义指令的绑定、插入、更新、组件更新和解绑阶段，同时展示了如何利用Vue.extend生成组件实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全局API

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

Vue.directive自定义指令

<body>
{% verbatim %}
<div id="app">
  <div v-huang="color">{{ num }}</div>
    <p><button @click="add">ADD</button></p>
</div>

{% endverbatim %}
</body>
<script>
    Vue.directive('huang',function (el,binding) {
        //<div v-huang="color"></div>这个标签
        console.log(el);
        //obj={name: "huang", rawName: "v-huang", value: "red", expression: "color", modifiers: {…}, …}
        console.log(binding);
        //huang
        console.log(binding.name);
        //red
        console.log(binding.value);
        //color
        console.log(binding.expression);
        el.style = 'color:'+binding.value;
    });
    new Vue({
  el: '#app',
  data: {
	num:10,
    color:'red'
  },
    methods:{
      add:function () {
          this.num++;
      }
    }
});
</script>

自定义指令的生命周期

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

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

<body>
{% verbatim %}
<div id="app">
  <div v-huang="color">{{ num }}</div>
    <p><button @click="add">ADD</button></p>
</div>
<p>
    <button onclick="unbind()">解绑</button>
</p>
{% endverbatim %}
</body>
<script>
    function unbind(){
        app.$destroy();
    }
    Vue.directive('huang',{
        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');
        }
    });
    new Vue({
  el: '#app',
  data: {
	num:10,
    color:'red'
  },
    methods:{
      add:function () {
          this.num++;
      }
    }
});
</script>

Vue.extend构造器的延伸

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

<body>
{% verbatim %}

    <div id="author"></div>
{% endverbatim %}
</body>
<script>
    var authorExtend = Vue.extend({
        template:"<p><a :href='authorURL'>{{ authorName }}</a></p>",
        data:function () {
            return{
                authorName:'huangyongpeng',
                authorURL:'http://www.baidu.com'
            }
        }
    });
    new authorExtend().$mount('#author');

</script>