一、Vue组件的scoped的作用
在style中加scoped属性,表示它的样式作用于当下模块,很好的实现样式私有化的目的
但是在很多时候我们都要对公共样式进行调整 但是写在scoped属性下无作用
解决方法:
1、混合型使用<style>/*全局样式*/</style>
<style scoped>/*本地样式*/</style>
2、深度作用选择器 >>> 如果想在scoped中影响到子组件的样式可以使用 <style scoped>.a>>>.b{}</style>
二、v-on可以监听绑定多个方法?(可以)
一个元素绑定多个事件的写法:<button v-on=‘{click:clickBtn,mouseleave:mouseLeave}‘>comeHere</button>
methods方法中:<button @click=‘a(),b()‘>comeHere</button>
三、Vue中使用event对象
<button @click=‘Event($event)‘>对象事件</button>
四、Vue中如何编写可复用组件
https://blog.csdn.net/qq_38563845/article/details/77524934
①创建组件页面eg Toast.vue;
②用Vue.extend()扩展一个组件构造器,再通过实例化组件构造器,就可创造出可复用的组件
③将toast组件挂载到新创建的div上;
④把toast组件的dom添加到body里;
⑤修改优化达到动态控制页面显示文字跟显示时间
import Vue from ‘vue‘;
import Toast from ‘@/components/Toast‘; //引入组件
let ToastConstructor = Vue.extend(Toast) // 返回一个“扩展实例构造器”
let myToast = (text,duration)=>{
let toastDom = new ToastConstructor({
el:document.createElement(‘div‘) //将toast组件挂载到新创建的div上
})
document.body.appendChild( toastDom.$el ) //把toast组件的dom添加到body里
toastDom.text = text;
toastDom.duration = duration;
// 在指定 duration 之后让 toast消失
setTimeout(()=>{
toastDom.isShow = false;
}, toastDom.duration);
}
export default myToast;
前端面试题(Vue篇)
原文:https://www.cnblogs.com/qlb-7/p/12875145.html