Vue 自定义指令

这篇具有很好参考价值的文章主要介绍了Vue 自定义指令。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


Vue 自定义指令

Vue 自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点:

实例文章来源地址https://www.toymoban.com/news/detail-420481.html

<div id="app">
    <p>页面载入时,input 元素自动获取焦点:</p>
    <input v-focus>
</div>
 
<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用:

实例

<div id="app">
  <p>页面载入时,input 元素自动获取焦点:</p>
  <input v-focus>
</div>
 
<script>
// 创建根实例
new Vue({
  el: '#app',
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})
</script>

钩子

钩子函数

指令定义函数提供了几个钩子函数(可选):

  • bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

  • inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。

  • update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。

  • componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

  • unbind: 只调用一次, 指令与元素解绑时调用。

钩子函数参数

钩子函数的参数有:

  • el: 指令所绑定的元素,可以用来直接操作 DOM 。
  • binding: 一个对象,包含以下属性:
    • name: 指令名,不包括 v- 前缀。
    • value: 指令的绑定值, 例如: v-my-directive=“1 + 1”, value 的值是 2。
    • oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    • expression: 绑定值的字符串形式。 例如 v-my-directive=“1 + 1” , expression 的值是 “1 + 1”。
    • arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 “foo”。
    • modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
  • vnode: Vue 编译生成的虚拟节点,查阅 VNode API 了解更多详情。
  • oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

以下实例演示了这些参数的使用:

实例

<div id="app"  v-csdn:hello.a.b="message">
</div>
 
<script>
Vue.directive('csdn', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})
new Vue({
  el: '#app',
  data: {
    message: 'CSDN!'
  }
})
</script>

有时候我们不需要其他钩子函数,我们可以简写函数,如下格式:

Vue.directive('runoob', function (el, binding) {
  // 设置指令的背景颜色
  el.style.backgroundColor = binding.value.color
})

指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象:

实例

<div id="app">
    <div v-csdn="{ color: 'green', text: 'CSDN!' }"></div>
</div>
 
<script>
Vue.directive('csdn', function (el, binding) {
    // 简写方式设置文本及背景颜色
    el.innerHTML = binding.value.text
    el.style.backgroundColor = binding.value.color
})
new Vue({
  el: '#app'
})
</script>

到了这里,关于Vue 自定义指令的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 进阶 vue自定义指令 vue中常用自定义指令以及应用场景,案例书写

    除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外,Vue 还允许你注册自定义的指令 (Custom Directives)。 我们已经介绍了两种在 Vue 中重用代码的方式:组件和组合式函数。组件是主要的构建模块,而组合式函数则侧重于有状态的逻辑。另一方面,自定义指令主要是为了重用涉

    2024年02月15日
    浏览(41)
  • Vue(内置指令、自定义指令)

    和插值语法的效果类似 注意:不能识别标签数据 和插值语法的效果类似   当vue引入在html和js脚本前面时候网络延迟会导致页面未解析就会出现在页面 访问本地服务器比较快(没有延迟) 访问远程服务器比较慢(会有延迟) 同样可以通过chrome的开发者工具进行调整    js阻

    2024年02月01日
    浏览(50)
  • 【Vue2.0源码学习】指令篇-Vue自定义指令

    在 Vue 中,除了 Vue 本身为我们提供的一些内置指令之外, Vue 还支持用户自定义指令。并且用户有两种定义指令的方式:一种是使用全局API—— Vue.directive 来定义全局指令,这种方式定义的指令会被存放在 Vue.options[\\\'directives\\\'] 中;另一种是在组件内的 directive 选项中定义专为

    2024年02月09日
    浏览(45)
  • Vue-27、Vue自定义指令

    函数式写法 完整写法 big函数何时被调用? 指令与元素成功绑定时(一上来) 指令所在的模板被重新解析时 注意: 此时 element.focus();不凑效。原因此时指令与元素成功绑定。但是input 并未出现页面。但是当n变化时 element.focus()会生效。 所以函数式写法不完美。 对象式写法

    2024年01月19日
    浏览(37)
  • 【Vue】二:Vue核心处理---vue的其它指令和自定义指令

    v-text:当做文件解析。 v-html:当做 HTML 代码解析。 v-cloak 配置 css 样式来解决胡子的闪现问题。 我们模拟网络延迟的情况下,发现出现了如上的问题。 只渲染一次。之后将被视为静态内容。 带有该指令的标签将不会被编译。 指令的名字 (1)v-不需要写 (2)Vue官方建议指令

    2024年02月08日
    浏览(40)
  • 【vue】vue项目启动设置默认启动页

    当我们在启动vue项目时,默认打开的界面是白色的,需要输入正确的路由才能访问正确的页面。我们应该如何让项目打开的时候默认跳转到想启动的页面呢? 我们需要在router的index.ts(js)文件中设置路由规则,例如我们默认打开index页面,我们只需要设置routes,内容如下: 这

    2024年02月11日
    浏览(38)
  • Vue 自定义指令

    除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例 我们也可以在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用: 实例 钩子函数 指令定义

    2023年04月21日
    浏览(39)
  • VUE---自定义指令

    自定义指令:自己定义的指令,可以封装一些dom操作,扩展额外功能。可分为全局注册与                        局部注册。 全局注册(main.js中注册): Vue.directive(\\\'指令名称\\\',{         bind(ele,binding) {},  // 只执行一次;DOM渲染之前执行,里面可以进行样式操作       

    2024年01月19日
    浏览(33)
  • vue常见自定义指令

    使用 代码 使用 代码 使用 代码 使用 代码 使用 代码 使用 代码 使用 代码 使用 代码 使用 代码 使用 代码 使用 代码 使用 代码 使用 代码 使用 代码

    2024年02月08日
    浏览(44)
  • 【Vue】自定义指令

            📝个人主页: 五敷有你         🔥系列专栏: Vue ⛺️稳重求进,晒太阳 之前的v-html v-model v-for 等都是内置指令 自定义指令: 自己定义的指令,可以封装一些dom操作,扩展额外功能 操作dom:dom元素.focus() 全局注册:-语法 Vue 自动将我们的 自定义指令添加上了

    2024年02月21日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包