挑战百日学习计划(小程序开发)第14天(自定义指令directive钩子函数)

一个人如果闭上眼睛,走100米他都走不到,甚至会跌倒。 而睁开眼睛就可以很轻松做到,为什么呢? 缺少反馈机制。睁开眼睛你可以不断的接收到正确的反馈,从而你可以很轻松的走到目标,
所以应该项目也是如此,一个好的计划必须要有每一步的反馈,这样子你才可以坚持走的下去,否则你到一半的时候就会犹豫甚至回头。内心的天平左右摇摆.

本章知识点:Vue自定义指令directive 钩子函数

挑战百日学习计划(小程序开发 www.zkelm.com)每天进步1% 热爱学习无法自拔 哈哈

1.常用的Vue指令包含:
v-model:input 表单元素的双向绑定
v-bind: 单向绑定 (绑定元素的属性【value,url,src ,height,width,class style 等】)
v-on: 事件绑定 click dbclick mouseover mouseout
v-show :控制元素显示
v-if: 条件判断指令

2.支持自定义的指令 (自定义指令支持设置钩子函数,用于处理自定义指令directive的作用效果)

<div id="app">
//自定义了一个z-zkelm的指令
<input v-zkelm='{url:"www.zkelm.com",text:"小程序开发",color:"#f55"}'>
</div>
<script>
//不要bind等其他钩子函数的简写方式
 Vue.directive('zkelm',function(el,binding){
         el.value=binding.value.text+":"+binding.value.url;
         el.style.color=binding.value.color;
    })
    new Vue({
      el:"#app"
      })
</script>

运行结果:【小程序开发:www.zkelm.com

未完待续…

猜你喜欢

转载自blog.csdn.net/zkelm/article/details/106023190