14.5.1. 组件中定义属于组件的数据
//定义局部用户列表组件配置对象
const users = {
template:“
用户列表-{{count}}-{{name}}
data(){ //用来给当前组件定义一系列数据 注意：在组件中定义的数据只能在当前组件中可用
return {
count:0,
name:“小李”,
};
}
};
14.5.2.组件中事件定义
//定义局部用户列表组件配置对象
const users = {
template:“
用户列表-{{count}}-{{name}}-{{countSqrt}}
<button @click=‘changeCount’>+- {{item}}
data(){ //用来给当前组件定义一系列数据 注意：在组件中定义的数据只能在当前组件中可用
return {
count:0,
name:“小李”,
//items:[“山西”,“北京”,“天津”],
items:[],
};
},
methods:{ //用来给当前组件定义一系列事件
changeCount(){
this.count++;
}
},
computed:{ //用来给当前组件定义一系列计算属性，用来对页面中结果进行二次计算处理时候
countSqrt(){
return this.count*this.count;
}
},
created(){ //组件已经注入了data、methods、computed 相关数据方法
//发送请求
/*axios.get(“/xxx”).then(res=>{
this.items = res.data;
});*/
this.items=[“山西”,“北京”,“天津”];
},
};
总结
1.组件中定义事件和直接在Vue中定义事件基本一致 直接在组件内部对应的html代码上加入@事件名=函数名方式即可
2.在组件内部使用methods属性用来定义对应的事件函数即可,事件函数中this 指向的是当前组件的实例
14.6、向子组件中传递事件并在子组件中调用该事件
在子组件中调用传递过来的相关事件必须使用 this.$emit(‘函数名’) 方式调用
信息：{{msg}} 年龄：{{age}}
<login @aa=“findAll” @test=“test”>
14.7、插槽的使用
怎么理解插槽？
-
slot相当于一个空标签，通过vue可以实现动态改变值和样式，把一块区域内容抽了出来可以实现复用，就和Java里封装的工具类一样。
-
插槽就是子组件中的提供给父组件使用的一个占位符。
-
我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件，但是在实际使用这个组件的时候却又不能完全的满足需求，我希望在这个组件中添加一点东西，这时候我们就需要用到插槽来分发内容。
-
通俗易懂的讲，slot具有“占坑”的作用，在子组件占好了位置，那父组件使用该子组件标签时，新添加的DOM元素就会自动填到这个坑里面
{{msg}}
我是用户自定义aa内容
我是用户自定义bb内容
+++
15.1、路由
路由:根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理
15.2、作用
用来在vue中实现组件之间的动态切换
15.3、使用路由
1、引入路由
//vue 路由js2、创建组件对象
//创建组件配置对象
const users = {
template:“
用户管理
};
const emps = {
template: “
员工管理
}
3、定义路由对象的规则
const router = new VueRouter({
routes:[
{path:‘/users’,component:users}, //用来定义具体得的某个组件路由规则 path:用来指定对应请求路径 component:指定路径对应的组件
{path:‘/emps’, component:emps } //用来定义一些规则
]
});
4、将路由对象注册到vue实例
const app = new Vue({
el:“#app”,
data:{
msg:“vue 中router(路由)的使用”,
},
methods:{},
computed:{},
components:{}, //注册局部组件
router:router, //用来注册路由配置
});
5、在页面中显示路由的组件
5、根据链接切换路由
15.4、router-link使用
作用: 用来替换我们在切换路由时使用a标签切换路由
好处: 就是可以自动给路由路径加入#不需要手动加入
用户管理(link)
员工管理(link)
总结:
1.router-link 用来替换使用a标签实现路由切换 好处是不需要书写#号直接书写路由路径
2.router-link to属性用来书写路由路径 tag属性:用来将router-link渲染成指定的标签
15.5、默认路由
作用: 用来在第一次进入界面是显示一个默认的组件
const router = new VueRouter({
routes:[
//{ path:‘/’,component:login},
{path:‘/’,redirect:‘users’ }, //默认路由规则 redirect:(路由路径重定向)
{path:‘/users’,component:users}, //用户组件路由规则
{path:‘/emps’, component:emps } //员工组件路由规则
]
});
15.6、路由动态切换两种方式
方式一：通过使用标签方式直接进行路由切换
用户管理(link)
员工管理(link)
方式二：通过js代码的方式进行动态切换路由
<button @click=“test”>测试动态路由
const app = new Vue({
el:“#app”,
data:{
msg:“vue 中router(路由)的使用 route-link标签的使用”,
},
methods:{
test(){
console.log(“test”);
//this.$router.push(“/emps”); //代表切换路由路径
//this.$router.push({path:‘/emps’}); //切换路由
this.$router.push({name:“emps”}); //名称方式切换路由 [推荐]
},
},
computed:{},
components:{}, //注册局部组件
router, //注册路由
});
15.7、路由中参数传递
第一种方式传递参数 传统方式
1、通过?号形式拼接参数
用户管理
2、组件中获取参数
const users = {
template:“
用户管理
data(){
return {};
},
methods: {},
created(){
//获取路由路径中参数 1.获取queryString(deptid=21)中传递参数
//this.$route 当前路由对象
//this.$router 路由管理器对象
console.log(“deptid:”,this.$route.query.deptid);
console.log(“name:”,this.$route.query.name);
}
};
第二种方式传递参数 restful
1、通过使用路径方式传递参数
员工管理
const router = new VueRouter({
routes:[
{path:‘/emps/:id/:name’, name:‘emps’,component:emps } //员工组件路由规则
]
});
2、组件中获取参数
const emps = {
template: “
员工管理
data(){
return {};
},
methods: {},
created() {
console.log(“id:”,this.$route.params.id); //获取路径中的参数
console.log(“name:”,this.$route.params.name); //获取路径中的参数
}
}
完整代码
{{msg}}
用户管理
员工管理
15.8、嵌套路由
1、声明最外层和内层路由
商品管理
商品添加
商品编辑
//声明组件模板
const product={
template:‘#product’
};
const add = {
template:‘
商品添加
’};
const edit = {
小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
总结
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。
前端面试题汇总
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
JavaScript
性能
linux
)]
[外链图片转存中…(img-wf7k0FvU-1710706071332)]
[外链图片转存中…(img-IexIKgnq-1710706071332)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-Gh0INJj0-1710706071333)]
总结
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。
前端面试题汇总
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
JavaScript
性能
linux
8570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
