青岛免费网站建设,眉县住房和城乡建设局网站,画图标网站,苏州网站建设中心目录 一、学习目标1.自定义指令 二、自定义指令1.指令介绍2.自定义指令3.自定义指令语法4.指令中的配置项介绍5.代码示例6.总结 三、自定义指令-指令的值1.需求2.语法3.代码示例 四、自定义指令-v-loading指令的封装1.场景2.需求3.分析4.实现5.准备代码 六、自定义指令总结 一、… 目录 一、学习目标1.自定义指令 二、自定义指令1.指令介绍2.自定义指令3.自定义指令语法4.指令中的配置项介绍5.代码示例6.总结 三、自定义指令-指令的值1.需求2.语法3.代码示例 四、自定义指令-v-loading指令的封装1.场景2.需求3.分析4.实现5.准备代码 六、自定义指令总结 一、学习目标
1.自定义指令
基本语法全局、局部注册指令的值v-loading的指令封装
二、自定义指令
1.指令介绍 内置指令v-html、v-if、v-bind、v-on… 这都是Vue给咱们内置的一些指令可以直接使用 自定义指令同时Vue也支持让开发者自己注册一些指令。这些指令被称为自定义指令 每个指令都有自己各自独立的功能
2.自定义指令
概念自己定义的指令可以封装一些DOM操作扩展额外的功能
3.自定义指令语法 全局注册 //在main.js中
Vue.directive(指令名, {inserted (el) {// 可以对 el 标签扩展额外功能el.focus()}
})局部注册 //在Vue组件的配置项中
directives: {指令名: {inserted () {// 可以对 el 标签扩展额外功能el.focus()}}
}使用指令 注意在使用指令的时候一定要先注册再使用否则会报错 使用指令语法 v-指令名。如 注册指令时不用加v-前缀但使用时一定要加v-前缀
4.指令中的配置项介绍
inserted:被绑定元素插入父节点时调用的钩子函数
el使用指令的那个DOM元素
5.代码示例
需求当页面加载时让元素获取焦点autofocus在safari浏览器有兼容性
App.vue divh1自定义指令/h1input v-focus refinp typetext/div6.总结
1.自定义指令的作用是什么
2.使用自定义指令的步骤是哪两步
三、自定义指令-指令的值
1.需求
实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色
2.语法
1.在绑定指令时可以通过“等号”的形式为指令 绑定 具体的参数值
div v-colorcolor我是内容/div2.通过 binding.value 可以拿到指令值指令值修改会 触发 update 函数
directives: {color: {inserted (el, binding) {el.style.color binding.value},update (el, binding) {el.style.color binding.value}}
}3.代码示例
App.vue
templatediv!--显示红色-- h2 v-colorcolor1指令的值1测试/h2!--显示蓝色-- h2 v-colorcolor2指令的值2测试/h2button改变第一个h1的颜色/button/div
/templatescript
export default {data () {return {color1: red,color2: blue}}
}
/scriptstyle/style四、自定义指令-v-loading指令的封装
1.场景
实际开发过程中发送请求需要时间在请求的数据未回来时页面会处于空白状态 用户体验不好
2.需求
封装一个 v-loading 指令实现加载中的效果
3.分析
1.本质 loading效果就是一个蒙层盖在了盒子上
2.数据请求中开启loading状态添加蒙层
3.数据请求完毕关闭loading状态移除蒙层
4.实现
1.准备一个 loading类通过伪元素定位设置宽高实现蒙层
2.开启关闭 loading状态添加移除蒙层本质只需要添加移除类即可
3.结合自定义指令的语法进行封装复用
.loading:before {content: ;position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff url(./loading.gif) no-repeat center;
}5.准备代码
templatediv classmaindiv classboxulli v-foritem in list :keyitem.id classnewsdiv classleftdiv classtitle{{ item.title }}/divdiv classinfospan{{ item.source }}/spanspan{{ item.time }}/span/div/divdiv classrightimg :srcitem.img alt/div/li/ul/div /div
/templatescript
// 安装axios yarn add axios || npm i axios
import axios from axios// 接口地址http://hmajax.itheima.net/api/news
// 请求方式get
export default {data () {return {list: [],isLoading: false,isLoading2: false}},async created () {// 1. 发送请求获取数据const res await axios.get(http://hmajax.itheima.net/api/news)setTimeout(() {// 2. 更新到 list 中用于页面渲染 v-forthis.list res.data.data}, 2000)}
}
/scriptstyle
.loading:before {content: ;position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff url(./loading.gif) no-repeat center;
}.box2 {width: 400px;height: 400px;border: 2px solid #000;position: relative;
}.box {width: 800px;min-height: 500px;border: 3px solid orange;border-radius: 5px;position: relative;
}
.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;
}
.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;
}
.news .left .title {font-size: 20px;
}
.news .left .info {color: #999999;
}
.news .left .info span {margin-right: 20px;
}
.news .right {width: 160px;height: 120px;
}
.news .right img {width: 100%;height: 100%;object-fit: cover;
}
/style六、自定义指令总结
Vue自定义指令是Vue框架提供的一个功能它允许开发者在模板中直接调用自定义的指令进行特定的操作。
自定义指令可以通过Vue.directive方法进行注册其中参数为指令的名称和一个对象该对象包含了指令的各种属性和钩子函数。
下面是一些常用的指令属性和钩子函数 bind指令第一次绑定到元素时调用可以在这里进行一些初始化的操作。 inserted指令被插入到父元素中时调用可以获取到父元素和子元素的信息。 update当绑定值更新时调用可以根据新的值更新元素的属性或样式。 componentUpdated当组件和子组件的VNode更新时调用可以对VNode进行操作。 unbind指令与元素解绑时调用可以进行一些清理操作。 arg用于传递指令的参数可以在指令定义中使用。 modifiers用于传递指令的修饰符可以在指令定义中使用。
自定义指令还可以通过Vue.directive方法第二个参数直接定义一个函数该函数的参数为指令所绑定的元素、指令的参数和修饰符。
自定义指令的用法如下
div v-my-directive:arg.modifiervalue/div其中v-my-directive是指令的名称arg是指令的参数modifier是指令的修饰符value是指令的绑定值。
总结起来Vue自定义指令是一种可以在模板中直接调用的功能通过注册指令和定义指令钩子函数可以实现对元素的各种操作和行为。
