如何在云主机上建设网站,北京海淀网站建设公司,免费推广网站大全网,企业网站案列一、学习目标
1.自定义指令
基本语法#xff08;全局、局部注册#xff09;指令的值v-loading的指令封装
2.插槽
默认插槽具名插槽作用域插槽
二、自定义指令
1.指令介绍 内置指令#xff1a;v-html、v-if、v-bind、v-on… 这都是Vue给咱们内置的一些指令#xff0c;…一、学习目标
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-指令名。如input typetext v-focus/ 注册指令时不用加v-前缀但使用时一定要加v-前缀
4.指令中的配置项介绍 inserted:被绑定元素插入父节点时调用的钩子函数 el使用指令的那个DOM元素
三、自定义指令-指令的值
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}}
}四、插槽-默认插槽
1.作用
让组件内部的一些 结构 支持 自定义 2.需求
将需要多次显示的对话框,封装成一个组件
3.问题
组件的内容部分不希望写死希望能使用的时候自定义。怎么办
4.插槽的基本语法
组件内需要定制的结构部分改用slot/slot占位使用组件时, MyDialog/MyDialog标签内部, 传入结构替换slot给插槽传入内容时可以传入纯文本、html标签、组件 5.代码示例
MyDialog.vue
templatediv classdialogdiv classdialog-headerh3友情提示/h3span classclose✖️/span/divdiv classdialog-content!-- 1. 在需要定制的位置使用slot占位 --slot/slot/divdiv classdialog-footerbutton取消/buttonbutton确认/button/div/div
/templatescript
export default {data () {return {}}
}
/scriptstyle scoped/style
App.vue
templatediv!-- 2. 在使用组件时组件标签内填入内容 --MyDialogdiv你确认要删除么/div/MyDialogMyDialogp你确认要退出么/p/MyDialog/div
/templatescript
import MyDialog from ./components/MyDialog.vue
export default {data () {return {}},components: {MyDialog}
}
/scriptstyle
body {background-color: #b3b3b3;
}
/style五、插槽-后备内容默认值
1.问题
通过插槽完成了内容的定制传什么显示什么, 但是如果不传则是空白 能否给插槽设置 默认显示内容 呢
2.插槽的后备内容
封装组件时可以为预留的 slot 插槽提供后备内容默认内容。
3.语法
在 标签内放置内容, 作为默认显示内容 4.效果 外部使用组件时不传东西则slot会显示后备内容 外部使用组件时传东西了则slot整体会被换掉
六、插槽-具名插槽
1.需求
一个组件内有多处结构需要外部传入标签进行定制
上面的弹框中有三处不同但是默认插槽只能定制一个位置这时候怎么办呢?
2.具名插槽语法 多个slot使用name属性区分名字 template配合v-slot:名字来分发对应标签
3.v-slot的简写
v-slot写起来太长vue给我们提供一个简单写法 #
七、作用域插槽
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
/MyTable
