自己做一网站 多做宣传.,深圳市交易中心,大连招聘网最新招聘,音乐网站建设规划个人名片#xff1a; #x1f60a;作者简介#xff1a;一名大二在校生 #x1f921; 个人主页#xff1a;坠入暮云间x #x1f43c;座右铭#xff1a;懒惰受到的惩罚不仅仅是自己的失败#xff0c;还有别人的成功。 #x1f385;**学习目标: 坚持每一次的学习打卡 文章… 个人名片 作者简介一名大二在校生 个人主页坠入暮云间x 座右铭懒惰受到的惩罚不仅仅是自己的失败还有别人的成功。 **学习目标: 坚持每一次的学习打卡 文章目录 一、学习目标1.自定义指令2.插槽 二、自定义指令1.指令介绍2.自定义指令3.自定义指令语法4.指令中的配置项介绍5.代码示例 三、自定义指令-指令的值1.需求2.语法3.代码示例 四、自定义指令-v-loading指令的封装1.场景2.需求3.分析4.实现5.准备代码 五、插槽-默认插槽1.作用2.需求3.问题4.插槽的基本语法5.代码示例6.总结 六、插槽-后备内容默认值1.问题2.插槽的后备内容3.语法4.效果5.代码示例 七、插槽-具名插槽1.需求2.具名插槽语法3.v-slot的简写4.总结 八、作用域插槽1.插槽分类2.作用3.场景4.使用步骤5.代码示例6.总结1.作用域插槽的作用是什么2.自定义指令的作用是什么 一、学习目标
1.自定义指令
基本语法全局、局部注册指令的值v-loading的指令封装
2.插槽
默认插槽具名插槽作用域插槽
二、自定义指令
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/div三、自定义指令-指令的值
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五、插槽-默认插槽
1.作用
让组件内部的一些 结构 支持 自定义 2.需求
将需要多次显示的对话框,封装成一个组件
3.问题
组件的内容部分不希望写死希望能使用的时候自定义。怎么办
4.插槽的基本语法
组件内需要定制的结构部分改用****占位使用组件时, ****标签内部, 传入结构替换slot给插槽传入内容时可以传入纯文本、html标签、组件 5.代码示例
MyDialog.vue
templatediv classdialogdiv classdialog-headerh3友情提示/h3span classclose✖️/span/divdiv classdialog-content您确定要进行删除操作吗/divdiv classdialog-footerbutton取消/buttonbutton确认/button/div/div
/templatescript
export default {data () {return {}}
}
/scriptstyle scoped
* {margin: 0;padding: 0;
}
.dialog {width: 470px;height: 230px;padding: 0 25px;background-color: #ffffff;margin: 40px auto;border-radius: 5px;
}
.dialog-header {height: 70px;line-height: 70px;font-size: 20px;border-bottom: 1px solid #ccc;position: relative;
}
.dialog-header .close {position: absolute;right: 0px;top: 0px;cursor: pointer;
}
.dialog-content {height: 80px;font-size: 18px;padding: 15px 0;
}
.dialog-footer {display: flex;justify-content: flex-end;
}
.dialog-footer button {width: 65px;height: 35px;background-color: #ffffff;border: 1px solid #e1e3e9;cursor: pointer;outline: none;margin-left: 10px;border-radius: 3px;
}
.dialog-footer button:last-child {background-color: #007acc;color: #fff;
}
/styleApp.vue
templatedivMyDialog/MyDialog/div
/templatescript
import MyDialog from ./components/MyDialog.vue
export default {data () {return {}},components: {MyDialog}
}
/scriptstyle
body {background-color: #b3b3b3;
}
/style6.总结
场景组件内某一部分结构不确定想要自定义怎么办
使用插槽的步骤分为哪几步
六、插槽-后备内容默认值
1.问题
通过插槽完成了内容的定制传什么显示什么, 但是如果不传则是空白 能否给插槽设置 默认显示内容 呢
2.插槽的后备内容
封装组件时可以为预留的 slot 插槽提供后备内容默认内容。
3.语法
在 标签内放置内容, 作为默认显示内容
4.效果 外部使用组件时不传东西则slot会显示后备内容 外部使用组件时传东西了则slot整体会被换掉
5.代码示例
App.vue
templatedivMyDialog/MyDialogMyDialog你确认要退出么/MyDialog/div
/templatescript
import MyDialog from ./components/MyDialog.vue
export default {data () {return {}},components: {MyDialog}
}
/scriptstyle
body {background-color: #b3b3b3;
}
/style七、插槽-具名插槽
1.需求
一个组件内有多处结构需要外部传入标签进行定制
上面的弹框中有三处不同但是默认插槽只能定制一个位置这时候怎么办呢?
2.具名插槽语法 多个slot使用name属性区分名字 template配合v-slot:名字来分发对应标签
3.v-slot的简写
v-slot写起来太长vue给我们提供一个简单写法 v-slot — #
4.总结
组件内 有多处不确定的结构 怎么办?具名插槽的语法是什么v-slot:插槽名可以简化成什么?
八、作用域插槽
1.插槽分类 默认插槽 具名插槽 插槽只有两种作用域插槽不属于插槽的一种分类
2.作用
定义slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据将来 使用组件时可以用
3.场景
封装表格组件
4.使用步骤 给 slot 标签, 以 添加属性的方式传值 slot :iditem.id msg测试文本/slot所有添加的属性, 都会被收集到一个对象中 { id: 3, msg: 测试文本 }在template中, 通过 #插槽名 obj 接收默认插槽名为 default MyTable :listlisttemplate #defaultobjbutton clickdel(obj.id)删除/button/template
/MyTable5.代码示例
MyTable.vue
templatetable classmy-tabletheadtrth序号/thth姓名/thth年纪/thth操作/th/tr/theadtbodytrtd1/tdtd赵小云/tdtd19/tdtdbutton查看 /button/td/trtrtd1/tdtd张小花/tdtd19/tdtdbutton查看 /button/td/trtrtd1/tdtd孙大明/tdtd19/tdtdbutton查看 /button/td/tr/tbody/table
/templatescript
export default {props: {data: Array}
}
/scriptstyle scoped
.my-table {width: 450px;text-align: center;border: 1px solid #ccc;font-size: 24px;margin: 30px auto;
}
.my-table thead {background-color: #1f74ff;color: #fff;
}
.my-table thead th {font-weight: normal;
}
.my-table thead tr {line-height: 40px;
}
.my-table th,
.my-table td {border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;
}
.my-table td:last-child {border-right: none;
}
.my-table tr:last-child td {border-bottom: none;
}
.my-table button {width: 65px;height: 35px;font-size: 18px;border: 1px solid #ccc;outline: none;border-radius: 3px;cursor: pointer;background-color: #ffffff;margin-left: 5px;
}
/styleApp.vue
templatedivMyTable :datalist/MyTableMyTable :datalist2/MyTable/div
/templatescriptimport MyTable from ./components/MyTable.vueexport default {data () {return {list: [{ id: 1, name: 张小花, age: 18 },{ id: 2, name: 孙大明, age: 19 },{ id: 3, name: 刘德忠, age: 17 },],list2: [{ id: 1, name: 赵小云, age: 18 },{ id: 2, name: 刘蓓蓓, age: 19 },{ id: 3, name: 姜肖泰, age: 17 },]}},components: {MyTable}}
/script6.总结
1.作用域插槽的作用是什么
作用域插槽的主要作用如下 封装组件逻辑通过使用作用域插槽可以将组件的逻辑封装在子组件中避免在父组件中过度使用 props 和事件。这有助于保持组件的纯度和可重用性。 分离关注点作用域插槽允许你在父组件和子组件中分别处理不同的逻辑使组件之间的职责更加明确。这样可以降低组件之间的耦合度提高代码的可维护性。 提高代码可读性作用域插槽可以让父组件和子组件的代码更加简洁同时保持清晰的逻辑。这样可以提高代码的可读性便于团队成员理解和维护。
自定义指令有两种类型全局指令和局部指令。
全局指令全局指令是注册在 Vue 构造函数上的指令可以在整个应用程序的任何实例中使用。我们可以使用 Vue.directive() 方法来创建全局指令该方法接受两个参数指令名称和指令对象。指令对象包含指令的行为和样式。
2.自定义指令的作用是什么
1.代码复用通过自定义指令我们可以创建一些通用的功能并将它们封装成指令。这样在开发其他组件时可以方便地复用这些功能减少重复代码。
2.组件解耦自定义指令使得组件之间的通信更加灵活。通过使用局部指令我们可以在不修改组件源代码的情况下为组件添加额外的行为和样式。这有助于提高组件的独立性和可维护性。提高开发效率自定义指令可以帮助我们快速地实现一些特定的功能而不需要逐个修改组件的源代码。这可以大大提高开发效率降低开发成本。 4.提高用户体验通过自定义指令我们可以为用户提供更加丰富的交互体验。例如我们可以创建一个自定义指令来实现自动聚焦功能这样用户在打开页面时焦点会自动定位到某个输入框提高用户体验。
