1、自定义全局指令

    可以在不同的组件实例中使用, 也就是说在全局任意位置都可以使用Vue.directive(指令名, 对象); // 对象中定义了 该指令的所有生命周期函数方法,也叫钩子函数Vue.directive('red',{bind(el,binding){console.log(this);el.style.background = 'red';}
})全局自定义注册指令简写：
Vue.directive('red',(el,binding)=>{el.style.background = 'red';})

2、自定义局部指令

只能在当前定义的组件中使用const vm = new Vue({el: '#app',data: {},methods: {},directives: {yellow: {bind(el, binding) {// console.log('bind');el.style.background = 'yellow'}},// 自定义局部简写方式// yellow(el, binding) {// }}})

3、自定义参数el,binding

el:代表当前绑定指令的元素
binding：表示当前指令的参数对象，值为binding.value

4、指令生命周期

     bind: 当指令绑定在标签上时就触发的函数,特点: 无法获取到父元素(该时间段当前的标签还没有挂载到父元素上)inserted: 当绑定指令的元素 插入到父节点时候触发 特点: 可以获取到父元素,操作父元素了update:  表示当前绑定指令的元素上的数据更新的时候触发 (注意: 表示数据更新的时候触发)componentUpdated: 表示组件(标签)更新的时候触发unbind: 当标签解除自定义指令的时候触发

vue中自定义指令Vue.directive(指令名, 对象)相关推荐

vue 给checkbox 赋值_浅谈vue中关于checkbox数据绑定v-model指令的个人理解
vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: {{msg}} js里data初始化数据 new Vue({ el: "#myA ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
vue中自定义组件的命名规则
问题 vue中自定义的组件名在html中字母大写会报错 html: js: 自定义的组件中字母可以大写,但是在html标签中,字母有大写的就会报错原因这是因为html中不区分大小写,所以在html ...
Vue中自定义标签及其使用
Vue中自定义标签及其使用问题需求自定义创建组件的vue文件编辑组件使用导入申明使用使用整个代码效果问题我们在使用Vue开发移动端应用程序时,常常使用Vant Weapp中的 ...
VUE中自定义步骤条
VUE中自定义步骤条下列自定义步骤条是根据elementUI中的el-step的样式改编而得.记录下自己改编过程!!! <template><div class='steps el ...
在VSCode中自定义文件类型和扩展名关联
目录标题概述实现步骤总结标题在 VSCode 中自定义文件类型和扩展名关联 Customize file type and extension associations in VSCode ...
vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画
自定义指令: vue中通过directive方法自定义指令,如:自定义一个v-focus指令: <script>Vue.directive('focus', {//通过directive( ...
Vue中常用的内置指令及自定义指令
内置指令 v-bind [单向数据绑定] [格式:v-bind:属性名="data中定义的属性"] [简写::属性名="data中定义的属性"] <div ...
vue中自定义全局指令报错
我主要从三个方面来检查 1.首先检查是否拼写错误,尽量粘贴,不要手写 2.区分好变量和字符串的差别 <p v-color="'red'">全局指令</p> ...

vue中自定义指令Vue.directive(指令名, 对象)

1、自定义全局指令

2、自定义局部指令

3、自定义参数el,binding

4、指令生命周期

vue中自定义指令Vue.directive(指令名, 对象)相关推荐

最新文章

热门文章