前端 vue 2024最新面试题

• <input v-bind: value=”something” v-on:input=”something = $event.target.value”>

接受一个value属性 在有新的value属性时触发input事件

• v-model 是动态的双向数据绑定（只能用在input, textarea, select上）

.lazy .trim .number

mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 答：一个model+view+viewModel框架，数据模型model，viewModel连接两个

• 区别：vue数据驱动，通过数据来显示视图层而不是节点操作。

• 场景：数据操作比较多的场景，更加便捷

MVVM

• Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。

• View 代表UI 组件，它负责将数据模型转化成UI 展现出来。

• ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。

• 在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

• MVC有厚重的View Controller，无处安放的网络逻辑，较差的可测试性

请说出vue.cli项目中src目录每个文件夹和文件的用法？

• 答：assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件

vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

• 第一步：在components目录新建你的组件文件（smithButton.vue），script一定要export default {

• 第二步：在需要用的页面（组件）中导入：import smithButton from

• 第三步：’/components/smithButton.vue’

• 第三步：注入到vue的子组件的components属性上面,components:{smithButton}

• 第四步：在template视图view中使用，

• 问题有：smithButton命名，使用的时候则smith-button。

怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

• 答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id

vue-router有哪几种导航钩子？

• 答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件