专业网站设计推荐,南阳优化网站排名,工装哪家装修公司好,福州网站推广优化目录 1 插槽-默认插槽1.作用2.需求3.问题4.插槽的基本语法5.代码示例6.总结 2 插槽-后备内容#xff08;默认值#xff09;1.问题2.插槽的后备内容3.语法4.效果5.代码示例 3 插槽-具名插槽1.需求2.具名插槽语法3.v-slot的简写4.总结 4 作用域插槽1.插槽分类2.作用3.场景4.使用… 目录 1 插槽-默认插槽1.作用2.需求3.问题4.插槽的基本语法5.代码示例6.总结 2 插槽-后备内容默认值1.问题2.插槽的后备内容3.语法4.效果5.代码示例 3 插槽-具名插槽1.需求2.具名插槽语法3.v-slot的简写4.总结 4 作用域插槽1.插槽分类2.作用3.场景4.使用步骤5.代码示例6.总结 5 综合案例 - 商品列表-MyTag组件抽离1.需求说明2.代码准备3.my-tag组件封装-创建组件 6 综合案例-MyTag组件控制显示隐藏7 综合案例-MyTag组件进行v-model绑定8 综合案例-封装MyTable组件-动态渲染数据9 综合案例-封装MyTable组件-自定义结构10 单页应用程序介绍1.概念2.具体示例3.单页应用 VS 多页面应用 1 插槽-默认插槽 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.总结
场景组件内某一部分结构不确定想要自定义怎么办
使用插槽的步骤分为哪几步
2 插槽-后备内容默认值
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;
}
/style3 插槽-具名插槽
1.需求
一个组件内有多处结构需要外部传入标签进行定制 上面的弹框中有三处不同但是默认插槽只能定制一个位置这时候怎么办呢?
2.具名插槽语法
多个slot使用name属性区分名字 template配合v-slot:名字来分发对应标签 3.v-slot的简写
v-slot写起来太长vue给我们提供一个简单写法 v-slot — #
4.总结
组件内 有多处不确定的结构 怎么办?具名插槽的语法是什么v-slot:插槽名可以简化成什么?
4 作用域插槽
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.作用域插槽的作用是什么
2.作用域插槽的使用步骤是什么
5 综合案例 - 商品列表-MyTag组件抽离 1.需求说明
my-tag 标签组件封装
(1) 双击显示输入框输入框获取焦点
(2) 失去焦点隐藏输入框
(3) 回显标签信息
(4) 内容修改回车 → 修改标签信息
my-table 表格组件封装
(1) 动态传递表格数据渲染
(2) 表头支持用户自定义
(3) 主体支持用户自定义
2.代码准备
templatediv classtable-casetable classmy-tabletheadtrth编号/thth名称/thth图片/thth width100px标签/th/tr/theadtbodytrtd1/tdtd梨皮朱泥三绝清代小品壶经典款紫砂壶/tdtdimg srchttps://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg //tdtddiv classmy-tag!-- input classinputtypetextplaceholder输入标签/ --div classtext茶具/div/div/td/trtrtd1/tdtd梨皮朱泥三绝清代小品壶经典款紫砂壶/tdtdimg srchttps://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg //tdtddiv classmy-tag!-- inputrefinpclassinputtypetextplaceholder输入标签/ --div classtext男靴/div/div/td/tr/tbody/table/div
/templatescript
export default {name: TableCase,components: {},data() {return {goods: [{id: 101,picture:https://yanxuan-item.nosdn.127.net/f8c37ffa41ab1eb84bff499e1f6acfc7.jpg,name: 梨皮朱泥三绝清代小品壶经典款紫砂壶,tag: 茶具,},{id: 102,picture:https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg,name: 全防水HABU旋钮牛皮户外徒步鞋山宁泰抗菌,tag: 男鞋,},{id: 103,picture:https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png,name: 毛茸茸小熊出没儿童羊羔绒背心73-90cm,tag: 儿童服饰,},{id: 104,picture:https://yanxuan-item.nosdn.127.net/56eb25a38d7a630e76a608a9360eec6b.jpg,name: 基础百搭儿童套头针织毛衣1-9岁,tag: 儿童服饰,},],}},
}
/scriptstyle langless scoped
.table-case {width: 1000px;margin: 50px auto;img {width: 100px;height: 100px;object-fit: contain;vertical-align: middle;}.my-table {width: 100%;border-spacing: 0;img {width: 100px;height: 100px;object-fit: contain;vertical-align: middle;}th {background: #f5f5f5;border-bottom: 2px solid #069;}td {border-bottom: 1px dashed #ccc;}td,th {text-align: center;padding: 10px;transition: all 0.5s;.red {color: red;}}.none {height: 100px;line-height: 100px;color: #999;}}.my-tag {cursor: pointer;.input {appearance: none;outline: none;border: 1px solid #ccc;width: 100px;height: 40px;box-sizing: border-box;padding: 10px;color: #666;::placeholder {color: #666;}}}
}
/style3.my-tag组件封装-创建组件
MyTag.vue
templatediv classmy-tag!-- inputclassinputtypetextplaceholder输入标签 / --div classtext茶具/div/div
/templatescript
export default {}
/scriptstyle langless scoped
.my-tag {cursor: pointer;.input {appearance: none;outline: none;border: 1px solid #ccc;width: 100px;height: 40px;box-sizing: border-box;padding: 10px;color: #666;::placeholder {color: #666;}}
}
/styleApp.vue
template...tbodytr....tdMyTag/MyTag/td/tr/tbody...
/template
script
import MyTag from ./components/MyTag.vue
export default {name: TableCase,components: {MyTag,},..../script6 综合案例-MyTag组件控制显示隐藏
MyTag.vue
templatediv classmy-taginputv-ifisEditv-focusrefinpclassinputtypetextplaceholder输入标签 blurisEdit false /div v-elsedblclickhandleClickclasstext茶具/div/div
/templatescript
export default {data () {return {isEdit: false}},methods: {handleClick () {this.isEdit true}}
}
/script main.js
// 封装全局指令 focus
Vue.directive(focus, {// 指令所在的dom元素被插入到页面中时触发inserted (el) {el.focus()}
})7 综合案例-MyTag组件进行v-model绑定
App.vue
MyTag v-modeltempText/MyTag
scriptexport default {data(){tempText:水杯}}
/scriptMyTag.vue
templatediv classmy-taginputv-ifisEditv-focusrefinpclassinputtypetextplaceholder输入标签:valuevalueblurisEdit falsekeyup.enterhandleEnter/div v-elsedblclickhandleClickclasstext{{ value }}/div/div
/templatescript
export default {props: {value: String},data () {return {isEdit: false}},methods: {handleClick () {this.isEdit true},handleEnter (e) {// 非空处理if (e.target.value.trim() ) return alert(标签内容不能为空)this.$emit(input, e.target.value)// 提交完成关闭输入状态this.isEdit false}}
}
/script 8 综合案例-封装MyTable组件-动态渲染数据
App.vue
templatediv classtable-caseMyTable :datagoods/MyTable/div
/templatescript
import MyTable from ./components/MyTable.vue
export default {name: TableCase,components: { MyTable},data(){return {....}},
}
/script MyTable.vue
templatetable classmy-tabletheadtrth编号/thth名称/thth图片/thth width100px标签/th/tr/theadtbodytr v-for(item, index) in data :keyitem.idtd{{ index 1 }}/tdtd{{ item.name }}/tdtdimg:srcitem.picture//tdtd标签内容!-- MyTag v-modelitem.tag/MyTag --/td/tr/tbody/table
/templatescript
export default {props: {data: {type: Array,required: true}}
};
/scriptstyle langless scoped.my-table {width: 100%;border-spacing: 0;img {width: 100px;height: 100px;object-fit: contain;vertical-align: middle;}th {background: #f5f5f5;border-bottom: 2px solid #069;}td {border-bottom: 1px dashed #ccc;}td,th {text-align: center;padding: 10px;transition: all .5s;.red {color: red;}}.none {height: 100px;line-height: 100px;color: #999;}
}/style9 综合案例-封装MyTable组件-自定义结构
App.vue
templatediv classtable-caseMyTable :datagoodstemplate #headth编号/thth名称/thth图片/thth width100px标签/th/templatetemplate #body{ item, index }td{{ index 1 }}/tdtd{{ item.name }}/tdtdimg:srcitem.picture//tdtdMyTag v-modelitem.tag/MyTag/td/template/MyTable/div
/templatescript
import MyTag from ./components/MyTag.vue
import MyTable from ./components/MyTable.vue
export default {name: TableCase,components: {MyTag,MyTable},data () {return {....}
}
/script
MyTable.vue
templatetable classmy-tabletheadtrslot namehead/slot/tr/theadtbodytr v-for(item, index) in data :keyitem.idslot namebody :itemitem :indexindex /slot/tr/tbody/table
/templatescript
export default {props: {data: {type: Array,required: true}}
};
/script10 单页应用程序介绍
1.概念
单页应用程序SPA【Single Page Application】是指所有的功能都在一个html页面上实现
2.具体示例
单页应用网站 网易云音乐 https://music.163.com/
多页应用网站京东 https://jd.com/
3.单页应用 VS 多页面应用 单页应用类网站系统类网站 / 内部网站 / 文档类网站 / 移动端站点
多页应用类网站公司官网 / 电商类网站
