网站有做货,wordpress如何设置关键词和描述,产品推广广告,西安网站模板建站前端#xff1a;Vue学习-3 1. 自定义指令2. 插槽2.1 插槽 - 后备内容#xff08;默认值#xff09;2.2 插槽 - 具名插槽2.3 插槽 - 作用域插槽 3. Vue - 路由3.1 路由模块封装3.2 声明式导航 router-link 高亮3.3 自定义匹配的类名3.4 声明式导肮 - 跳转传参3.5 Vue路由 - 重… 前端Vue学习-3 1. 自定义指令2. 插槽2.1 插槽 - 后备内容默认值2.2 插槽 - 具名插槽2.3 插槽 - 作用域插槽 3. Vue - 路由3.1 路由模块封装3.2 声明式导航 router-link 高亮3.3 自定义匹配的类名3.4 声明式导肮 - 跳转传参3.5 Vue路由 - 重定向3.6 Vue路由 - 4043.7 Vue路由 - 模式设置3.8 编程式导航 - 基本跳转传参 1. 自定义指令
自己定义的指令可以封装一些dom操作扩展额外功能。 全局注册在main.js添加如下代码以下代码为输入框自动聚焦。
// focus为指令名
Vue.directive(focus,{inserted(el){el.focus();}
})input typetext v-focus运行结果 局部注册在组件内进行注册只能在当前组件内使用该指令、
directives:{focus:{inserted(el){el.focus();}}}inserted提供的是元素被添加到页面时的逻辑update 指令的值被修改时触发提供值变化后dom更新的逻辑。上述指令并没有给值下述代码为给指令添加值。
templatediv idappp v-colorcolor1北京/pp v-colorcolor2上海/p/div
/template
scriptexport default {name: App,data(){return{color1:red,color2:blue}},directives:{color:{inserted(el,binding){el.style.color binding.value;},update(el,binding){el.style.color binding.value;}}}
}
/script
style scoped#app{width: 100px;height: 100px;margin: 20px auto;}
/style
运行结果 v-指令名“指令值”通过等号绑定指令的值通过binding.value拿到指令的值
封装v-loading指令 本质loading效果就是一个蒙层盖在盒子上数据请求中开启loading状态添加蒙层数据请求完毕关闭loading状态移除蒙层。
templatediv idappdiv v-loadingloading/divdiv哈哈/div/div
/template
scriptexport default {name: App,data(){return{loading:true}},directives:{loading:{inserted(el,binding){binding.value ? el.classList.add(loading):el.classList.remove(loading);},update(el,binding){binding.value ? el.classList.add(loading):el.classList.remove(loading);}}},created(){setTimeout((){this.loading false;},3000);// 等待3秒只是演示效果}
}
/script
style scoped#app{width: 500px;height: 500px;margin: 20px auto;position: relative;}.loading:before{content: ;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgb(242,94,94) url(./static/1.gif) no-repeat center;}
/style
运行效果
2. 插槽
作用让组件内部的一些结构支持自定义可以定制结构或内容。 在组件内需要定制的结构部分改动slot/slot 占位使用组件时在组件内部传入结构替换slot。 注意只有两种插槽默认插槽和具名插槽
MyBase组件
templatedivslot/slot/div
/template使用
MyBase你好/MyBase
MyBase你好2/MyBase这样的效果就是和下述代码一样
div你好
/div
div你好2
/div2.1 插槽 - 后备内容默认值
封装组件时可以为预留的’slot‘插槽提供默认值直接在slot/slot标签内放置内容作为默认显示内容
子组件
templatedivslot你好/slot/div
/templatescript
export default {name:MyBaseSlot
}
/scriptstyle/style父组件
templatediv idappMyBaseSlot/MyBaseSlot MyBaseSlot你好2/MyBaseSlot /div
/template
script
import MyBaseSlot from ./components/MyBaseSlot.vueexport default {name: App,data(){return{loading:true}},components:{MyBaseSlot}
}
/script
style scoped#app{width: 500px;height: 500px;margin: 20px auto;}/style
运行结果
2.2 插槽 - 具名插槽
一个组件内有多处结构需要外部传入标签进行定制。 使用在组件内多个slot使用name属性区分名字在调用该组件时在该组件内使用template配合v-slot:属性名来分发对应标签可以简化为#属性名
子组件MyBaseSlot
templatedivslot namehead标题/slotp什么都不是/pslot namecontenthello world/slot/div
/templatescript
export default {name:MyBaseSlot
}
/scriptstyle/style父组件
templatediv idappMyBaseSlottemplate v-slot:headdiv classtitle我是大标题/div/templatetemplate #contentdiv classcontentp我是内容/pimg src./static/1.jpg alt/div/template/MyBaseSlot/div
/template
script
import MyBaseSlot from ./components/MyBaseSlot.vueexport default {name: App,data(){return{loading:true}},components:{MyBaseSlot}
}
/script
style scoped#app{width: 500px;height: 500px;margin: 20px auto;border: 1px solid black;}.title{width: 100px;height: 40px;line-height: 40px;background-color: red;}.content{width: 200px;height: 240px;}.content img{width: 200px;}
/style
运行结果
2.3 插槽 - 作用域插槽
定义slot插槽时是可以进行传值的。插槽上可以绑定数据将来使用组件时可以用。
给slot标签以添加属性的方式传值所有添加的属性都会被收集到一个对象中在template中通过 ’#插槽名“obj”‘接收默认插槽名为default
templatedivtable stylemargin-left:10px;margin-top:10pxtrthid/thth姓名/thth年龄/thth操作/th/trtr v-foritem in lists :keyitem.idtd{{item.id}}/tdtd{{item.name}}/tdtd{{item.age}}/tdtdslot :iditem.id namebtn/slot/td/tr/table/div
/templatescript
export default {name:MyBaseSlot,props:{lists:Array}
}
/scriptstyletr{height: 40px;}td{width: 40px;text-align: center;line-height: 40px;}table{border: 1px solid black;}
/styletemplatediv idappMyBaseSlot :listslist1template #btnobjbutton clickfn(obj.id)删除/button/template/MyBaseSlot/div
/template
script
import MyBaseSlot from ./components/MyBaseSlot.vueexport default {name: App,data(){return{list1:[{id:1,name:zs,age:12},{id:2,name:ls,age:22},{id:3,name:ww,age:32},{id:4,name:zl,age:19}]}},components:{MyBaseSlot},methods:{fn(id){this.list1 this.list1.filter((item)item.id ! id)}}
}
/script
style scoped#app{width: 500px;height: 500px;margin: 20px auto;border: 1px solid black;}.title{width: 100px;height: 40px;line-height: 40px;background-color: red;}
/style
运行结果
3. Vue - 路由
路径和组件的映射关系。 安装VueRouter
npm install vue-router3.6.5import VueRouter from vue-router
// 引入
Vue.use(VueRouter)
// 安装注册
const router new VueRouter();
// 创建路由对象
注入路由对象到Vue实例中
new Vue({render:hh(App),router
}).$mount(#app)此时的访问路径出现了“#/” 创建views目录用来存储组件配置路由规则。
const router new VueRouter({routes:[{path:/find,component:Find}]
})配置导航配置路由出口(路径匹配的组件显示的位置)
a href’#/find‘发现/a
router-link to/find发现/router-link
router-view/router-viewconst router new VueRouter({routes: [{ path: /find, component: Find },{ path: /myMusic, component: My },{ path: /friend, component: Friend }]
});templatediv idappa href#/find发现音乐/arouter-link to/myMusic我的音乐/router-linkrouter-link to/friend我的朋友/router-linkrouter-view/router-view/div
/template运行结果 组件存放目录问题页面组件放在views目录下复用组件放在components目录下。
3.1 路由模块封装
把路由相关代码用单独js文件来实现提高代码的可读性和可维护性。 index.js
import Vue from vue
import VueRouter from vue-router
import Find from /views/Find.vue
import My from /views/My.vue
import Friend from /views/Friend.vueVue.use(VueRouter);const router new VueRouter({routes: [{ path: /find, component: Find },{ path: /myMusic, component: My },{ path: /friend, component: Friend }]
});export default routermain.js
import router from ./router/index3.2 声明式导航 router-link 高亮
router-link 本质上就是a标签配置其to属性表示路由路径。默认会提供高亮类名。 router-link会自动添加两个高亮类名为router-link-active和router-link-exact-active其中 router-link-active 模糊匹配而router-link-exact-active 为精确匹配。 router-link-active 能够匹配 /find /find/one /find/two router-link-exact-active 只能匹配 /find
3.3 自定义匹配的类名
router-link的两个高亮类名太长了如何进行自定义呢直接在VueRouter中进行配置即可。
const router new VueRouter({routes: [{ path: /find, component: Find },{ path: /myMusic, component: My },{ path: /friend, component: Friend }],linkActiveClass:active,linkExactActiveClass:exact-active
});3.4 声明式导肮 - 跳转传参
查询参数传参 to“/path?参数名值” 对应页面接收传递的参数值
$route.query.参数名templatediv发现音乐p{{$route.query.title}}/p/div
/template动态路由传参 配置动态路由
{ path: /find/:参数名, component: Find },{ path: ‘/find/:参数名?’, component: Find }这种方式表示在不传参时也可以匹配到对应组件如果用上述方式当不传参时则不会匹配到对应的组件。 导航链接为
router-link to/find/我的梦/router-link对应页面租价接收传递过来的值
$route.params.参数名两种传参方式的区别 查询参数传参比较适合多个参数获取方式通过 $route.query.参数名动态路由传参优雅简洁传递单个参数比较方便获取方式通过 $route.params.参数名
3.5 Vue路由 - 重定向
在VueRouter配置项添加redirect如下
const router new VueRouter({routes: [{ path: /, redirect: /find},{ path: /find/:title?, component: Find },{ path: /myMusic, component: My },{ path: /friend, component: Friend }],linkActiveClass:active,linkExactActiveClass:exact-active
});运行结果
3.6 Vue路由 - 404
当路径找不到匹配时给个提示页面新建页面组件NotFound然后在VueRouter配置项最后添加{path:‘*’,component:NotFound}表示前面路径都没有匹配到时跳转到这个NotFound页面。
routes: [{ path: /, redirect: /find},{ path: /find/:title?, component: Find },{ path: /myMusic, component: My },{ path: /friend, component: Friend },{ path: *, component: NotFound}]运行结果
3.7 Vue路由 - 模式设置
两种模式 hash模式(默认)比如http://localhost:8080/#/find history路由比如http://localhost:8080/find 直接在VueRouter配置即可配置如下
const router new VueRouter({routes,mode:history
})3.8 编程式导航 - 基本跳转传参
1.path路径跳转
this.$router.push(/find)
// 简写
this.$router.push({path:/find
})
// 完整写法2.name命名路由跳转适合path路径长的场景
this.$router.push({name:路由名
})// 路由配置为
{name:路由名,path:路径,component:xxx}路由传参 两种传参方式查询参数、动态路由传参 1.查询参数
this.$router.push(/find?title我的梦page1size10)
// 简写
this.$router.push({path:/find,query:{title:我的梦,page:1,size:10}
})
// 详细写法2.动态路由传参
this.$router.push(/find/我的梦)
//或
this.$router.push({path:/find/我的梦
})上述两种方式参数接收方和声明式导航一样。 使用命名路由进行传参 查询参数进行传参 query
this.$router.push({name:路由名,query:{参数名值,...}
})动态路由进行传参 params
this.$router.push({name:路由名,params:{参数名值,}
})
