黄冈商城网站建设哪家好,在线做爰视频网站,用什么做网站最好,网站的跳出率很高自定义指令
全局注册 和 局部注册 inserted在指令所在的元素 被插入到页面中时#xff0c;触发
main.js
import Vue from vue
import App from ./App.vueVue.config.productionTip false// 1.全局注册指令
Vue.directive(focus, {// inserted在指令所在的元素 被插入到页…自定义指令
全局注册 和 局部注册 inserted在指令所在的元素 被插入到页面中时触发
main.js
import Vue from vue
import App from ./App.vueVue.config.productionTip false// 1.全局注册指令
Vue.directive(focus, {// inserted在指令所在的元素 被插入到页面中时触发inserted(el) {// el就是指令所绑定的元素console.log(el);el.focus()}
})new Vue({render: h h(App),
}).$mount(#app) App.vue
templatediv classapph1自定义指令/h1input v-focus refinp typetext //div
/templatescript
export default {// mounted() {// this.$refs.inp.focus()// }// 2.局部注册指令directives: {focus: {inserted(el) {el.focus()}}}
}
/scriptstyle
/style指令的值 App.vue
templatediv classapph1 v-colorcolor111111/h1h1 v-colorcolor222222/h1/div
/templatescript
export default {data() {return {color1: red,color2: pink}},directives: {color: {// 1.inserted提供的是元素被添加到页面中时的逻辑inserted(el, binding) {// binding.value就是指令的值el.style.color binding.value},// 2.update 指令的值修改的时候触发提供值变化后dom更新的逻辑update(el, binding) {el.style.color binding.value}}}
}
/scriptstyle
/style小结 v-loading 指令封装 App.vue
templatediv classmaindiv classbox v-loadingisLoadingulli 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
import axios from axios// 接口地址http://hmajax.itheima.net/api/news
// 请求方式get
export default {data() {return {list: [],isLoading: true}},async created() {// 1. 发送请求获取数据const res await axios.get(http://hmajax.itheima.net/api/news)setTimeout(() {// 2. 更新到 list 中this.list res.data.datathis.isLoading falseconsole.log(111)}, 2000)console.log(22222)},directives: {loading: {inserted(el, binding) {// if (binding.value true) {// el.classList.add(loading)// } else {// el.classList.remove(loading)// }// 用三元写binding.value? el.classList.add(loading): el.classList.remove(loading)},update(el, binding) {binding.value? el.classList.add(loading): el.classList.remove(loading)}}}
}
/scriptstyle
/* 伪类 - 蒙层效果 */
.loading:before {content: ;position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff url(../public/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默认插槽 MyDialog2.vue
templatediv classMyDialog2div classlog-headerh1友情提示/h1span✖️/span/divhr /div classlog-bodyslot/slot/divdiv classlog-footerbutton classcancel取消/buttonbutton classok确认/button/div/div
/templatescript
export default {}
/scriptstyle scoped
* {margin: 0;padding: 0;box-sizing: border-box;
}
.MyDialog2 {width: 400px;margin: 20px auto;padding: 0 20px;border: 1px black solid;border-radius: 10px;background-color: #fff;
}
.log-header {height: 60px;display: flex;justify-content: space-between;line-height: 60px;
}.log-body {padding: 10px;height: 80px;
}.log-footer {display: flex;justify-content: flex-end;padding-bottom: 10px;
}button.cancel {width: 50px;height: 30px;background-color: #fff;margin-right: 20px;border: black 1px solid;border-radius: 5px;
}button.ok {width: 50px;height: 30px;background-color: #05defa;border: black 1px solid;border-radius: 5px;
}
/styleApp.vue
templatediv classapp!-- 直接写 不用{{}} --MyDialog2确认删除吗 /MyDialog2MyDialog2确认退出吗 /MyDialog2/div
/templatescript
import MyDialog2 from ./components/MyDialog2.vue
export default {components: {MyDialog2}
}
/scriptstyle
body {background-color: #cac2c2;
}
/style后备内容有默认值的 MyDialog.vue
div classlog-bodyslot有后备内容/slot/div Vue.vue div classapp!-- 有数值就照常显示 --MyDialog2确认删除吗 /MyDialog2MyDialog2确认退出吗 /MyDialog2!-- 没数值就显示默认 --MyDialog2 /MyDialog2/div类别2具名插槽 MyDialog2.vue div classMyDialog2div classlog-headerslot namehead/slot/divhr /div classlog-bodyslot namebody有后备内容/slot/divdiv classlog-footerslot namefooter/slot/div/divApp.vue class“cancel” classok等css样式还是在MyDialog.vue里面没动但是还是可以正常渲染yyds
div classappMyDialog2!-- head没有加“”就直接写了哎 --template v-slot:headh1友情提示/h1span✖️/span/templatetemplate v-slot:body 确认删除吗/templatetemplate #footerbutton classcancel取消/buttonbutton classok确认/button/template/MyDialog2/div插槽的传参语法作用域插槽 妙在 App.vue有两个数组要求的两个表格也是显示不同的数据但MyTable.vue里只用写一个table如果写两个反而会出现4个表单而且两次的传数据必须同名,都是data MyTable :datalisttemplate #defaultobjbutton clickdel(obj.row.id)删除/button/template/MyTableMyTable :datalist2template #default{ row }!-- 还能直接结构 --button clickshow(row.id)查看/button/template/MyTableMyTable.vue
templatediv classMyTabletabletheadtrth序号/thth姓名/thth年纪/thth操作/th/tr/theadtbodytr v-for(item, index) in data :keyitem.idtd{{ index 1 }}/tdtd{{ item.name }}/tdtd{{ item.age }}/td!-- 1.给slot标签以添加属性的方式传值 --slot :rowitem msglook test/slot!-- 2.将所有的属性添加到一个对象中 --!-- {row:{id:1,name:sdsdsd,age:13},msg:look test} --/tr/tbody/table/div
/templatescript
export default {props: {data: Array}
}
/scriptstyle
table {border: 1px black solid;border-spacing: 0;
}
td,
th {border: 1px rgb(176, 175, 175) solid;
}
/styleApp.vue
templatediv classapp!-- 传数据是在 MyTable--MyTable :datalist!-- 接收数据 是在templatetemplate v-slot:head制定插槽名字也是在template--!-- 3.通过template #插槽名“变量名” 接收 --template #defaultobjbutton clickdel(obj.row.id)删除/button/template/MyTableMyTable :datalist2template #default{ row }!-- 还能直接结构 --button clickshow(row.id)查看/button/template/MyTable/div
/templatescript
import MyTable from ./components/MyTable.vue
export default {components: {MyTable},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 }]}},methods: {del(tt) {this.list this.list.filter((item) item.id ! tt)},show(tt) {alert(name:${tt.name},age:${tt.age})}}
}
/scriptstyle
/style【综合案例】—— 商品列表 App.vue
templatediv classtable-caseMyTable :mydatagoodstemplate #headth编号/thth名称/thth图片/thth width100px标签/th/template!-- 对应名字并接受数据 --!-- template #bodyobj --!-- 解构 --template #body{ item, index }td{{ index 1 }}/tdtd{{ item.name }}/tdtdimg :srcitem.picture //tdtd!-- 标签组件 --MyTag v-modelitem.tag/MyTag/td/template/MyTable/div
/templatescript
// my-tag 标签组件的封装
// 1. 创建组件 - 初始化
// 2. 实现功能
// (1) 双击显示并且自动聚焦
// v-if v-else dbclick 操作 isEdit
// 自动聚焦
// 法1. $nextTick $refs 获取到dom进行focus获取焦点
// 法2. 封装v-focus指令// (2) 失去焦点隐藏输入框
// blur 操作 isEdit 即可// (3) 回显标签信息
// 回显的标签信息是父组件传递过来的
// v-model实现功能 (简化代码) v-model :value 和 input
// 组件内部通过props接收, :value设置给输入框// (4) 内容修改了回车 修改标签信息
// keyup.enter, 触发事件 $emit(input, e.target.value)// ---------------------------------------------------------------------// my-table 表格组件的封装
// 1. 数据不能写死动态传递表格渲染的数据 props
// 2. 结构不能写死 - 多处结构自定义 【具名插槽】
// (1) 表头支持自定义
// (2) 主体支持自定义
import MyTag from ./components/MyTag.vue
import MyTable from ./components/MyTable.vue
export default {name: TableCase,components: { MyTag, MyTable },data() {return {text: slx,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;}
}
/stylemain.js
import Vue from vue
import App from ./App.vueVue.config.productionTip false// 1.全局注册指令
Vue.directive(focus, {// inserted在指令所在的元素 被插入到页面中时触发inserted(el) {// el就是指令所绑定的元素,binding用不到所以没写console.log(el);el.focus()}
})new Vue({render: h h(App),
}).$mount(#app) MyTable.vue
templatetable classmy-tabletheadtrslot namehead/slot/tr/theadtbodytr v-for(item, index) in mydata :keyitem.id!-- 用作用域插槽将数据绑在插槽 --!-- 以添加属性的方式传值 --slot namebody :itemitem :indexindex/slot/tr/tbody/table
/templatescript
export default {props: {mydata: {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 0.5s;.red {color: red;}}.none {height: 100px;line-height: 100px;color: #999;}
}
/styleMyTag.vue
templatediv classmy-taginputv-ifisEditv-focusrefinpblurisEdit falsekeyup.enterhandleEnter:valuevalueclassinputtypetextplaceholder输入标签/div dblclickhandleClick v-else classtext{{ value }}/div/div
/templatescript
export default {props: {value: String},data() {return {isEdit: false}},methods: {handleClick() {// 切换显示状态this.isEdit true// // 立刻获取焦点 异步// this.$nextTick(() {// this.$refs.inp.focus()// })// 先不用要封装到全局指令main.js// 所以直接v-focus},handleEnter(e) {// 子传父回车时输入框内容提交给父组件更新// 由于父组件是v-model触发事件需要input事件,输入框的 v-model:value input// e.target是触发事件的事件元if (e.target.value.trim() ) {return alert(不能是空)}this.$emit(input, e.target.value)// 回车后提交完成要关闭输入框而不是失去焦点才关上this.isEdit false}}
}
/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;}}
}
/style单页应用程序 SPA - Sinle Page Application 路由
路径 和 组件 的映射关系
VueRouter
作用修改地址栏路径时切换显示匹配的组件
VueRouter 使用 main.js
import Vue from vue
import App from ./App.vueVue.config.productionTip false// 5个基础步骤
// 1.下载
// cnpm i vue-router3.6.5
// 2.引入
import VueRouter from vue-router
import Find from ./views/Find
import Friend from ./views/Friend
import My from ./views/My
// 3.安装注册 Vue.use
Vue.use(VueRouter)// 4.创建路由对象
const router new VueRouter({// routes路由规则 {path:路径components:组件}routes: [// 注意路径 没有./ 是绝对路径{ path: /find, component: Find },{ path: /friend, component: Friend },{ path: /my, component: My},]
})// 5.注入到new Vue中建立关联
new Vue({render: h h(App),// router:router// 简写router
}).$mount(#app)// 2个核心步骤
// 1.建组件src/views/xxxx配规则
// 2.准备导航链接配置路由出口匹配组件所展示的位置 src/views/Find.vue My.vue和Friend.vue同理
templatediv classFindpFind/ppFind/ppFind/p/div
/templatescript
export default {name: MyFind
}
/scriptstyle
/styleApp.vue
templatediv classappdiv classnava href#/find发现/aa href#/friend朋友/aa href#/my我的/a/div!-- 路由出口 匹配组件所展示的位置 --router-view/router-view/div
/templatescript
export default {}
/scriptstyle
.nav a {display: inline-block;width: 50px;height: 30px;text-decoration: none;background-color: #ca8b8b;border: 1px solid black;
}
/stylea href#my我的/a # 起到什么作用
div classappa href#/find发现/aa href#/friend朋友/aa href#my我的/a/div在这里#符号被用作一个锚点anchor。锚点是用来标识页面中的特定部分或位置的标记。当你点击带有#符号的链接时浏览器会滚动到指定的锚点所在的位置将页面的滚动位置调整到对应的元素上。
在给定的代码片段中href属性值中的#后面是一个标识符例如#/find、#/friend和#my。它们会被解释为页面中的锚点并与页面中具有相应id或name属性的元素关联起来。当点击这些链接时浏览器会将滚动位置调整到与相应锚点相关联的元素上。
例如如果存在一个具有idfind的元素当你点击发现时浏览器会滚动到具有idfind的元素所在的位置。
注意在这种情况下#符号后面的字符串不会被发送到服务器它只是本地页面内的导航标识符。 组件存放目录问题
页面组件放在 views 复用组件放在 components
