vue前端面试题整合

最新推荐文章于 2023-05-16 15:24:49 发布

_ouo_

最新推荐文章于 2023-05-16 15:24:49 发布

阅读量2.1k

点赞数 1

分类专栏：面试前端 vue 文章标签： vue 面试前端

本文链接：https://blog.csdn.net/zerogf/article/details/105544494

版权

前端同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

vue

9 篇文章 0 订阅

订阅专栏

面试

6 篇文章 0 订阅

订阅专栏

评判标准：

1.基础能力：
2.综合能力：
3.综合素质：
4.职业匹配性：

一、基础必备

Vue等单页应用的优缺点

优点：Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件，核心是响应式系统。
缺点：不支持低版本浏览器，最低仅支持ie9；不利于SEO的优化，首页加载耗时相对偏长一些。

vue.js的两个核心是什么？

数据驱动
组件系统

!! vue的优点是什么？

低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可复用性：你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

!! Vue组件间的参数传递

1）父组件与子组件传值

父组件传给子组件：子组件通过props方法接受数据;
子组件传给父组件：$emit方法传递参数。

2）非父子组件间的数据传递，兄弟组件传值
eventBus：就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。

3）高级组件
provide / inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。
4) 全局
使用vuex进行全局传值。

vue常用的修饰符？

.prevent: 提交事件不再重载页面；
.stop: 阻止单击事件冒泡；
.self:当事件发生在该元素本身而不是子元素的时候会触发；
.capture: 事件侦听，事件发生的时候会调用

!! vue中key值的作用？

key的作用：主要是为了高效的更新虚拟DOM。避免dom节点复用，让每一次数据改变都重新渲染dom节点。
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

v-model 是什么？怎么使用？ vue中标签怎么绑定事件

v-model ：可以实现双向绑定，
绑定事件：<input @click=“rdhub.cn” />

axios 是什么？

axios ：是请求后台资源的模块。

自定义指令(v-check, v-focus) 的方法有哪些? 它有哪些钩子函数? 还有哪些钩子函数参数

全局定义指令：在 vue 对象的 directive 方法里面有两个参数, 一个是指令名称, 另一个是函数。
组件内定义指令：directives
钩子函数: bind(绑定事件出发)、inserted(节点插入时候触发)、update(组件内相关更新)，钩子函数参数： el、binding。

说出至少 4 种 vue 当中的指令和它的用法

v-if(判断是否隐藏)、
v-for(把数据遍历出来)、
v-bind(绑定属性)、
v-model(实现双向绑定)

vue-router 是什么?它有哪些组件

vue-router ：是 vue 的路由插件
组件：router-link 、router-view

另一种方式实现 Vue 的响应式原理

Vue 的响应式原理是使用 Object.defineProperty 追踪依赖，当属性被访问或改变时通知变化。
有两个不足之处：

数组方面的变动，如根据索引改变元素；
以及直接改变数组长度时的变化，不能被检测到。

!! vue 的双向绑定的原理是什么

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过==Object.defineProperty()==来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。具体步骤：

第一步：需要监听器（observe）的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化。
第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。
第三步：订阅者（Watcher）是Observer和Compile之间通信的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。
第四步：mvvm入口函数，整合Observer、Compile和Watcher三者。

通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。

谈谈对Object.defineProperty() 方法的理解

该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。
Object.defineProperty(obj, prop, descriptor)

obj：需要定义属性的对象
prop：需要定义的属性
descriptor：属性的描述描述符

返回值：返回此对象。[举个例子]

let  obj = Object.create(null);
let descriptor = {
    configurable:false,
    writable:false,
    enumerable:false,
    value:'hello world'
};
Object.defineProperty(obj,'hello',descriptor);
console.log(obj.hello);//hello world

Vue 的响应式原理中 Object.defineProperty 有什么缺陷？为什么在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？

Object.defineProperty：

无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应；
只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。

Proxy

可以劫持整个对象，并返回一个新的对象。
不仅可以代理对象，还可以代理数组，还可以代理动态增加的属性。
Proxy用于修改某些操作的默认行为，也可以理解为在目标对象之前架设一层拦截，外部所有的访问都必须先通过这层拦截，因此提供了一种机制，可以对外部的访问进行过滤和修改。这个词的原理为代理，在这里可以表示由它来“代理”某些操作，译为“代理器”。

var proxy = new Proxy(target, handler);

代理模式 Proxy 的作用

拦截和监视外部对对象的访问
降低函数或类的复杂度
在复杂操作前对操作进行校验或对所需资源进行管理

单次接收事件或者移除事件Listeners

如果你只想监听一次该事件。可以使用 this. $e v e n t .$ once(channel: string,
callback(payload1, payload2, …))，事件触发一次后将移除事件。
如果你想移除自定义事件监听器，你可以使用this. $e v e n t .$ off([event, callback]);
来实现。该方法如果没有提供参数，则移除所有的事件监听器；如果只提供事件，则移除该事件所有的监听器；如果同时提供了事件与回调，则只移除这个回调的监听器。

子组件为何不可以修改父组件传递的 Prop

为何不能修改：为了保证数据的单向流动，便于对数据进行追踪，避免数据混乱。
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
如果传入的props是基本数据类型，子组件修改父组件传的props会警告，并且修改不成功，如果传入的是引用数据类型，那么修改改引用数据类型的某个属性值时，对应的props也会修改，并且vue不会抱警告。
vue数据传递是单项数据流，如果父组件传递过来的props为引用类型，直接修改了props的值会导致其他用到此props的子组件的值也发生改变，导致数据混乱，以及难以追踪的bug。如果props是基础类型，不会造成其他影响，但也会是整个组件数据混乱。

react和vue有哪些不同，说说你对这两个框架的看法

相同点

都支持服务器端渲染；
都有Virtual DOM,
组件化开发,
通过props参数进行父子组件数据的传递,
都实现webComponent规范；
数据驱动视图；
都有支持native的方案,React的React native,Vue的weex。

不同点

React严格上只针对MVC的view层,Vue则是MVVM模式;
virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制;
组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即’all in js’; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;
数据绑定: vue实现了数据的双向绑定,react数据流动是单向的;
state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理。

二、vuex

vuex 是什么？

vuex ：是专门为 vue 开发的数据状态管理模式，组件之间数据状态共享。 vuex 就是一个仓库，仓库里放了很多对象。

vuex有哪几种属性

有 5 种，分别是： state、getter、mutation、action、module

vuex的流程

页面通过mapAction异步提交事件到action。
action通过commit把对应参数同步提交到mutation。
mutation会修改state中对于的值。
最后通过getter把对应值跑出去，在页面的计算属性中，通过mapGetter来动态获取state中的值。

vuex 的 state 特性是什么

state 就是数据源存放地，对应于一般 vue 对象里面的 data 。
state 里面存放的数据是响应式的，vue 组件从store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新。
它通过 mapState 把全局的state映射到当前组件的 computed 计算属性。

vuex 的 getter 特性是什么

getter 可以对 state 进行计算操作，它就是 store 的计算属性
虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用
如果一个状态只在一个组件内使用，是可以不用 getters

vuex 的mutation 特性是什么

vuex 的 action 特性是什么

类似于 muation, 不同在于action 提交的是 mutation,而不是直接变更状态。
action 可以包含任意异步操作。

vuex的module特性是什么

module其实只是解决了当state中很复杂臃肿的时候。
module可以将store分割成模块，每个模块中拥有自己的state、mutation、action和getter。

vue 中 ajax 请求代码应该写在组件内还是vuex 的action中

如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里；
如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回。

不用 vuex 会带来什么问题

可维护性会下降，你要修改数据，你得维护3个地方。
可读性下降，因为一个组件里的数据，你根本就看不出来是从哪里来的。
增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

pc端页面刷新时实现vuex缓存

办法一：将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）。
办法二：在页面刷新的时候再次请求远程数据，使之动态更新vuex数据。
办法三：在父页面向后台请求远程数据，并且在页面刷新前将vuex的数据先保存至sessionStorage（以防请求数据量过大页面加载时拿不到返回的数据）
分析：
办法一的缺点是不安全，不适用大数据量的存储；
办法二适用于少量的数据，并且会出现网络延迟；
办法三是要讲的重点，办法二和办法一一起使用。

三、生命周期面试题

什么是 vue 生命周期

vue 实例从创建到销毁的过程就是生命周期。
也就是从开始创建、初始化数据、编译模板、挂在 dom -> 渲染、更新 ->
渲染、卸载等一系列过程。

vue生命周期的作用是什么

生命周期中有多个事件钩子，让我们在控制整个 vue 实例的过程时更容易形成好的逻辑。

vue生命周期总共有几个阶段

8个阶段：创建前/后、载入前/后、更新前/后、销毁前/后。

beforeCreate----创建前组件实例更被创建，组件属性计算之前，数据对象data都为undefined，未初始化。
created----创建后组件实例创建完成，属性已经绑定，数据对象data已存在，但dom未生成，$ el未存在。
beforeMount—挂载前 vue实例的$el和data都已初始化，挂载之前为虚拟的dom节点，data.message未替换。
mounted-----挂载后 vue实例挂载完成，data.message成功渲染。
== beforeUpdate==----更新前当data变化时，会触发beforeUpdate方法。
updated----更新后当data变化时，会触发updated方法 beforeDestory—销毁前组件销毁之前调用。
destoryed—销毁后组件销毁之后调用，对data的改变不会再触发周期函数，vue实例已解除dom监听和数据绑定，但dom结构依然存在。

第一次页面加载会触发哪几个钩子

第一次加载会触发： beforeCreate、created、beforeMount、mounted。

DOM 渲染在哪个周期中就已经完成

 mounted

简述每个周期具体适合哪些场景

beforecreate : 可以在这加个loading事件，在加载实例时触发。
created :初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用。
mounted : 挂载元素，获取到DOM节点。
updated : 如果对数据统一处理，在这里写上相应函数。
beforeDestroy : 可以做一个确认停止事件的确认框。

请列举出3个Vue中常用的生命周期钩子函数?

created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $ el属性目前还不可见
mounted: el被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
activated: keep-alive组件激活时调用。

四、vue-router

前端路由原理的核心

更新视图但不重新请求页面。

大型单页应用最显著特点

就是采用的前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。

vue路由怎么实现的

vue-router的两种模式区别以及使用注意事项

vue-router 默认 hash 模式，还有一种是history模式。

hash模式特点：

hash虽然在URL中，但不被包括在HTTP请求中，用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
可以为hash的改变添加监听事件：

window.addEventListener("hashchange",funcRef,false)

每一次改变hash(window.location.hash)，都会在浏览器访问历史中增加一个记录。
hash模式的工作原理是hashchange事件，可以在window监听hash的变化。我们在url后面随便添加一个#xx触发这个事件。

 window.onhashchange = function(event) {
    console.log(event.oldURL, event.newURL);
    let hash = loaction.hash  //通过location对象来获取hash地址
    console.log(hash)    // "#/notebooks/260827/list"  从#号开始
}

因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用

history路由

随着history api的到来，前端路由开始进化了,前面的hashchange，你只能改变#后面的url片段，而history api则给了前端完全的自由。history api可以分为两大部分，切换和修改，参考MDN切换历史状态包括back,forward,go三个方法，对应浏览器的前进，后退，跳转操作，有同学说了，(谷歌)浏览器只有前进和后退，没有跳转，嗯，在前进后退上长按鼠标，会出来所有当前窗口的历史记录，从而可以跳转(也许叫跳更合适)：

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

完整的导航解析流程

导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

route和router的区别

route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

active-class 是哪个组件的属性？嵌套路由怎么定义

active-class 是 vue-router 模块的 router-link 组件的属性。
使用children 定义嵌套路由。

怎么定义 vue-router 的动态路由? 怎么获取传过来的值

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

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

三种。
(1)、全局导航钩子

router.beforeEach(to, from, next)
router.beforeResolve(to, from,next)
router.afterEach(to, from ,next)

(2)、组件内钩子

beforeRouteEnter()
beforeRouteUpdate()
beforeRouteLeave()

(3)、单独路由独享组件
　 beforeEnter()

谈谈Vue中的MVVM模式

MVVM全称是：Model-View-ViewModel。
Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步。
DOMListeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；
DataBindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。
ViewModel是Vue的核心，它是Vue的一个实例。

mvvm和mvc区别？

mvc和mvvm其实区别并不大，都是一种设计思想。
主要就是mvc中Controller演变成mvvm中的viewModel。
mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
当 Model频繁发生变化，开发者需要主动更新到View 。

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

mvvm 是 model + view + viewmodel 框架，通过 viewmodel 连接数据模型model 和 view。
区别：vue 是数据驱动，通过数据来显示视图层而不是节点操用。
场景：数据操作比较多的场景，更加快捷。

Vue 组件 data 为什么必须是函数

组件是可复用的 Vue 实例，且带有一个名字；
如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

Vue computed 实现
从两个问题出发：
建立与其他属性（如：data、 Store）的联系；
属性改变后，通知计算属性重新计算。
实现时，主要如下
初始化 data，使用 Object.defineProperty 把这些属性全部转为 getter/setter。
初始化 computed, 遍历 computed 里的每个属性，每个 computed 属性都是一个 watch 实例。每个属性提供的函数作为属性的 getter，使用 Object.defineProperty 转化。
Object.defineProperty getter 依赖收集。用于依赖发生变化时，触发属性重新计算。
若出现当前 computed 计算属性嵌套其他 computed 计算属性时，先进行其他的依赖收集。

Vue complier 实现
Vue complier 是将 template 转化成一个 render 字符串。
可以简单理解成以下步骤：
parse 过程，将 template 利用正则转化成 AST 抽象语法树。
optimize 过程，标记静态节点，后 diff 过程跳过静态节点，提升性能。
generate 过程，生成 render 字符串。

怎么快速定位哪个组件出现性能问题。
主要是用 timeline 工具。大意是通过 timeline 来查看每个函数的调用时常，定位出哪个函数的问题，从而能判断哪个组件出了问题。

WebSocket
由于 http 存在一个明显的弊端（消息只能有客户端推送到服务器端，而服务器端不能主动推送到客户端），导致如果服务器如果有连续的变化，这时只能使用轮询，而轮询效率过低，并不适合。于是 WebSocket 被发明出来。
相比与 http 具有以下有点：
支持双向通信，实时性更强；
可以发送文本，也可以二进制文件；
协议标识符是 ws，加密后是 wss ；
较少的控制开销。连接创建后，ws客户端、服务端进行数据交换时，协议控制的数据包头部较小。在不包含头部的情况下，服务端到客户端的包头只有2~10字节（取决于数据包长度），客户端到服务端的的话，需要加上额外的4字节的掩码。而HTTP协议每次通信都需要携带完整的头部；
支持扩展。ws协议定义了扩展，用户可以扩展协议，或者实现自定义的子协议。（比如支持自定义压缩算法等）
无跨域问题。
实现比较简单，服务端库如 socket.io、ws ，可以很好的帮助我们入门。而客户端也只需要参照 api 实现即可。

<keep-alive</keep-alive的作用是什么?
keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。使用方法:

参数解释
include - 字符串或正则表达式，只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。
使用示例

vue等单页面应用（spa）及其优缺点

优点：

Vue的目标是通过尽可能简单的 API实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。
MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好；
即第一次就将所有的东西都加载完成，因此，不会导致页面卡顿。

缺点：

不支持低版本的浏览器，最低只支持到IE9；
不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；
第一次加载首页耗时相对长一些；
不可以使用浏览器的导航按钮需要自行实现前进、后退。

vue-cli如何新增自定义指令？

1.创建局部指令

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    dire ctives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

2.全局指令

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

3.指令的使用

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

为什么要进行前后端分离？前后端分离的优势在哪里？劣势在哪里？

优势：

前端专门负责前端页面和特效的编写；
后端专门负责后端业务逻辑的处理；
前端追求的是页面美观、页面流畅、页面兼容等；
后端追求的是三高（高并发、高可用、高性能）；
让他们各自负责各自的领域，让专业的人负责处理专业的事情；
提高开发效率。

缺点：

当接口发生改变的时候，前后端都需要改变；
当发生异常的时候，前后端需要联调–联调是非常浪费时间的。

说说你对前后端分离的开发模式的理解

1.前端静态化
前端有且仅有静态内容,再明确些,只有HTML/CSS/JS.
其内容来自于完全静态的资源而不需要任何后台技术进行动态化组装.
前端内容的运行环境和引擎完全基于浏览器本身.
2.后端数据化
后端可以用任何语言,技术和平台实现,但它们必须遵循一个原则
只提供数据,不提供任何和界面表现有关的内容.
3.平台无关化
前端3大技术本身就是平台无关的,而后台连接部分的本质是实现合适的Restful接口和交互Json数据,就这2者而言,
任何技术和平台都可以实现.
4.构架分离化
后端构架几乎可以基于任何语言和平台的任何解决方案,
大型构架方面, RestTful Api可以考虑负载均衡;而数据,
业务实现等可以考虑数据库优化和分布式
但总而言之,前后端的分离也实现了前后端构架的分离.

解决非工程化项目初始化页面闪动问题
vue页面在加载的时候闪烁花括号{}}，v-cloak指令和css规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。
/css样式/
[v-cloak] {
display: none;
}

{{item.text}}

v-for产生的列表，实现active的切换

v-model语法糖的使用

此时mes值就与input的值进行双向绑定
实际上上面的代码是下面代码的语法糖。
要理解这行代码，首先你要知道 input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 oninput ，把最新的value传递给 mes。从而实现了v-model

如何混合开发

项目开发流程

vue打包和运行
（1）项目打包
终端运行命令 npm run build
（2）运行打包项目
需要开启服务运行
使用http-server 运行（如没有安装http-server的，使用node 全局安装 http-server 即可，cnpm install http-server -g）
cd dist
http-server

_ouo_

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
vue前端面试题整合

一、基础必备Vue等单页应用的优缺点优点：Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件，核心是响应式系统。缺点：不支持低版本浏览器，最低仅支持ie9；不利于SEO的优化，首页加载耗时相对偏长一些。vue.js的两个核心是什么？数据驱动组件系统vue的优点是什么？低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定...
复制链接

扫一扫

专栏目录