【13】vue.js — 自定义指定(directive)

自定义指定的操作

自定义指定使用时前面必须得加v-


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <script type="text/javascript" src="js/vue.js" >script>
    head>
    <body>
        <div id="box">
            
            <span v-color="red">自定义指定01span>
            <span v-color="blue">自定义指定02span>
            <span v-color="yellow">自定义指定03span>
        div>
    body>
    <script>
        window.onload=function(){
            Vue.directive('color',function(color){
                //接收参数,但执行v-color指令时
                this.el.style.color = color;
            });
            var vm = new Vue({
                el: '#box',
                data: {
                    msg: 'welcome',
                    red: 'red',
                    blue: 'blue',
                    yellow: 'yellow'
                }
            });
        }
    script>
html>

自定义指定的生命周期


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <script type="text/javascript" src="js/vue.js" >script>
    head>
    <body>
        <div id="box">
            <span v-color="red">自定义指定01span>
            <span v-color="blue">自定义指定02span>
            <span v-color="yellow">自定义指定03span>
            <br />
            <input type="button" value="将红色更换成绿色,不会执行bind方法" @click="change" />
        div>
    body>
    <script>
        window.onload=function(){
            Vue.directive('color',{
                bind:function(color) {
                    //第一次绑定到DOM元素上的时候触发
                    console.info("第一次绑定数据时触发了")
                },
                update: function(color) {
                    //console.info("更新渲染数据");
                    this.el.style.color = color;
                },
                unbind: function() {
                    console.info("解绑了");
                }
            });
            var vm = new Vue({
                el: '#box',
                data: {
                    msg: 'welcome',
                    red: 'red',
                    blue: 'blue',
                    yellow: 'yellow'
                },
                methods: {
                    change: function(){
                        this.red = 'green';
                    }
                }
            });
        }
    script>
html>

【13】vue.js — 自定义指定(directive)_第1张图片

当我们再次点击按钮时候,上面红色字体会变成绿色,bind方法不会再执行。

自定义指定 — 拖拽效果


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <script type="text/javascript" src="js/vue.js" >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>
    <script>
        window.onload=function(){
            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;
                    };
                }
            });
            var vm = new Vue({
                el: '#box',
                data: {
                    msg: 'welcome'
                }
            });
        }
    script>
html>

你可能感兴趣的:(Vue,vue,自定义指定)