开发者学堂课程【Vue.js 入门与实战:指令-指令函数的简写形式】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/586/detail/8154
指令-指令函数的简写形式
目录
一、函数简写
二、演示
一、函数简写
本节,我们主要学习,函数简写,我们知道,大多数情况下,如果在 bind 和update 钩子上做重复动作,并不关心其它的钩子函数。如果代码只需要写到 bind 和 update里。就不需要在后面跟对象,可以直接这样写:
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
}
)
第一个参数是指定的名称,第二个是 function,function 表示在 bind 和 update中将代码各书写了一份。
二、演示
directives:{//自定义私有指令
fontweicht’: {/设置字体粗细
bind:tunction(el.binding){
el.style.fontweight =binding.value
}
}
fontsize': function (el, binqing) {// function
等同于把代码写到了 bind 和 update 中el.style.fontsize =parseInt (binding.value)+ ‘px’
调用指令:
<div id=”app2”>
<h3 v-color="'pink'" v-fontweight="900 v-fontsize="’30px’"> {{dt | dateformat}}</h3>
</div>
演示结果:
以上就是函数简写。