2024年前端最新Day196，音视频开发工程师面试题

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

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

前端面试题汇总

JavaScript

前端资料汇总

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}

],

});

4. 将路由对象注册到vue实例

const app = new Vue({

el: “#app”,

data: {},

methods: {},

components: {},

router:router //设置路由对象

});

5. 在页面中显示路由的组件

6. 根据连接切换路由

点我注册

点我登录

13.4 router-link使用

作用:用来替换我们在切换路由时使用a标签切换路由

好处:就是可以自动给路由路径加入#不需要手动加入

a标签写法：

点我注册

点我登录

router-link写法：省略了【#】

我要注册

我要登录

总结:

1.router-link 用来替换使用a标签实现路由切换 好处是不需要书写#号直接书写路由路径

2.router-link

to属性： 用来书写路由路径

tag属性:： 用来将router-link渲染成指定的标签

13.5 默认路由

作用:用来在第一次进入界面是显示一个默认的组件

const router = new VueRouter({

routes:[ //配置路由规则

// 因为默认访问的是“/”，使用设置“/”，的component属性，就可以指定默认路由地址

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

//redirect: 用来当访问的是默认路由 “/” 时 跳转到指定的路由展示 【推荐使用】

{path:“/”,redirect:‘/register’},

{path:“/login”,component:login},

{path:“/register”,component:register},

]

});

13.6 路由中参数传递

• 第一种方式传递参数 【传统方式，通过 [?] 的形式】

1. 通过?号形式拼接参数

我要登录

2. 组件中获取参数

const login = {

template:“

用户登录，{{this.KaTeX parse error: Expected 'EOF', got '}' at position 15: route.query.id}̲}，{{this.route.query.name}}

”,

data(){return{}},

methods:{},

created(){

console.log(“【id】==>”+this.$route.query.id+"，【name】==>"+this.$route.query.name);

}

}

---

• 第二种方式传递参数 restful

1. 通过使用路径方式传递参数

：id == {id}

---

我要注册

var router = new VueRouter({

routes:[

{path:‘/register/:id/:name’,component:register} //定义路径中获取对应参数

]

});

2. 组件中获取参数

const register = {

template:“

用户注册，{{this.KaTeX parse error: Expected 'EOF', got '}' at position 16: route.params.id}̲},{{this.route.params.name}}

”,

created(){

console.log(“【id】==>”+this.$route.params.id+"，【name】==>"+this.$route.params.name);

}

};

---

13.7 嵌套路由

1. 声明最外层和内层路由

//商品管理模版，不在vue实例范围内

商品管理

商品添加

商品编辑

//声明组件模版

const product={

template:“#product”

}

const add={

template:“

商品添加

”

};

const update={

template:“

商品编辑

”

}

2. 创建路由对象含有嵌套路由

通过【children属性】，指定嵌套子路由，路径关系的语义被children实现了

//定义路由对象

const router = new VueRouter({

routes:[

{

path:“/product”,

component:product,

children:[ //设置这个路由中的【嵌套路由】

{path:“add”,component:add},

{path:“update”,component:update},

]

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

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