首页 > 其他 > 详细

前端面试题(Vue篇)

时间:2020-05-12 12:28:58      阅读:79      评论:0      收藏:0      [点我收藏+]

一、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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!