Vue全局API总结

最新推荐文章于 2024-05-17 13:52:13 发布
最新推荐文章于 2024-05-17 13:52:13 发布
阅读量225 收藏 3
点赞数 1
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/douyaer/p/7650140.html
版权

1.extend用于创建一个子类Vue,用$mount来挂载

<body>
<div id="app"></div>
<script>
    const app=Vue.extend({
        template:'<p>{{a}} {{b}} {{c}}</p>',
        data:function(){
            return {
                a:'Welcome',
                b:"To",
                c:"BeiJing"
            }
        }
    });
    new app().$mount("#app")

</script>
</body>

2.Vue.nextTick([callback,context])在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/Vue/vue.development.js"></script>
</head>
<body>
<div id="app">
    <button @click="getTag">获取标签内容</button>
    <h1>{{message}}</h1>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"我爱北京天安门"
        },
        methods:{
            getTag:function(){
               this.message='我爱我家';
                console.log(document.querySelector('h1').innerHTML)
                
            }
        }
    });

</script>
</body>
</html>

 结果如下：

我们可以看到视图更新以后拿到的并不是更新后的innerHTML，因为dom结构更新是一个异步事件

再看下面的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/Vue/vue.development.js"></script>
</head>
<body>
<div id="app">
    <button @click="getTag">获取标签内容</button>
    <h1>{{message}}</h1>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"我爱北京天安门"
        },
        methods:{
            getTag:function(){
               this.message='我爱我家';
               this.$nextTick(function(){
                   console.log(document.querySelector('h1').innerHTML)
               })

            }
        }
    });

</script>
</body>
</html>

我们可以看到它会等dom结构更新完成后再去获取更新后的innerHTML值

3.Vue.set(target,key,value)普通的情况下对Vue实例里面的数据进行更改，数据改掉了，但是呈现在页面的视图并没有发生变化，所以借用该方法视图也会跟着刷新

普通方式视图并没有刷新

<body>
<div id="app"></div>
<script>
   var app=new Vue({
       el:"#app",
       data:{
           arr:['北京','上海','天津','重庆']
       }
   });
    app.arr[0]='北京天安门';
</script>
</body>

set方式视图会刷新

 

<body>
<div id="app">
    <ul>
        <li v-for="item in arr">{{item}}</li>
    </ul>
</div>
<script>
   var app=new Vue({
       el:"#app",
       data:{
           arr:['北京','上海','天津','重庆']
       }
   });
    Vue.set(app.arr,0,'北京天安门');
</script>
</body>

 

 

 4.Vue.delete(target,key)用法和原理与set添加元素是一样的道理

<body>
<div id="app">
    <ul>
        <li v-for="(val,key) in obj">{{key}}----{{val}}</li>
    </ul>
</div>
<script>
   var app=new Vue({
       el:"#app",
       data:{
           obj:{name:'张三',sex:'男',hobby:'睡大觉'}
       }
   });
    Vue.delete(app.obj,'hobby');
</script>
</body>

5.Vue.directive(id,[definition])指令函数，定义了以下几个钩子，每一个钩子都有参数el,指的是绑定的元素

// 注册
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})
// 注册 (指令函数)
Vue.directive('my-directive', function () {
  // 这里将会被 `bind` 和 `update` 调用
})
// getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

<body>
<div id="app">
     <div v-drop>Hello Vue!</div>
</div>
<script>
    Vue.directive('drop',{
        bind:function(el){
            el.style.color='red';
            el.style.fontWeight='bold'
        }
    });
    var app=new Vue({
        el:'#app'
    })
</script>
</body>

inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

 这是我做的一个照片墙拖曳例子

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 800px;
            height: 800px;
            position: relative;
            background-color: #000000;
            margin: auto;
        }
        .img{
            position: absolute;
            left:0;
            top:0;
            transform: rotateZ(0deg);
        }
    </style>
    <script src="lib/Vue/vue.development.js"></script>
</head>
<body>
<div id="app">
    <div class="box">
        <img src="../QQxiu/pic/21.gif" alt="" class="img" v-ball>
        <img src="../QQxiu/pic/31.gif" alt="" class="img" v-ball>
        <img src="../QQxiu/pic/2132.gif" alt="" class="img" v-ball>
        <img src="../QQxiu/pic/21214.gif" alt="" class="img" v-ball>
        <img src="../QQxiu/pic/24.gif" alt="" class="img" v-ball>
        <img src="../QQxiu/pic/3214.gif" alt="" class="img" v-ball>
    </div>
</div>
<script>
    Vue.directive('ball',{
        inserted:function(el){
            var i=0;
            el.onclick=function(e){
                i+=10;
               el.style.transform="rotateZ("+i+"deg)"
            };
            el.onmousedown=function(e){
                var l=e.clientX-el.offsetLeft;
                var t=e.clientY-el.offsetTop;
                document.onmousemove=function(e){
                    el.style.left=(e.clientX-l)+'px';
                    el.style.top=(e.clientY-t)+'px'
                };
                el.onmouseup=function(){
                    document.onmousemove=null;
                    el.onmouseup=null;
                }
            }
        }
    });
    var app=new Vue({
        el:'#app'
    })
</script>
</body>

bind:update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/Vue/vue.development.js"></script>
</head>
<style>
    #text{
        width: 100px;
        height:100px;
        resize: none;
    }
</style>
<body>
<div id="app">
    <textarea  id="text" v-model="a" v-box></textarea>
</div>
<script>
Vue.directive('box',{
    update:function(el){
        let color1=Math.ceil(Math.random()*225);
        let color2=Math.ceil(Math.random()*225);
        let color3=Math.ceil(Math.random()*225);
        el.style.backgroundColor='rgb('+color1+","+color2+','+color3+")"
    }
});
var app=new Vue({
    el:'#app',
    data:{
        a:""
    }
})
</script>
</body>
</html>

 小例子如下，当被绑定的textarea的内容发生变化的时候，就会执行钩子函数

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次， 指令与元素解绑时调用。

6.Vue.filter(id,[definition])注册或获取全局过滤器，主要用于在实例里面的数据不改变的情况下，在页面对渲染进dom的数据进行过滤处理，和angular中的过滤器用法一样

 

// 注册
Vue.filter('my-filter', function (value) {
  // 返回处理后的值
})
// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

 

简单全局过滤器和局部过滤器例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/Vue/vue.development.js"></script>
</head>
<body>
<div id="app">
    <h3>数字变美元</h3>
    <input type="text" placeholder="数字变美元" v-model="num">
    <span>{{num|money}}</span>
    <h3>内容反转</h3>
    <input type="text" placeholder="内容反转" v-model="message">
    <span>{{message|reverse}}</span>
</div>
<script>
    Vue.filter("money",
       function(value){
           return "$"+value
    });
    var app=new Vue({
        el:"#app",
        data:{
            num:100,
            message:""
        },
        filters:{
            reverse:function(value){
                return value.split('').reverse().join('')
            }
        }
    })
</script>
</body>
</html>

 

 过滤器可以管道式连接过滤

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/Vue/vue.development.js"></script>
</head>
<body>
<div id="app">
    <h3>过滤字符串中的数字，并将剩余部分以数组形式输出</h3>
    <input type="text" placeholder="输入字符串" v-model="message">
    <span>{{message|delNum|arr}}</span>
</div>
<script>
    Vue.filter("delNum",
       function(value){
           return value.replace(/[0-9]/g,'')
    });
    Vue.filter("arr",
        function(value){
           return  value.split('')
        }
    );
    var app=new Vue({
        el:"#app",
        data:{
            message:""
        }
    })
</script>
</body>
</html>

7.Vue.component()在组件那一篇文章有说到，不做总结了

8.Vue.version用于获取当前Vue的版本号

9.Vue.use用于安装Vue插件

10.对于Vue.mixin的理解，引用别人的博文

vue中mixin的一点理解

    vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别？

     组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。
     而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。
     单纯组件引用：
          父组件 + 子组件 >>> 父组件 + 子组件
     mixins：
          父组件 + 子组件 >>> new父组件
 
     值得注意的是，在使用mixins时，父组件和子组件同时拥有着子组件内的各种属性方法，但这并不意味着他们同时共享、同时处理这些变量，两者之间除了合并，是不会进行任何通信的。最开始看到mixins的时候，天真的我似乎看到了一种向下的类似vuex的数据共享方案，心情十分激动啊。但是仔细一研究官方api和一些技术博客，才发现自己。。。天真。
 
 
 
我个人的拙见如下：
1.Vue在实例化成对象的那一刻，会通过mixin混合机制将方法直接添加到实例里面去
2.prototype方法直接将方法添加到Vue本身的构造器里面去

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/Vue/vue.development.js"></script>
</head>
<body>
<div id="app"></div>
<div id="app1"></div>
<script>
    Vue.mixin({
        created:function(){
            this.hello()
        },
        methods:{
            hello:function(){
                console.log('这是混合器添加的hello方法')
            },
            say:function(){
                console.log('这是混合器添加的say方法')
            }
        }
    });
    Vue.prototype.myapp=function(){
        console.log("我是外来入侵者")
    };
    var app=new Vue({
        el:"#app",
        methods:{
            lsit:function(){
                console.log('这是app实例本身的list方法')
            },
            say:function(){
                console.log('这是app实例本身的say方法')
            }
        }

    });
    var app1=new Vue({
        el:"#app1",
    });
    app.hello();
    app.lsit();
    app.say();
    app1.hello();
    app1.say();
    app.myapp();
    console.log(app.__proto__)

</script>
</body>
</html>

 

输出结果：

 

 大家可以看到

第一个输出的是混合器的hello方法，此刻刚开始创建实例app

第二个属于混合器的hello方法，因为app本身实例没有这个方法，所以是混合器为其添加的

第三个输出的是混合器的hello方法，此刻刚开始创建实例app1

第四个输出的是app本身的list方法

第五个输出的是app实例的say方法。因为app实例中用有该方法，会将混合器添加的say方法覆盖掉

对于六和七由于app1没有自己的hello和say方法，所以只能用混合器为他添加的方法

第八个属于Vue原型里面我们添加进去的myapp方法

我们再看一下Vue原型对象app.__proto__

 

 我们发现里面并没有混合方法，所以混合方法在创建实例对象的那一刻添加到实例对象里面了，但是里面却有myapp方法

 11.Vue.compile()在 render 函数中编译模板字符串。只在独立构建时有效

 

 

 

转载于:https://www.cnblogs.com/douyaer/p/7650140.html

weixin_30920597
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue的api常见用法总结
07-05
vue常见用法
vue 的全局API
zt_vicky的博客
08-30 3591
vue 的全局API：在构造器外部用vue提供给我们的API函数来定义新的功能 vue2.0_Vue.directive自定义指令  自定义的指令： Vue.directive('');自定义指令中传递的3个参数： el:指令所绑定的元素，可以用来直接操作DOM。 binding:一个对象，包含指令的很多信息。 vnode:Vue编译生成的虚拟节点 V
Vue之全局API（nextTick、filter、use）
zuomengjia的博客
11-06 469
全局API （1）什么是全局API？ 全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API. 通俗理解：就是在构造器外部用Vue提供的API函数来定义新的功能。 （2）常用vue 的全局 API列表 1、Vue.directive 自定义指令 2、Vue.extend 扩展实例构造器 3、全局操作Vue.set + Vue.delete 4、V...
vue全局API
独宠子沫的博客
07-23 6936
一、什么是全局API？## 标题 全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，在构造器外部用Vue提供给我们的API函数来定义新的功能。 二、Vue.directive自定义指令 Vue.directive('wzq',{ bind:function(el,binding,vnode){//被绑定 ...
Vue 全局API 详细介绍（nextTick、set、delete、......）
高大志leo的博客
11-27 3731
Tips：Vue全局（内置）API，在实例中对应使用方式this.$apiName。 Vue.extend(options) 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 data选项是特例，需要注意 - 在Vue.extend()中它必须是函数。 // 创建构造器 var Greet = Vue.extend({ template: '<p>{{firstName}} {{lastName}} say {{alias}}</p>',...
深入理解Vue官方文档梳理之全局API
08-28
本篇文章主要介绍了深入理解Vue官方文档梳理之全局API，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue设置全局访问接口API地址操作
10-14
主要介绍了vue设置全局访问接口API地址操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue.js全局API之nextTick全面解析
10-19
本篇文章主要介绍了vue.js全局API之nextTick全面解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【vue】Vue 全局API 详细介绍（nextTick、set、delete、......）
SunPeng的博客
04-13 1120
【vue】Vue 全局API 详细介绍（nextTick、set、delete、......）
Vue的全局API
DUT_Walnut的博客
03-08 1079
文章目录Vue.directivebinding对象自定义指令的生命周期函数包含Vue生命周期钩子函数的实例测试图Vue.extend构造器的延伸实例Vue.setVue.set存在意义实例Vue生命周期钩子函数代码展示Template制作模板直接写在选项里的模板写在template标签里的模板写在script标签里的模板compenet入门全局化注册组件局部化注册组件component prop...
vue的全局api
ansong472863274的博客
01-18 201
什么是全局API 全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，说的简单些就是，在构造器外部用Vue提供给我们的API函数来定义新的功能。当然对应得也有局部的，只在当前的实例中可以用，比如局部过滤器。 Vue.directive自定义指令 我们前一个部分学习了vue中内部指令，其实我们也根据具体需求用Vue.directi...
Vue 的全局API
weixin_42354407的博客
02-20 309
什么是全局API？ 全局API不是在构造器中，而是先声明全局变量或直接在Vue上定义新功能，Vue内置了一些全局API。通俗讲，就是在构造器外使用Vue提供给我们的API函数来定义新的功能。 ...
Vue入门学习笔记3 vue全局API整理
RuiHe_pan的博客
05-18 1793
几个必须会的最常用的全局API【Vue.directive( id, [definition] )、Vue.extend( options )、Vue.set( target, propertyName/index, value )、template 模板、Vue.component( id, [definition] ) 组件】详解。其中例子可以做入门模板使用。
Vue学习笔记——全局API
Stephen-James
02-24 1036
第1节：Vue.directive 自定义指令 <div id="app"> <div v-jspang="color" id="demo"> {{num}} </div> <div> <button @click="add">Add</button> &lt...
vue源码理解——全局API篇
qq_56979523的博客
01-04 1163
全局API 与实例方法不同，实例方法是将方法挂载到Vue的原型上，而全局API是直接在Vue上挂载方法。在Vue中，全局API一共有12个，分别是Vue.extend、Vue.nextTick、Vue.set、Vue.delete、Vue.directive、Vue.filter、Vue.component、Vue.use、Vue.mixin、Vue.observable、Vue.version。这12个API中有的是我们在日常业务开发中经常会用到的，有的是对Vue内部或外部插件提供的，我们在日常业务开发
Vue常用全局Api简介及使用
天涯芳草
07-20 3093
全局API： (1)Vue.directive (2)Vue.use (3)Vue.extend (4)Vue.set (5)Vue.mixin 实例属性 (6)vm.$props (7)vm.$options (8)vm.$el (9)vm.$children (10)vm.$root (11)vm.$slots (12)vm.$attrs 全局配置 (13)productionTip (14)silent (15)devtools 组件进阶 (16)mixins..
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
最新发布
u010234868的专栏
05-17 203
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
vue全局api接口的主要内容
10-24
Vue全局API是Vue.js框架内置的一些方法和属性，可以在Vue实例中通过this.$apiName的方式进行调用。这些API包括但不限于以下几个方面： 1.全局配置：Vue.config、Vue.util、Vue.set、Vue.delete等。 2.全局API：Vue....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值