Vue指令总结

  1. 熟悉的指令

    名称作用
    v-bind :单向绑定解析表达式,可简写为:xxx
    v-model :双向数据绑定
    v-for :遍历数组/对象/字符串
    v-on:绑定事件监听,可简写为@
    v-if:条件渲染(动态控制节点是否存存在)
    v-else:条件渲染(动态控制节点是否存存在)
    v-show :条件渲染(动态控制节点是否展示)
  2. 新学指令

    名称作用
    v-text把所有的字符串都当成正常的文本去解析,替换所在的结点的内容,而插值语法不会
    v-html支持HTML结构的解析;与插值语法的区别:v-html会替换掉结点中所有的内容,插值语法不会。
    严重注意:!!!v-html有安全性问题
    (1)在网站上动态渲染任意的HTML是非常危险的行为,容易导致XSS攻击。
    (2)一定要在可信的内容上使用v-html,永远不要在用户提交的内容上使用!!!
    v-cloakv-clock指令(没有值):
    1.本质就是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-clock属性。
    2.使用css的属性选择器:[v-cloak]{display:none}配合v-clock可以解决网速慢时,Vue还没接管容器时的{{XXX}}问题。
    v-oncev-once在结点初次动态渲染自后,就视为静态内容了,有数据的改变不会引起v-once所在结点的更新,用于优化性能;
    v-pre作用是跳过所在结点的编译。因此,可以利用他跳过没有使用指令语法、没有使用插值语法的结点,会加快编译;
  3. 自定义指令

    1. 定义语法

      (1)局部指令

       new Vue({
              directives:{指令名:配置对象}
      })
      //或者
      new Vue({
              directives:{指令名:回调函数}
      })
      

      (2)全局指令

       Vue.directive('指令名',配置对象);
       //或者
        Vue.directive('指令名',回调函数);
      
    2. 配置对象中常见的3个回调函数

      (1) bind:指令与元素成功绑定时调用。

      (2) inserted:指令所在元素被插入页面时调用。

      (3) update:指令所在模板结构被重新解析时调用。

fbind: {
                // 指令与元素成功绑定时调用
                bind(element, binding) {
                    element.value = binding.value;
                },
                // 指令所在的结点被插入页面时
                inserted(element, binding) {
                    element.focus();
                },
                // 指令所在的模板被重新解析时
                update(element, binding) {
                    element.value = binding.value;
                }
            }
  1. 注意点

1.指令定义时不加v-,但使用时要加v-;

2.指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue自定义指令失效的原因可能有很多种情况。根据引用和引用的内容,可以推测一些可能的原因和解决方法。 1. 指令未正确注册:在Vue中,自定义指令需要先进行注册,然后才能在模板中使用。请确保自定义指令已经正确地注册到Vue实例中。你可以使用全局注册或局部注册的方式进行注册。全局注册可以通过Vue.directive方法全局注册所有的指令,如引用所示。局部注册可以在组件内部使用directives选项进行指令的注册。 2. 指令名称不正确:请确保你在模板中正确地使用了自定义指令的名称。指令名称应该是以v-开头的,比如v-imgerror。 3. 指令绑定值错误:自定义指令可以通过绑定值来传递参数。请确保你正确地传入了绑定值,并且在指令定义中正确地使用了这些值。 4. 指令逻辑错误:自定义指令的逻辑代码可能有问题,导致指令无法正常工作。请检查指令的代码逻辑,确保代码没有错误。 5. 图片加载问题:自定义指令在处理图片加载问题时可能会出现失效的情况。请检查你的指令逻辑,确认图片加载错误时是否正确地触发了相关的处理逻辑。 总结来说,如果Vue自定义指令失效,首先要检查指令是否正确注册、名称是否正确、绑定值是否正确、代码逻辑是否正确,以及是否正确处理了图片加载问题。通过排查这些可能的原因,你应该能够找到并解决问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值