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);el.style='color:'+binding.value;}}
}
</script>

　我们在这里定义了一个指令，用于改变字体的颜色，我们如何去调用我们自定义的指令，实际上你就可以当作是内置指令一样去调用它了！

给zzh绑定的值一定要是具体的数据/state/computed，不可以直接绑定值。

其中el是绑定的这个dom，而binding里是一些源数据

其中呢，我们不光可以去指定它的style，能干的事情还有很多，我们再去指定一下它的className,为了演示效果，我们引用一下animate.css,在main.js全局注册一下就好.

fadeInDown(el){el.className = 'animated fadeInDown';}

　在dom标签上写上classname就ok了。

转载于:https://www.cnblogs.com/ZaraNet/p/9939035.html

Vue API(directives) 自定义指令相关推荐

vue单文件自定义指令的封装
vue单文件自定义指令的封装第一步(封装一个js文件) // 暴露并配置指令功能添加背景颜色 export const mycolor = {// 解析结构完成后自动运行钩子函数inser ...
vue directives自定义指令的使用
有的情况下,需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令. 自定义指令使用情景: 1.按钮级别权限的控制. 2.按钮的波纹动态效果. 3.一键copy的功能. 4.输入框自动聚焦. ...
php 自定义sql 脚手架,vue路由、自定义指令、脚手架
*Vue vue-router 一.路由一.导航式路由路由路径由标签配置标签内 to属性值规定改标签指向的path路径: 路由对应视图通过加载组件加载到上去首页去新闻配置路由的步骤: ...
vue基础4——自定义指令
自定义指令自定义指令中的this指向window <div id="root"><h2>当前的n值是:<span v-text="n&qu ...
Vue 混合、自定义指令、插件
vue的复用性与组合混合混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项 ...
vue中如何自定义指令
目录一. 什么是自定义指令二. 如何自定义指令三.应用场景实现输入框防抖图片懒加载一键 Copy的功能拖拽下拉菜单相对时间转换一. 什么是自定义指令我们看到的v-开头的行内属性, ...
vue中如何自定义指令directive
一. 什么是自定义指令我们看到的v-开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能,对普通 DOM元素进行底层操作,这时候就会用到自定义指令.除了核心功能默认内置的指令 (v-mode ...
directives 自定义指令
(鼠标拖拽dialog框小案例) 自定义指令:复用普通元素的底层DOM访问逻辑(能很好的使逻辑和视图分离)ps:可参考官网定义 1.新建js文件或者直接在组件中写也可以(一下是js文件) export ...
vue中通过自定义指令将汉字转化为首字母大写、首字母小写、大写、小写的拼音
使用情景: 在文本框中输入内容,例如姓名在页面中将姓名转化为姓名的拼音,包括大写拼音.小写拼音.首字母大写拼音.大写拼音缩写.小写拼音缩写新建一个 pinyin.js 文件这是一串又臭又长的un ...

Vue API(directives) 自定义指令

Vue API(directives) 自定义指令相关推荐

最新文章

热门文章