vue-混合和自定義指令與插件

時間 2019-12-06

標籤 vue 混合自定義指令插件简体版

原文原文鏈接

vue的複用性與組合

一、混合

混合 (mixins) 是一種分發 Vue 組件中可複用功能的很是靈活的方式。混合對象能夠包含任意組件選項。以組件使用混合對象時，全部混合對象的選項將被混入該組件自己的選項

當組件和混合對象含有同名選項時，這些選項將以恰當的方式混合

mixins: [mixin],

切記混合對象的鉤子將在組件自身鉤子以前調用

var mixin = {
  created: function () {
    console.log('混合對象的鉤子被調用')
  }
}

運行效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>混合</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
        .kuang{
            width: 200px;
            height: 100px;
            border: 1px solid #ccc;
        }
        .huaguo{
            margin-top: 20px;
            background: blue;
            width: 80px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }
        .huaguo1{
            width: 100px;
            height: 300px;
            margin-top: 10px;
            background: darkcyan;
        }
    </style>
</head>
<body>
    <div id="app">
        <tk></tk>
        <hg></hg>
    </div>
    <script type="text/x-template" id="tcTpl">
        <div>
            <input type="button" value="彈出" @click="tog"/>
            <div class="kuang" v-show="visible">
                我是彈出框
                <input type="button"  value="X" @click="hide"/>
            </div>
        </div>
    </script>

    <script type="text/x-template" id="hgTpl">
        <div>
            <div class="huaguo" @mouseover="tog" @mouseout="tog">顯示更多</div>
            <div class="huaguo1" v-show="visible">我是劃過隱藏的div</div>
        </div>
    </script>

    <script>
        //公共的相同的
        var gonggong = {
            data:function () {
                return {
                    visible:false
                };
            } ,
            methods:{
                tog:function(){
                    this.visible=!this.visible
                },
                hide:function(){
                    this.visible=false
                }
            }
        }
         //建立組件
        var tankuang = {
            template:"#tcTpl",
            mixins: [gonggong]
        }
        //建立組件
        var huaguo ={
            template:"#hgTpl",
            mixins: [gonggong]
        }
        //初始化根實例
        var app = new Vue({
            el:"#app",
            components:{
                'tk':tankuang,
                'hg':huaguo,
            }
        });
    </script>
</body>
</html>

二、自定義指令

什麼是自定義指令

本身開發的指令就叫自定義指令

怎麼自定義定義一個指令

Vue.directive("pined",function(){

})

若是對象值爲true的時候咱們將其div固定到屏幕上

運行效果

<!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>自定義指令</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
        #app{
            height: 1000px;
        }
        .aa{
            width: 200px;
            min-height: 100px;
            border: 1px solid #ccc;
            background: salmon;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="aa" v-pined="fixed">組件能夠擴展 HTML 元素，封裝可重用的代碼</div>
        我要上去了</br>
        我要上去了</br>
        我要上去了</br>
        我要上去了</br>
        我要上去了</br>
        我要上去了</br>
        我要上去了</br>
        我要上去了</br>
        我要上去了</br>
        我要上去了</br>
        我要上去了</br>
    </div>
    <script>
        //建立自定義指令
        Vue.directive("pined",function(el,binding){
            console.log(el);
            console.log(binding);
            el.style.position="fixed";
            el.style.left="20px";
            el.style.top="10px";
        })
        var app = new Vue({
            el:"#app",
            data:{
                fixed:true
            }
        });
    </script>
</body>
</html>

三、插件

開發插件

var 名字 = {};
名字.install = function (Vue, options) {
    
}

插件的用法

Vue.use(名字)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

vue-混合和自定義指令與插件

vue的複用性與組合

一、混合

混合 (mixins) 是一種分發 Vue 組件中可複用功能的很是靈活的方式。混合對象能夠包含任意組件選項。以組件使用混合對象時，全部混合對象的選項將被混入該組件自己的選項

當組件和混合對象含有同名選項時，這些選項將以恰當的方式混合

切記混合對象的 鉤子將在組件自身鉤子 以前 調用

運行效果

二、自定義指令

什麼是自定義指令

本身開發的指令就叫自定義指令

怎麼自定義定義一個指令

若是對象值爲true的時候咱們將其div固定到屏幕上

運行效果

三、插件

開發插件

插件的用法

切記混合對象的鉤子將在組件自身鉤子以前調用