Vue 自定义指令

Vue 自定义指令

规则

1. 定义指令名称不能使用驼峰和v-，要是用-连接，记得添加引号
2. 使用时要v-自定义名称
3. 函数写法："名称"(节点,绑定对象){};对象写法："名称"：{bind(节点,绑定对象){}, inserted(节点,绑定对象){},update(节点,绑定对象){}。
4. 局部指令：写在实例化对象里。
5. 全局指令：写在实例化对象前

局部指令

语法：directives

• bind成功绑定时调用
• inserted成功插入页面调用
• update重新解析时(改变)调用

对象式

<div id="app">
        <h1 v-sum="num"></h1>
        <button @click="num++">点击</button>
    </div>

 Vue.config.productionTip = false;
    var vm = new Vue({
        el: "#app",
        data() {
            return { num: 1 }
        },
        directives: {
            "sum": {
                // bind成功绑定时调用
                bind(element, binding) {
                    console.log(element);
                    console.log(binding);
                    element.innerHTML = binding.value * 10;
                    binding.value = binding.value * 10;

                },
                // inserted成功插入页面调用
                inserted(element, binding) {
                    element.innerText = binding.value * 100;
                    binding.value = binding.value * 100;
                    console.log(binding.value);
                },
                // update重新解析时(改变)调用
                update(element, binding) {
                    console.log(binding.value);
                    element.innerText = binding.value + binding.oldValue;
                    binding.value = binding.oldValue;
                }
            }
        }
    })

函数式

<div id="app">
        <h1 v-sum="num"></h1>
        <button @click="num++">点击</button>
    </div>

Vue.config.productionTip = false;
    var vm = new Vue({
        el: "#app",
        data() {
            return { num: 1 }
        },
        directives: {
            "sum"(element,binding){
            	element.innerText=binding.value+100;
            }
        }
    })

全局指令

语法：Vue.directive

• bind成功绑定时调用
• inserted成功插入页面调用
• update重新解析时(改变)调用

对象式

<div id="app">
        <h1 v-sum-window="num"></h1>
        <button @click="func()">点击</button>
    </div>

Vue.config.productionTip = false;
Vue.directive(("sum-window",{
	bind(element,binding){},
	inserted(element,binding){
		element.innerHTML=binding.value;
		binding.value=binding.value;
	},
	update(element,binding){
		element.innerHTML=binding.value+binding.oldValue;
		binding.value=binding.oldValue;
	}
})
var vm = new Vue({
        el: "#app",
        data() {
            return { num: 0 }
        },
        methods:{
        	func(){
				this.num+=2;
			}
        }
    })

函数式

<div id="app">
        <h1 v-sum-window="num"></h1>
        <button @click="num++">点击</button>
    </div>

Vue.config.productionTip = false;
Vue.directive("sum-window", function (element, binding) {
        element.innerHTML = binding.value;
})
var vm = new Vue({
        el: "#app",
        data() {
            return { num: 0 }
        },
        methods:{
        	func(){
				if (this.num % 2 == 1) {
    				 this.num += 2;
    			} else {
    				this.num += 1;
   			   }
			}
        }
    })

• 失联

最后编辑时间 2024，03，13；12：54