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

最新推荐文章于 2023-12-25 19:49:36 发布

VIP文章会左勾拳的螳螂

最新推荐文章于 2023-12-25 19:49:36 发布

阅读量1.7k

点赞数 3

分类专栏： vue.js 文章标签： vue

本文链接：https://blog.csdn.net/RuiHe_pan/article/details/106182654

版权

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:

最低0.47元/天解锁文章

会左勾拳的螳螂

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue入门学习笔记3 vue全局API整理

几个必须会的最常用的全局API【Vue.directive( id, [definition] )、Vue.extend( options )、Vue.set( target, propertyName/index, value )、template 模板、Vue.component( id, [definition] ) 组件】详解。其中例子可以做入门模板使用。
复制链接

扫一扫