2021-11-10.Vue前端面试题及答案

const vm = new Vue({

methods: {

handlerEvent(event) {

consolelog(event) // 鼠标点击时，获取到事件对象

}

}

})

1、如果只是事件函数的调用，函数名称后面不要添加括号

好处：函数执行时，第一个形式参数会被系统自动注入

一个事件对象，提供给函数使用

@click="handlerEvent"

2、如果事件函数调用执行时，需要传递参数，函数名称后面

必须添加括号，如果要使用事件对象，就必须手工注入(固定语法)

@click="handlerEvent($event)"

事件冒泡是JS语法中的一种事件触发机制，描述的是目标元素上的事件一旦发生，就会根据DOM节点结构，将事件逐步依次触发到父节点上的一种事件机制

原生JS中通过兼容性语法阻止事件冒泡

eventstopPropagationeventstopPropagation():eventcancelBubble=true

Vue中对于事件冒泡的处理进行了封装，提供了事件修饰符完成阻止冒泡行为

固定语法：标签对象的事件属性上，添加 @事件对象stop="处理函数"

self事件修饰符的作用，就是让事件的触发方式只能由当前标签上发生的事件触发！

lazy作为表单修饰符，经常用在表单元素上，用于将表单数据的同步机制延迟到表单元素失去焦点时再进行同步，节省资源、提高整体效率！

Vue数据双向绑定的特性，指代的是Vue实例中的数据和网页视图中的数据绑定，实例中数据的更新会直接影响视图的渲染展示，视图中的数据更新会自动同步到实例中的数据，这样的 *** 作机制就是数据双向绑定机制；Vue底层主要是通过ObjectdefineProperty()数据劫持的 *** 作方式完成的！

数据劫持本质上就是一种变量的高级声明方式，通过数据劫持的语法声明的变量，我们可以针对变量数据的查询、编辑进行监听，随时根据变量的使用情况进行功能的添加，如数据的双向绑定，完成数据的自动同步和自动渲染！

1、npm install mitt 添加mitt

2、单独开一个eventbusts,引入mitt,执行mott库导出的函数获取事件总线对象并暴露；

3、在A组件中引入eventbusts,

发起事件:

emitteremit('updateMenu', {to:'/logList', from:'/statisticalReportsList'});

updateMenu是自定义事件名，后面则为参数携带的参数

4、在B组件中引入eventbusts,

接收事件:

emitteron('updateMenu', msg => {

       consolelog('该更新菜单选中项了', msg)

});

msg是接收的参数。

1、vue 禁止浏览器后退

需求是：需要某个路由不能通过浏览器返回，同时不影响相互之间的切换

整理一下解决方法 和 使用方法：

1在路由配置中给这个路由添加meta信息，比如:

{ path: '/home', component: xxx, meta: {allowBack: false} }

2在全局的routerbeforeEach 函数里面获取allowBack的状态，同时更新vuex的allowBack的值，如：

let allowBack = true // 给个默认值true

if (tometaallowBack !== undefined) {

allowBack = tometaallowBack

}

if (!allowBack) {

historypushState(null, null, locationhref)

}

storedispatch('updateAppSetting', {

allowBack: allowBack

})

这段代码得写在next()的后面，因为写在next()前面locationhref并不是to的地址，这点跟vue10有点不同。

locationhref 获取的仍不是to的地址，所以得根据to的信息来拼起来

3接下来就是最核心的了，在appvue的mounted里面写onpopstate事件：

windowonpopstate = () => { if (!thisallowBack) { // 这个allowBack 是存在vuex里面的变量 historygo(1) } }

2、js禁止页面后退

现在很多的内部系统，一些界面，都是用户手动点击退出按钮的。但是为了避免，用户误 *** 作 点击浏览器后退，或者用鼠标手势后退什么的。容易出现误 *** 作。

所以在有些页面上，适当的禁用浏览器的后退，是可以提高很大的用户体验。

在网上查，可以查到很多js禁用后退的材料。

用的多的方法如下：

1、回退后，产生一个前进事件。

这种方式，不算是一个满意的解决方式。因为用户能体验到，界面的后退，前进。体验不好。

<script type="text/javascript">

//处理键盘事件 禁止后退键（Backspace）密码或单行、多行文本框除外

function banBackSpace(e){

var ev = e || windowevent;//获取event对象

var obj = evtarget || evsrcElement;//获取事件源

var t = objtype || objgetAttribute('type');//获取事件源类型

//获取作为判断条件的事件类型

var vReadOnly = objgetAttribute('readonly');

var vEnabled = objgetAttribute('enabled');

//处理null值情况

vReadOnly = (vReadOnly == null) false : vReadOnly;

vEnabled = (vEnabled == null) true : vEnabled;

//当敲Backspace键时，事件源类型为密码或单行、多行文本的，

//并且readonly属性为true或enabled属性为false的，则退格键失效

var flag1=(evkeyCode == 8 && (t=="password" || t=="text" || t=="textarea")

&& (vReadOnly==true || vEnabled!=true))true:false;

//当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效

var flag2=(evkeyCode == 8 && t != "password" && t != "text" && t != "textarea")

true:false;

//判断

if(flag2){

return false;

}

if(flag1){

return false;

}

}

//禁止后退键 作用于Firefox、Opera

documentbanBackSpace;

//禁止后退键 作用于IE、Chrome

documentbanBackSpace;

</script>

3、终极方案：

也是查找了好多资料才找到的，这种方式，可以消除 后退的所有动作。包括 键盘、鼠标手势等产生的后退动作。

<script language="javascript">

//防止页面后退

historypushState(null, null, documentURL);

windowaddEventListener('popstate', function () {

historypushState(null, null, documentURL);

});

</script>

现在，我们项目中就使用了第三种方式。在常用浏览器中，都可以禁用了后退。

原文链接： >

EventBus 又称事件总线，相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件

废话不多说，直接开始使用 EventBus

要用 EventBus ，首先要初始化一个 EventBus ，这里称它为全局事件总线。

发送事件的语法： this$EventBus$emit(发送的事件名,传递的参数)

已经创建好 EventBus 后我们就需要向它发送需要传递的事件，以便其他组件可以向 EventBus 获取

例子：有两个组件A和B需要通信，他们不是父子组件关系， B 事件需要获得 A 事件里的一组数据 data

接收事件的语法： this$EventBus$on(监听的事件名, 回调函数)

A 组件已经向全局事件总线 EventBus 发送了一个 aMsg 事件，这时B组件就可以去aMsg监听这个事件，并可以获得一些数据。

B组件展示结果：

在上一个例子中，我们A组件向事件总线发送了一个事件 aMsg 并传递了参数 MsgA ，然后 B 组件对该事件进行了监听，并获取了传递过来的参数。但是，这时如果我们离开 B 组件，然后再次进入B组件时，又会触发一次对事件 aMsg 的监听，这时时间总线里就有两个监听了，如果反复进入 B 组件多次，那么就会对 aMsg 进行多次的监听。

1解决办法：在组件离开，也就是被销毁前，将该监听事件给移除，以免下次再重复创建监听

2语法： this$EventBus$off(要移除监听的事件名)

prop

event

style和class

natvie修饰符

$listeners

v-model

sync修饰符

$parent 和 $children

$slots 和 $scopedSlots

ref

最常见的组件通信方式，由父组件向子组件传递。prop可接收一个数组或对象

子组件向父组件发送通知，并传递参数

子组件

父组件

父组件可以向子组件传递style 和 class ，style 和 class将合并到子组件根元素上

父组件

子组件

最终渲染结果

父组件在使用子组件时，在子组件上定义一些属性，这些属性将作用于子组件的根元素上，但是不包括style和class

父组件

子组件

最终渲染结果

Tip：子组件可以通过定义 inheritAttrs：false 来紧张 attribute 附着在子组件根元素上 但不影响通过 $attrs 获取数据

在注册事件时，父组件可以通过 navite 修饰符，将事件注册到子组件根元素上

父组件

子组件

子组件可以通过 $listeners 获取父组件传递过来的所有处理函数

父组件在使用子组件时，可以在子组件上绑定v-model，子组件通过定义model的prop和event还获取父组件定义的值

父组件

<compn v-model=" "datas" />

子组件

和 v-model类似，用于双向数据绑定，不同点在于 v-model只能针对一个数据进行绑定，而 sync 修饰符没有限制

子组件

父组件

在组件内部，可以通过$parent 和$children属性，分别获取当前组件的父组件和子组件实例

ref

在使用组件时，可以通过在组件上定义ref来获取组件实例

provide和inject 可以实现深层组件通信，顶层组件只需定义provide，底层组件通过inject接受数据

顶层组件

如果一个组将改变了地址栏，所有监听地址栏的组将都会做出相应的改变，

vuex 过于笨重，通常不建议在小型项目中使用，小型项目可以使用store 或 eventbus代替vuex，vuex本质上就是一个数据仓库。在此不做过多赘述，先挖一个坑，下回再叙。

store模式其实就是一个普通的js模块，各组件可以导入该模块，将数据放到data里面，此时store就具有响应式了。

tip: store模式的缺点是无法跟踪数据的改变，因为所有组件都可以更改数据

1Mustache（双大括号）:

2v-once：该指令后面不需要跟任何表达式（v-for后面接表达式）,该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

3v-html：v-html会将数据当html标签解析后输出。

4v-text：<h2 v-text="message"></h2>等效于<h2>{{message}}</h2>，但相比于Mustache，它不够灵活。

5v-pre：如<h3 v-pre>{{message}}</h3>，标签显示结果就是它标签本身的内容，即{{message}}。

6v-cloak：解决屏幕闪动的好方法。

7v-bind：基本属性绑定和动态绑定（对象或数组），将对应的或地址等数据放入data中，使用v-bind将数据引用到对应的标签中，如<img v-bind:src="imgUrl" />，其中data数据如下：

v-bind语法糖（简写方式）：<img v-bind:src="imgUrl" />可写为<img :src="imgUrl" />。

8计算属性：其本质就是属性，包含setter和getter，下面是两种 *** 作实例：

<body>标签的内容：

对应vue代码：

一般为只读属性，所以可以省略set，写成如下形式：

9v-on（缩写：@）：绑定事件监听器。一些处理事件的修饰符（可混合使用）：

（1）stop阻止冒泡事件的发生

（2）prevent阻止默认事件的发生，如不用prevent,下面标签的submit指令会调用方法后直接提交服务器 ，即控制台显示的数据会闪过

（3）{keycode|keyAlias}特定键盘键触发回调

（4）once只触发一次回调

10v-show:判断属性。

与v-if区别：v-if在条件为false时，包含v-if指令的元素不会出现在dom中；v-show在条件为false时，只是给元素添加一个行内样式：display:none，元素仍然在dom里面；

注意：当需要在显示与隐藏之间切换频率较高的时候，应该使用v-show（性能更高），当次数较少时通常使用v-if。

11v-for:循环遍历 *** 作。语法：

（1）遍历数组：v-for="(m,index) in movies" //m是新定义的变量名称，index是对应数组的下标，movies是已有的数组名。Index可省略。

（2）遍历对象：<li v-for=”(value,key) in moive”>{{item}}</li> //如果只获取一个值，那么取得的值是value，key可以省略。

12v-model：实现双向绑定（等同于v-on和v-bind一起使用，实现实时显示）。

双向绑定的使用案例：

<body>

<div id="app">

<!-- 基础案例 -->

<!-- <input type="text" v-model="message"/>{{message}} -->

<!-- 当界面产生一个事件，浏览器会生成一个event对象，内部就包含当前输入的值 -->

<input type="text" :value="message" @input="change" /><br />

<h2>文本框输入内容：{{message}}</h2>

<br />

<!-- 单选框 -->

<span>

<label for="male">

<input type="radio" id="male" value="男" v-model="sex" />男

</label>

<label for="female">

<input type="radio" id="female" value="女" v-model="sex" />女

</label>

<h2>你选择的性别是：{{sex}}</h2>

</span>

<!-- 单击选择 -->

<label for="agree">

<input type="checkbox" id="agree" v-model="info" /><span title="点击同意进入下一步">同意协议 </span>

<button :disabled="!info" @click="notice()">next</button>

<br />

<h2 v-if="info==true">你已经同意相关协议</h2>

</label>

<br />

<!-- 复选框 -->

<label>

<input type="checkbox" value="羽毛球" v-model="hobbies" />羽毛球

<input type="checkbox" value="篮球" v-model="hobbies" />篮球

<input type="checkbox" value="足球" v-model="hobbies" />足球

<input type="checkbox" value="乒乓球" v-model="hobbies" />乒乓球

<h2>你的爱好是：{{hobbies}}</h2>

</label>

<!-- v-model:select 分为复选框和单选框 -->

<!-- 单选框 -->

<select name="abc" v-model="fruit">

<option value="西瓜">西瓜</option>

<option value="橘子">橘子</option>

<option value="香蕉">香蕉</option>

<option value="哈密瓜">哈密瓜</option>

</select>

<h2>你选择的水果是：{{fruit}}</h2>

<!-- 多选框 -->

<select multiple="multiple" name="xyZ" v-model="stars" size="5">

<option disabled="disabled">ctrl+单击可复选</option>

<option value="刘德华">刘德华</option>

<option value="梁朝伟">梁朝伟</option>

<option value="黎明">黎明</option>

<option value="库里">库里</option>

</select>

<h2>你选择的明星是：{{stars}}</h2>

<!-- 值绑定 (动态绑定v-model)-->

<label v-for="item in orginHobbies">

<input type="checkbox" :value="item" />{{item}}

</label>

<!-- 修饰符 -->

<!-- 1修饰符：lazy 敲回车时进行绑定-->

<div>

<input type="text" v-modellazy="message" />

<h2>{{message}}</h2>

</div>

<!-- 2修饰符：number转换数据类型 -->

<div>

<input type="number" v-modellazynumber="numberBind" />

<h2>{{numberBind}}-{{typeof numberBind}}</h2>

</div>

<!-- 3修饰符：trim除左右两边空格 -->

<div>

<input type="text" v-modellazy="name" />

<h2>你输入的名字是：{{name}}</h2>

</div>

</div>

<script src="/js/v2610/vuejs"></script>

<script>

let app = new Vue({

el: '#app',

data: {

message: 'hello!!',

sex: '男',

info: false,

orginHobbies: ['橄榄球', '高尔夫球', '乒乓球'],

hobbies: [],

fruit: '橘子',

stars: [],

numberBind: '',

name: ''

},

methods: {

change(event) {

thismessage = eventtargetvalue;

},

notice() {

alert('感谢你同意协议');

}

}

})

</script>

</body>

登录后复制



vuejs

javascript

前端

德国品牌的空气净化器

精选推荐

广告



以上就是关于2021-11-10.Vue前端面试题及答案全部的内容，包括:2021-11-10.Vue前端面试题及答案、vue3组件间传值——事件总线、vue-touch右滑动禁止浏览器返回等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！