Day196，前端最新实习面试经验总结，前端开发资料分享

说明:通过将组件注册给对应Vue实例中一个components属性来完成组件注册,这种方式不会对Vue实例造成累加

• 第一种开发方式

let login = {

template:‘

用户登录

’

}

const app = new Vue({

el: “#app”,

data: {},

methods: {},

components:{ //用来注册局部组件

login:login //注册局部组件

}

});

//局部组件使用 在Vue实例范围内

• 第二种开发方式

//1.声明局部组件模板 template 标签 注意:【在Vue实例作用范围外声明】

用户登录

//2.定义变量用来保存模板配置对象

let login ={ //具体局部组件名称

template:‘#loginTemplate’ //通过使用id选择器，使用自定义template标签选择器即可

};

//3.注册组件

const app = new Vue({

el: “#app”,

data: {},

methods: {},

components:{ //用来注册局部组件

login:login //注册局部组件

//如果组件名和保存模板配置对象名一样，可以直接使用名字即可

//login

}

});

//4.局部组件使用 在Vue实例范围内

12.3 Prop的使用

作用:props用来给组件传递相应静态数据或者是动态数据的

12.3.1 通过在组件上声明【静态数据传递】给组件内部

总结:

1.使用组件时可以在组件上定义多个属性以及对应数据

2.在组件内部可以使用props数组生命多个定义在组件上的属性名 日后可以在组件中通过{{ 属性名 }} 方式获取组件中属性值

12.3.2 通过在组件上声明【动态数据传递】给组件内部

//1.声明组件模板对象

const login = {

template:‘

欢迎: {{ name }} 年龄:{{ age }}

’,

props:[‘name’,‘age’]

}

//2.注册局部组件

const app = new Vue({

el: “#app”,

data: {

username:“阿昌”,

age:23

},

methods: {},

components:{

login //注册组件

}

});

//3.使用组件

//使用v-bind形式将数据绑定Vue实例中data属性,日后data属性发生变化,组件内部数据跟着变化

12.3.3 prop的单向数据流

单向数据流:所有的 prop 都使得其父子 prop 之间形成了一个**单向下行绑定**：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。—【摘自官网】

12.4 组件中定义数据和事件使用

1. 组件中定义属于组件的数据

//声明组件的配置对象

const login ={

template:“

欢迎：{{msg}}

• {{index}}  {{item}}

”,

data(){ //使用data函数的方式定义组件的数据； 在template属性中通过【{{}}插值表达式】直接获取即可

return {

msg:“hello”,

lists:[‘java’,‘c#’,“c”]

}

}

}

2.组件中事件定义

const login ={

template:“

<input type=‘button’ value=‘点我触发组件中的事件’ @click=‘change’>

”,

data(){

return {

name:“阿昌”,

};

},

methods: {

change(){

alert(this.name); //拿到组件内部的数据

alert(“触发事件”);

}

}

}

总结

1.【组件中定义事件和直接在Vue中定义事件基本一致】 直接在组件内部对应的html代码上加入@事件名=函数名方式即可

2.在组件内部使用methods属性用来定义对应的事件函数即可,事件函数中this 指向的是当前组件的实例

12.5 向子组件中传递事件并在子组件中调用该事件

在子组件中调用传递过来的相关事件必须使用 this.$emit('函数名') 方式调用

<login :name=“username” @aaa=“findAll”>

---

13.Vue中路由(VueRouter)

---

13.1 路由

路由:根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理

13.2 作用

用来在vue中实现组件之间的动态切换

13.3 使用路由

1. 引入路由

//vue 路由js

2. 创建组件对象

//声明组件模板

const login ={

template:“

用户登录

”

}

const register={

template:“

用户注册

”

}

3. 定义路由对象的规则

//创建路由对象

const router = new VueRouter({

routes:[ //设置路由对象的规则

//path： 请求路由的路径

//component: 绑定组件（此处绑定后，就不需要在vue实例的components属性下绑定）

{path:‘/login’,component:login},

{path:‘/register’,component:register}

],

});

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

84MC92Mi0yZGI4MTZiY2JlODkwNjBiMDY1NWIyODdlM2Y4NWVlM19oZC5qcGc?x-oss-process=image/format,png)

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件