vue視頻：自定義指令 && 拖拽 && 自定義鍵盤信息

時間 2019-12-11

標籤 vue 視頻自定義指令鍵盤信息简体版

原文原文鏈接

v-text
v-for
v-html
指令: 擴展html語法html

自定義指令:
1. 自定義屬性指令:vue

Vue.directive(指令名稱,function(參數){
    this.el    -> 原生DOM元素  // vm.$el
});

<div v-red="參數"></div>

指令名稱: v-red -> redweb

* 注意: 必須以 v-開頭（定義時去掉v-）app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        Vue.directive('red',function(color){
            this.el.style.background=color;
        });

        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    a:'blue'
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <span v-red="a">
            asdfasd
        </span>
    </div>

</body>
</html>

Vue.directive('red',function(color){})

demo：拖拽ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
    </style>
    <script src="vue.js"></script>
    <script>
        Vue.directive('drag',function(){
            var oDiv=this.el;
            oDiv.onmousedown=function(ev){
                var disX=ev.clientX-oDiv.offsetLeft;
                var disY=ev.clientY-oDiv.offsetTop;

                document.onmousemove=function(ev){
                    var l=ev.clientX-disX;
                    var t=ev.clientY-disY;
                    oDiv.style.left=l+'px';
                    oDiv.style.top=t+'px';
                };
                document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                };
            };
        });

        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    msg:'welcome'
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <div v-drag :style="{width:'100px', height:'100px', background:'blue', position:'absolute', right:0, top:0}"></div>
        <div v-drag :style="{width:'100px', height:'100px', background:'red', position:'absolute', left:0, top:0}"></div>
    </div>

</body>
</html>

ev.clientX-oDiv.offsetLeft

2.自定義元素指令:（用處不大）this

    Vue.elementDirective('zns-red',{
        bind: function(){
            this.el.style.background='red';
        }
    });

-------------spa

@keydown.up
@keydown.enterscala

@keydown.a/b/c....code

自定義鍵盤信息:
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        //ctrl->17
        /*document.onkeydown=function(ev){
            console.log(ev.keyCode);
        };*/
        Vue.directive('on').keyCodes.ctrl=17;  //
        Vue.directive('on').keyCodes.myenter=13;

        window.onload=function(){
            var vm=new Vue({
                el:'#box',
                data:{
                    a:'blue'
                },
                methods:{
                    show:function(){
                        alert(1);
                    }
                }
            });
        };

    </script>
</head>
<body>
    <div id="box">
        <input type="text" @keydown.myenter="show">
    </div>

</body>
</html>

Vue.directive('on').keyCodes.myenter=13;

監聽數據變化:
    vm.$el/$mount/$options/....

    vm.$watch(name,fnCb);  //淺度
    vm.$watch(name,fnCb,{deep:true});  //深度監視

相關標籤/搜索

每日一句

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

vue視頻： 自定義指令 && 拖拽 && 自定義鍵盤信息

vue視頻：自定義指令 && 拖拽 && 自定義鍵盤信息