快速掌握vue中的自定义指令

自定义指令

注册全局的自定义指令
Vue.directive(),
其中,传递两个参数,第一个参数传递的是指令的名字,第二个参数是一个对象。

详细的例子

// 第一个参数是指令的名称,第二个参数是一个对象。
Vue.directive('focus', {
  bind: function (el) {
    // 注意:每个函数中呢,第一个参数永远是el, 表示被绑定了指令的那个元素,这个el参数,是一个原生的js对象
    el.focus()
  },
  // 在元素刚绑定指令的时候,元素还没有放到dom中去,这个时候,调用focus方法没有作用
  // 因为一个元素只有插入dom之后,才能获取焦点
  inserted: function (el) {
    el.focus()
  },
})

对象,我们介绍三个方法

bind:

每当指令绑定到元素上的时候,会立即执行bind函数,只执行一次

inserted

表示元素插入到dom中的时候,会执行inserted函数

updated

当window更新的时候,会执行updated,可能会触发多次。

总结 在使用的时候,需要给指令前加一个v-

原文地址:https://www.cnblogs.com/yaogengzhu/p/11087396.html

时间: 2024-10-02 21:27:12

快速掌握vue中的自定义指令的相关文章

什么是vue.js中的自定义指令?

问题一:什么是vue.js中的自定义指令? 自定义一些指令对底层DOM进行操作 更多参考 Vue里面有许多内置的指令,比如v-if和v-show,这些丰富的指令能满足我们的绝大部分业务需求,不过在需要一些特殊功能时,我们仍然希望对DOM进行底层的操作,这时就要用到自定义指令. 问题二:自定义指令的几个钩子函数 bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置. inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中). upda

vue视频: 自定义指令 && 拖拽 && 自定义键盘信息

v-textv-forv-html 指令: 扩展html语法 自定义指令:1. 自定义属性指令: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 // vm.$el }); <div v-red="参数"></div> 指令名称: v-red -> red * 注意: 必须以 v-开头(定义时去掉v-) <!DOCTYPE html> <html lang="en&q

Vue API(directives) 自定义指令

前言:除了vue的内置指令以外,我们可以定义自定义指令.内置指令表相见:https://www.cnblogs.com/ilovexiaoming/p/6840383.html 我们定义一个最简单的 <script> export default { name: 'App', data(){ return{ yanse:'red' } }, // 所有自定义指令 directives:{ zzh(el,binding){ console.log(el); console.log(binding

Vue中v-on的指令以及一些其他指令

1.v-on的基本使用 <div id="app"> <!-- 使用事件绑定的简写形式 --> <input type="button" value="按钮" v-on:click="btn"> </div> <script> var vm = new Vue({ el: '#app', //methods是用来专门存放vue的处理方法的 methods: { btn

vue中常见的指令

1,差值表达式{{}} 1 <p >{{ msg }}</p> 2.v-cloak解决差值表达式闪烁的问题 <p v-cloak>{{ msg }}</p> 3.v-text是没有闪烁问题的. 1 <h4 v-text="msg"></h4>//注意:v-text会覆盖元素中的原本的内容,差值表达式只会替换自己的这个占位符 3 <h4 v-text="msg">=======<

在老项目中单独引入vue.js,使用自定义指令

转发https://www.jb51.net/article/138594.htm 转发https://www.cnblogs.com/yszblog/p/11694256.html 原文地址:https://www.cnblogs.com/hyqd/p/12173335.html

Vue中的v-bind指令

普通: property="value" 此时 value为字符串 v-bind指令 v-bind:property="value" 此时 value会被解析成一个变量,若是在vue实例中没有找到,会显示找不到错误 作用: 1.用于动态绑定一个值 2.用于传入变量 注意事项: :property = "value" 由于使用多了v-bind指令的语法糖:property来组件的prop属性,在出现那个说找不到被绑定的变量时,要反应出来是vue把v

vue中v-for系统指令的使用

v-for指令可以用来遍历数组/对象 它可以根据data中数据的更新动态刷新视图 1. 遍历数组 1.1 使用方式: v-for="item in arr" item是一个参数,表示数组中的每一项,arr也是一个参数,表示你要遍历的数组 1.2 使用方式: v-for="(item, index) in arr" index表示数组项的索引 ? 2. 遍历对象 2.1 使用方式:v-for="value in obj" value 表示对象的属性

vue 学习八 自定义指令

vue指令注册有两种方式 1 全局注册 在main.js中 使用vue.directive Vue.directive('alert_w', { inserted(el,bin,vn) { console.log(el,bin,vn) }, //...一些钩子函数 }) 2.局部注册 在组件内添加一个directives字段 注意这个比全局注册方法多了一个字母 s export default { name: "app", directives(){ //...一些钩子函数 } } 全