Vue中自定义指令directive的使用

知识预备：自定义指令中的钩子函数

bind：只调用一次，指令第一次绑定到元素的时候调用（一般在修改style时使用）
inserted：被绑定的元素节点插入到dom树中时调用（一般在修改dom时使用）
update：所在组件的Vnode更新时调用，但孩子Vnode可能还没有更新
componentUpdate：所在组件的Vnode及孩子的Vnode全部更新时调用
unbind：只调用一次，指令与元素解绑的时候调用

一般就用前两个就行了

知识预备：自定义指令中的钩子函数中的参数

//例子
bind:function(el,binding)

el:指令绑定的对象，可以用来直接操作dom
binding是一个对象

binding:{name:指令名value：指令绑定的值 参数值 "1+1"==>2expression：绑定值的字符串形式 "1+1"==>'1+1'
}

还有其他参数类型不常用就不写了到这里没看懂没关系看后面的例子就明白了

1.自定义全局指令

声明：Vue.directive(‘name’,{bind:function(){}})

参数1：字符串自定义指令的名称
参数2：对象绑定的钩子函数

<script>
import Vue from 'vue'
Vue.directive('focus', {bind: function (el) {console.log('调用全局自定义指令----bind')},inserted: function (el) {el.focus()console.log('调用全局自定义指令----inserted')}
})
export default {}
</script>

使用：在标签中写 v-指令的名字

      <div>调用全局自定义指令</div><input type="text" v-model="keywords" v-focus>

2.自定义私有指令

声明：

<script>
export default {name: 'directivePage',directives: {'fontWeight': {bind: function (el) {el.style.fontWeight = 500}}},data () {return {keyword: ''}},methods: {}
}
</script>

调用：

 <div v-fontWeight>调用私有自定义指令</div>

3.自定义指令中传递参数

以自定义全局指令为例子
声明：

参数存在于binding对象中见知识预备中

Vue.directive('color', {bind: function (el, binding) {el.style.color = binding.value}
})

调用：

传递参数以字符串的形式

<div v-color="'blue'">调用全局自定义指令color</div>

效果：

4.自定义指令的简写形式

大多数情况下，我们可能想在bind和update钩子上做重复动作，并且不想关心它的钩子函数时即不想关心绑定哪个钩子函数

// 不想关心它的钩子函数可以采用简写的方式
Vue.directive('color', (el, binding) => {el.style.color = binding.value
})

Vue中自定义指令directive的使用相关推荐

vue中自定义指令Vue.directive(指令名, 对象)
1.自定义全局指令可以在不同的组件实例中使用, 也就是说在全局任意位置都可以使用Vue.directive(指令名, 对象); // 对象中定义了该指令的所有生命周期函数方法,也叫钩子函数Vue. ...
vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画
自定义指令: vue中通过directive方法自定义指令,如:自定义一个v-focus指令: <script>Vue.directive('focus', {//通过directive( ...
教女朋友学习 vue中的指令及其自定义指令
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
vue点击改变data值_vue 中自定义指令改变data中的值
通过局部自定义指令实现了一个拖动的指令 html: script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives: ...
vue点击改变data_vue 中自定义指令改变data中的值
通过局部自定义指令实现了一个拖动的指令 html: script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives: ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
VUE：自定义指令（directives ）选项的用法
自定义指令分为全局指令和局部指令.全局指令可在任意vue组件内生效,局部指令仅在注册了指令的组件内生效. 全局指令和局部指令写法几乎相同.全局指令是在main.js内使用Vue.directive注册 ...
vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
29.VUE自定义指令directive和inserted
VUE自定义指令directive和inserted 1.什么事自定义指令 1.2使用自定义指令的方式 2.设置自定义组件 2.1 设置全局指令 2.2 设置私有指令 2.3 钩子函数 3. 案例 1 ...
第三十九篇自定义指令 - directive
前面讲了关于在Vue中如何来进行封装swiper组件的内容,本篇内容讲到使自定义组件,讲这块内容也是同样为了后续再次回顾封装swiper组件变化做铺垫内容,那么什么是自定义指令,在前面的内容讲过了好些 ...

Vue中自定义指令directive的使用

知识预备：自定义指令中的钩子函数

知识预备：自定义指令中的钩子函数中的参数

1.自定义全局指令

2.自定义私有指令

3.自定义指令中传递参数

4.自定义指令的简写形式

Vue中自定义指令directive的使用相关推荐

最新文章

热门文章