Vue全局API總結

時間 2019-11-12

標籤 vue 全局 api 總結简体版

原文原文鏈接

1.extend用於建立一個子類Vue,用$mount來掛載html

<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。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">
    <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>

結果以下：vuex

咱們能夠看到視圖更新之後拿到的並非更新後的innerHTML，由於dom結構更新是一個異步事件api

再看下面的例子數組

<!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值app

3.Vue.set(target,key,value)普通的狀況下對Vue實例裏面的數據進行更改，數據改掉了，可是呈如今頁面的視圖並無發生變化，因此借用該方法視圖也會跟着刷新dom

普通方式視圖並無刷新異步

<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添加元素是同樣的道理post

<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>