vue中v-bind:风格效果的自定义指令是什么

　　介绍

这篇文章给大家分享的是有关vue中v-bind:风格效果的自定义指令是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

vue的优点

vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。

<>强自定义指令

1。什么是自定义指令

以v -为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令。为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到自定义指令。

2。自定义指令的语法

全局自定义指令

//,注册一个全局自定义指令,“v-focus” 　　Vue.directive(& # 39;关注# 39;,,{//大敌;当被绑定的元素插入到,DOM 中时…… 　　,插入:function  (el), {//,才能聚焦元素 　　el.focus才能() 　　,} 　　})

局部自定义指令

指令:,{ 　　,专注:{//才能,指令的定义 　　,,插入:function  (el), { 　　,,el.focus () 　　,,} 　　,} 　　}

3。钩子函数

看了上述的代码,如果你从来没接触过这类内容,你可能会很生疏、下面我给大家讲讲其每一步所需要掌握的东西

首先是钩子函数:

<代码> :绑定只会调用一次的函数,表示指令第一次绑定元素时调用

<代码> :插入被绑定元素插入到父节点时调用(仅保证父节点存在,但不一定已被插入文档中)。

<代码> 更新:所在组件的VNode更新时调用,但是可能发生在其子VNode更新之前。指令的值可能发生了改变,也可能没有。

<代码> componentUpdated>

<代码>解开>

然后我们看看钩子函数中的参数列表:

<代码> el>

<代码> 绑定:一个对象,包含以下属性:

<代码>名称> v ->

<代码> 价值:指令的绑定值,例如:

<代码> v-my-directive=? + 1”中,绑定值为<代码> 2>

<代码> oldValue> 更新和<代码> componentUpdated 钩子中可用。无论值是否改变都可用。 <代码>表达式:字符串形式的指令表达式。例

如<代码> v-my-directive=? + 1”中,表达式为<代码>“1 + 1”。<代码>参数>

例如<代码> v-my-directive: foo 中,参数为<代码>“foo" 。

<代码>修改> v-my-directive.foo。酒吧中,修饰符对象为<代码> {foo:真的,酒吧:真}。<代码> vnode>

<代码> oldVnode> 更新和<代码> componentUpdated 钩子中可用。

除了el <代码>之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的数据集<代码> 来进行。

下面我们来分析几个简单的钩子函数,及其参数

代码如下:(看完代码我再将其)

& lt; div  id=癮pp"比; 　　,& lt; span  v-mmm=& # 39;{颜色:颜色,,字形大小:“20 px"} & # 39;在绑定的对象形式& lt;/span> 　　,& lt; br> 　　,& lt; button  @click=& # 39; changeStyle& # 39;在改变颜色& lt;/button> 　　& lt;/div> 　　 　　& lt; script> 　　,const  vm =, Vue ({new  　　el才能:& # 39;#应用# 39; 　　,,数据:{ 　　,,,颜色:& # 39;青色# 39; 　　,,,style1:{颜色:& # 39;lightblue& # 39;}, 　　,,,style2:{字形大小:“20 px"} 　　,,}, 　　指令才能:{ 　　,,嗯,,{ 　　,,,绑定(el,绑定),{ 　　,,,,//,binding.value =,{颜色:颜色,,字形大小:“20 px"} 　　,,,,如果(binding.value.constructor ===,对象),{ 　　,,,,,种(binding.value) .forEach (key =祝辞,{ 　　,,,,,,el.style(例子),=,binding.value(例子); 　　,,,,,}) 　　,,,,} 　　,,,} 　　,,} 　　,,}, 　　方法:才能,{ 　　,,changeStyle (), { 　　,,,this.color =, & # 39; lightpink& # 39; 　　,,} 　　,,}, 　　,}) 　　& lt;/script>

vue中v-bind:风格效果的自定义指令是什么