写点什么

Vue 学习之自定义指令,宅家 36 天咸鱼翻身入职腾讯

作者:Java高工P7
  • 2021 年 11 月 10 日
  • 本文字数:1970 字

    阅读完需:约 6 分钟

<td>{{item.ctime | msgDateFormat('yyyy-mm-dd hh-mi-ss') }}</td>


<td><a href="" @click.prevent="del(item.id)">删除</a></td>


</tr>


</tbody>


</table>


</div>


<script>


// 定义一个全局按键修饰符


Vue.config.keyCodes.f2=113


var vm = new Vue({


el: "#app",


data: {


id:'',


name:'',


keywords:'',


list:[


{id:1,name:'奔驰',ctime:new Date()},


{id:2,name:'宝马',ctime:new Date()}


]


},


methods: {


add(){


// 添加记录到 list 中


this.list.push({id:this.id,name:this.name,ctime:new Date()})


// 将输入框置空


this.id=this.name=''


},


del(id){


// some 方法循环数组,返回 true 可以终止循环


// this.list.some((item,i) =>{


// if(item.id == id){


// 移除记录 1 移除一条记录


// this.list.splice(i,1);


// 返回 true 终止循环


// return true;


// }


//})


// 通过 findIndex 方法获取要删除记录的 index


var index = this.list.findIndex(item => {


if(item.id == id){


return true


}


})


// 通过 splice 方法来移除记录


this.list.splice(index,1);


},


search(keywords){


// 保存新的数组


// var newList = []


// this.list.forEach(item => {


// 判断循环的记录是否包含的查询的关键字


// if(item.name.indexOf(keywords) != -1){


// 将循环的记录添加到新的数组中


// newList.push(item)


// }


// })


// 返回数组信息


// return newList


// filter 过滤 返回满足条件的数组


return this.list.filter(item => {


// includes 是否包含


if(item.name.includes(keywords)){


return item


}


})


}


},


filters:{ // 通过局部过滤器来实现


msgDateFormat:function(msg,pattern=''){


// 将字符串转换为 Date 类型


var mt = new Date(msg)


// 获取年份


var y = mt.getFullYear()


// 获取月份 从 0 开始


var m = (mt.getMonth()+1).toString().padStart(2,"0")


// 获取天数


var d = mt.getDate();


if(pattern === 'yyyy-mm-dd'){


return y+"-"+m+"-"+d


}


// 获取小时


var h = mt.getHours().toString().padStart(2,"0")


// 获取分钟


var mi = mt.getMinutes().toString().padStart(2,"0")


// 获取秒


var s = mt.getSeconds().toString().padStart(2,"0")


// 拼接为我们需要的各式


return y+"-"+m+"-"+d+" "+h+":"+mi+":"+s


}


}


})


</script>


</body>


</html>


自定义全局指令




我们想创建一个自动获取焦点的指令,该功能其实可以通过


document.getElementById('search').focus()


来实现,但此处我们专门来介绍下自定义指令的实现方式

1.效果实现

定义全局指令:v-focus


// 定义全局的指令 v-focus


Vue.directive("focus",{


bind:function(el){


},


inserted:function(el){


el.focus()


},


updated:function(el){


}


})


使用 v-focus 指令



效果



我们可以看到刷新后搜索框获取到了焦点,说明我们创建的 v-focus 生效了,但是大家肯定也有很多疑问,我们来一一解释下。

2.注意点说明

2.1 指令名称

Vue 中所有的指令,在调用的时候,都以 v- 开头,然后在定义的时候我们不用添加 v-前缀。


2.2 参数方法

然后就是我们在定义 v-focus 指令的时候的第二个参数是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作,那么这几个方法分别是什么含义呢?如下


钩子方法 | 说明


-------- | -------------------------------------


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


inserted | 表示元素 插入到 DOM 中的时候,会执行 inserted 函数【触发 1 次】


updated | 当 VNode 更新的时候,会执行 updated


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


, 可能会触发多次

2.3 方法的参数值

我们调用的 bind 方法或者 inserted 方法的参数值是怎么设置的。


第一个参数,永远是 el ,表示被绑定了指令的那个元素,这个 el 参数,是一个原生的 JS 对象


第二个参数,binding:一个对象,包含以下属性


参数 | 说明


---------- | ----------------------------------------------------------------------


name | 指令名,不包括 v- 前缀。


value | 指令的绑定值,例如


oldValue | 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。


expression | 字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中,表达式为 “1 + 1”。


arg | 传给指令的参数,可选。例如:v-my-directive:foo 中,参数为 “foo”。


modifiers | 一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar:true }。

2.4 什么场景下调用什么方法

上面介绍的各个方法在什么场景下调用呢?记住如下原则即可。


  • 和样式相关的操作,一般都可以在 bind 执行

  • 和 JS 行为有关的操作,最好在 inserted 中去执行

3.小案例

添加一个设置颜色属性的指令 v-color




效果



传参使用


我们系统指令能够动态的接收数据来改变

用户头像

Java高工P7

关注

还未添加个人签名 2021.11.08 加入

还未添加个人简介

评论

发布
暂无评论
Vue学习之自定义指令,宅家36天咸鱼翻身入职腾讯