2021-7-11 Vue的自定义指令简单实例
获取焦点简单实例，用Vue.directive(ps:指令）定义，命名不要是关键字，用v-加自定义指令名称调用，而内部用钩子函数inserted来实现
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div id="app">
<input type="text" name="">
<input type="text" name="" v-fff>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
//在原生js中使用
Vue.directive('fff',{
inserted:function(el){
el.focus();
}
});
var vm=new Vue({
el:'#app',
data:{}
});
</script>
</body>
</html>
摘自Vue.js文档：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
自定义指令改变元素样式简单实例
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div id="app">
<input type="text" name="" v-color="msg">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
Vue.directive('color',{
bind:function(el,bingding){
el.style.backgroundColor=bingding.value.colorStyle;
}
})
var vm=new Vue({
el:'#app',
data:{
msg:{
colorStyle:'blue'
}
}
});
</script>
</body>
</html>
自定义指令中的局部指令，要在实例中定义，作用域是局部的，代码实例如下
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div id="app">
<input type="text" name="">
<input type="text" name="" v-color="msg" v-fff>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
//在原生js中使用 var vm=new Vue({
el:'#app',
data:{
msg:{
colorStyle:'blue'
}
},
directives:{
color:{
bind:function(el,bing){
el.style.backgroundColor=bing.value.colorStyle;
}
},
fff:{
inserted:function(el){
el.focus();
}
}
}
});
</script>
</body>
</html>
2021-7-11 Vue的自定义指令简单实例的更多相关文章
- 最简单的方式理解Vue的自定义指令与混合
vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...
- Vue.directive 自定义指令
一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在 ...
- Vue2.0 【第二季】第1节 Vue.directive自定义指令
目录 Vue2.0 [第二季]第1节 Vue.directive自定义指令 一.什么是全局API? 二. Vue.directive自定义指令 三.自定义指令中传递的三个参数 四.自定义指令的生命周期 ...
- Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...
- vue 通过自定义指令实现 置顶操作；
项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令 ...
- vue怎么自定义指令？？
最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...
- Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式
前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...
- vue中自定义指令
//vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...
- Vue 3自定义指令开发
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是指令(directive) 在Angular和Vue中都有Direct ...
- vue.js+webpack在一个简单实例中的使用过程demo
这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...
随机推荐
- 快速上手Linux核心命令（七）：Linux系统信息相关命令
目录 前言 uname 显示系统信息 hostname 显示或设置系统主机名 du 统计磁盘空间使用情况 echo 显示一行文本 watch 监视命令执行情况 stat whereis 显示命令及其相 ...
- 互异关系容斥&集合幂级数小记
最近碰见了一些互异关系容斥的题目,而这类题目往往要配合集合幂级数的一些技术使用,所以简单记记. 内容很杂,行文很乱,作者水平很低,酌情观看. 互异关系容斥 思想其实很基本,应用范围其实很广. 原论文. ...
- 音视频八股文（4）--ffmpeg常见命令（3）
17 FFmpeg滤镜 17.1 filter的分类 按照处理数据的类型,通常多媒体的filter分为: ● 音频filter ● 视频filter ● 字幕filter 另一种按照处于编解码器的位置 ...
- 2023-04-13：给定一个字符串数组strs，其中每个字符串都是小写字母组成的， 如果i ＜ j，并且strs[i]和strs[j]所有的字符随意去排列能组成回文串， 那么说(i,j)叫做一个互补
2023-04-13:给定一个字符串数组strs,其中每个字符串都是小写字母组成的, 如果i < j,并且strs[i]和strs[j]所有的字符随意去排列能组成回文串, 那么说(i,j)叫做一 ...
- 2020-10-01：谈谈golang的空结构体。
福哥答案2020-10-01:#福大大架构师每日一题# 1.map.value是空结构体,构造集合. 2.通道.只传递信号,不传递数据. 3.切片.不管切片多长,都不会占用空间. 4.仅包含方法的结构 ...
- 基于DevExpress的GridControl实现的一些界面处理功能
DevExpress的GridControl控件能够提供很多强大的操作,其视图GridView能够通过各种设置,呈现出多种复杂的界面效果,本篇随笔探讨一些常见的GridControl控件及其GridV ...
- vue全家桶进阶之路49：Vue3 环境变量
vue3 环境变量 在Vue3中,可以通过环境变量来管理应用程序中的配置.这些配置可以包括后端API的URL.API key.跟踪ID等等.在不同的开发.测试.生产环境中使用不同的配置是非常有用的.V ...
- 2015年蓝桥杯C／C++大学B组省赛真题(星系炸弹)
题目描述: 在X星系的广袤空间中漂浮着许多X星人造"炸弹",用来作为宇宙中的路标. 每个炸弹都可以设定多少天之后爆炸. 比如:阿尔法炸弹2015年1月1日放置,定时为15天,则它在 ...
- 非极大值抑制（NMS）算法详解
NMS(non maximum suppression)即非极大值抑制,广泛应用于传统的特征提取和深度学习的目标检测算法中. NMS原理是通过筛选出局部极大值得到最优解. 在2维边缘提取中体现在提取边 ...
- 基于Jmeter+ant+Jenkins+钉钉机器人群通知的接口自动化测试
前言 搭建jmeter+ant+jenkins环境有些前提条件,那就是要先配置好java环境,本地java环境至少是JDK8及以上版本,最好是JAVA11或者JAVA17等较高的java环境,像jen ...