开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第30天，点击查看活动详情
自定义指令
系统内置的指令不能满足我们所有场景下的需要，很多时候我们需要自己定义符合自己业务需求的指令
-
一个新的需求：页面打开之后，让文件框自动的获取焦点
- 页面加载完毕--什么时候加载完毕>>window.onload
- 自动获取：dom.focus()
-
介绍vm实例的生命周期中的一个函数：mounted(){} --钩子函数
- 钩子函数：会自动触发的函数
- 生命周期：一个实例从创建到销毁的整个过程
- mounted是一个独立的结构
-
介绍vue中如何对元素进行标识：
-
ref:相当于元素的id，可以使用ref为元素设置一个唯一的标识
<!-- 设置ref属性,这个属性可以唯一的标识这个元素,类似于id --> 编号:<input type="text" v-model='newcar.id' ref='iidd'> -
this.$refs:
- 带$都是当前vm实例的内置成员
- this.$refs是一个对象，这个对象中的每个键值对用来描述一个元素
- 通过this.$refs.key来获取指定的元素，获取到的就是当前指定标识的dom元素
// 添加mounted钩子函数 mounted(){ console.log(1) // document.querySelector('#id').focus() console.log(this.$refs) // this.$refs.iidd就是当前拥有ref标识并且值为iidd的元素 this.$refs.iidd.focus() }
-
自定义指令的创建
-
分类：全局自定义指令 局部自定义指令
-
全局自定义指令在vm实例外，vm实例前 创建
-
作用：实现某个功能，谁需要这个功能就进行调用
-
创建语法
Vue.directive(名称，{ // 当指令插入到指定元素时触发，元素最终添加到dom树中 // 被绑定元素插入父节点时调用 // el:当前添加了这个指令的dom元素 inserted(el,binding,vNode){ 指令需要实现的业务逻辑 } }) -
创建过程
// 创建自定义指令实现自动聚焦 Vue.directive('myfocus',{ // 当元素插入到父节点时触发 // el:当前添加了这个指令的dom元素:指令所绑定的元素，可以用来直接操作 DOM inserted(el){ // 实现文本框聚焦 el.focus() } }) -
使用方式
- v-自定义指令的名称
- 如：v-myfocus
-
细节
- 命名细节：如果是使用cemal命名法，那在使用的时候就必须使用-连接每一个单词，并且单词要小写
- 建议：都用小写
