vue常用特性

最新推荐文章于 2025-07-03 13:46:11 发布

原创

最新推荐文章于 2025-07-03 13:46:11 发布 · 1.5k 阅读

43 ·

CC 4.0 BY-SA版权

前端青山

文章标签：

#vue.js #javascript #前端 #前端框架

🌈个人主页：前端青山
🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来Vue篇专栏内容:vue常用特性

1.1 自定义指令

除了核心功能默认内置的指令，Vue也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令绑定到元素上执行相关操作。

自定义指令分为： 全局 指令和 局部指令，当全局指令和局部指令同名时以局部指令为准。

自定义指令常用钩子函数有：

bind：在指令第一次绑定到元素时调用
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
update：数据更新时调用

请注意：不管在定义全局还是局部自定义指令时，所提及的指令名均是不带 v- 前缀的名称

全局自定义指令定义

// 无参(v-once/v-cloak)
Vue.directive('指令名',{ 
  钩子函数名: function(el[,....]){ 
  // 业务逻辑 
  // el参数是挂载到元素的DOM对象 
    } 
}
// 传参(v-text/v-html/v-model) v-model="username"
Vue.directive('指令名',{ 
  钩子函数名: function(el,binding[,....]){ 
    let param = binding.value  // param 其实就时 username 的值
    // 业务逻辑
    },
    .... 
}

全局自定义指令（后续的知识点也是的）不能写在Vue实例中（或者某个组件中）

自动获取焦点的指令

<body>
  <div id="app">
    <input type="text" v-focus>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  // 全局自定义指令 -- new Vue之前
  // Vue.directive('focus', {
  //   inserted (element) {
  //     element.focus()
  //   }
  // });
  new Vue({
    el: '#app',
    data: {},
    directives: { // 局部自定义指令
      'focus': {
        inserted (element) {
          element.focus()
        }
      }
    }
  })
</script>

局部自定义指令定义

可以在 new Vue 的时候添加 directives 以注册局部自定义指令，局部自定义指令只能在当前组件中使用：

directives: { 
  指令名: { 
    // 指令的定义 
    钩子函数名: function (el,binding) { 
      // 业务逻辑 
    } 
  } 
}

函数简写（重点）

在很多时候，我们可能想在 bind 和 update 时触发相同行为（如果只是其一，则还是单独分开声明），而不关心其它的钩子。那么这样写：

// 全局 
Vue.directive('指令名', function (el,binding) { 
  // 业务逻辑 
})
// 局部 
directives: { 
  指令名: function (el,binding) { 
    // 业务逻辑 
  } 
}

在自定义指令的方法中，不能像以前的 methods 中的方法一样使用关键词 this ，此时 this关键词指向的是 Window 对象。

案例：使用自定义指令实现以下效果

使用全局指令定义自定义的 v-red（不传参）和 v-color（传参）
使用局部自定义指令实现 v-mobile（不传参）验证用户输入的是否是合法的手机号

<body>
  <div id="app">
    <div v-red>哈哈哈哈</div>
    <div v-color="'green'">嘻嘻</div>
    <input type="text" v-mobile v-model="phone">
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  // 使用全局指令定义自定义的 v-red（不传参） 和 v-color（传参）
  Vue.directive('red', {
    inserted (el) {
      el.style.color = 'red'
    }
  })
  Vue.directive('color', {
    inserted (el, binding) {
      el.style.color = binding.value // bindin