前端关于Vue的面试题（五）

55.vue组件的scoped属性的作用

当 <style> 标签有scoped 属性时，它的 CSS 只作用于当前组件中的元素
你可以在一个组件中同时使用有 scoped 和 非scoped 样式：<style>
/* 全局样式 */
</style><style scoped>
/* 本地样式 */
</style>

56.vue中集成的UI组件库

常用的UI组件库有：
vux： Vue.js 移动端 UI 组件库
Amaze ~ 妹子 UI
Element：饿了么组件库，适用于开发应用后台
mint-ui：移动端 UI 组件库
Ant-design : 阿里的UI组件库

57.如何适配移动端？【经典】

在css样式兼容性方面，我们可以使用autoprefixer插件

postcss可以被理解为一个平台，可以让一些插件在上面跑。它提供了一个解析器，
可以将CSS解析成抽象语法树。通过PostCSS这个平台，我们能够开发一些插件，
来处理CSS。热门插件如autoprefixer。vue-cli已经自动集成了postcss，所以我们可以在postcss.config.js这个配置文件中直接添加autoprefixer这个插件

在屏幕大小适配方面，我们可以使用下面两种方案

a) 使用flexible和 postcss-px2rem

之前使用rem适配的思路：使用媒体查询，确定不同屏幕下html标签的font-size  (即1rem单位)，
然后在写css样式的时候，就可以使用1rem , 2rem这样的单位来做适配了。但是这种适配的问题是需要手动把px单位换算成rem单位，比较麻烦。对应的，
我们可以使用flexible和 postcss-px2rem来解决这个问题

//1.安装flexible。 flexible主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题
npm install lib-flexible --save//2.main.js引入flexible
import 'lib-flexible'//此时运行程序会看到html中自动加上了font-size    font-size的默认值为viewport的十分之一
//在页面中引入flexible.js后，flexible会在<html>标签上增加一个data-dpr属性和font-size样式（如下图）。//3.安装postcss-pxtorem
npm install postcss-pxtorem --save-dev//4.修改postcss.config.js
module.exports = {plugins: {//autoprefixer 自动补全css前缀的东西'autoprefixer': {//兼容的机型browsers: ['Android >= 4.0', 'iOS >= 7']},'postcss-pxtorem': {rootValue: 37.5, //换算基数，一般和html的font-size一致propList: ['*']  //哪些css属性需要换算}}
};

b) 使用postcss-px-to-viewport

`vw` 与 `vh`单位，以`viewport`为基准，`1vw` 与 `1vh`分别为`window.innerWidth`
与 `window.innerHeight`的百分之一。vw/vh 单位其实出现比较早了，只是以前支持性不太好，现在随着浏览器的发展，
大部分（92%以上）的浏览器已经支持了vw/vh

npm i postcss-px-to-viewport -save -dev//修改postcss.config.js
module.exports = {plugins: {autoprefixer: {//兼容的机型browsers: ['Android >= 4.0', 'iOS >= 7']},//px转换为vw单位的插件"postcss-px-to-viewport": {//1vw = 3.2viewportWidth: 320,//1vh = 5.68viewportHeight: 568,// px to vw无法整除时，保留几位小数unitPrecision: 5,// 转换成vw单位   viewportUnit: 'vw',//不转换的类名selectorBlackList: [],// 小于1px不转换minPixelValue: 1,//允许媒体查询中转换mediaQuery: false,//排除node_modules文件中第三方css文件exclude: /(\/|\\)(node_modules)(\/|\\)/  },}
};

58.vue-cli工程中如何使用背景图？

第一种方法：通过 import 引入

首先，引入要使用的背景图片：
<script type="text/javascript">import  cover  from  "../assets/images/cover.png";export  default{...}
</script>然后，通过 v-bind:style 使用：
<div :style="{ backgroundImage:'url(' + cover + ')' }"></div>

第二种方法：通过 require 引入：

直接通过 v-bind 和 require 配合使用<div :style="{ backgroundImage:'url(' + require('../assets/images/couver.png') + ')' }"></div>

59.vue中如何实现tab切换功能？

在 vue 中，实现 Tab 切换主要有三种方式：
1、使用 component 动态组件实现 Tab切换 [推荐移动端使用]
2、使用 vue-router 路由配合<router-view></router-view>标签实现
3、使用第三方组件

60.vue中如何利用`<keep-alive></keep-alive>`标签实现某个组件缓存功能？

vue-cli工程中实现某个组件的缓存功能，可用 keep-alive 标签与 vue-router的meta形式数据传递配合完成。

//第一步：在 app.vue 里面 template部分 使用 <keep-alive></keep-alive> 组件：<template><div id="app"><keep-alive><router-view v-if="$router.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$router.meta.keepAlive"></router-view></div>
</template>//第二步：在src/router.js:
import account from '../page/demo/account.vue'
import course from '../page/demo/course.vue'export default new Router({routes: [{ path: '/account', name: 'account', component: Account, meta:{keepAlive:false //false为不缓存}}，{ path: '/course', name: 'course', component: course, meta:{keepAlive:true //true为缓存}} ]
})

61.vue中实现切换页面时为左滑出效果

左滑效果实现，需要使用 <transition></transition> 组件配合 css3 动画效果实现。

<div id="app"><!-- 使用transiton来规定页面切换时候的样式--><transition name="slide-left"><router-view></router-view></transition>
</div><style lang="less">/*左滑动效*/.slide-left-enter-active {animation: slideLeft 0.3s;}/*自定义动画*/@keyframes slideLeft {from {transform: translate3d(100%, 0, 0);/*横坐标,纵坐标,z坐标*/visibility: visible;}to {transform: translate3d(0, 0, 0);}}
</style>

62.在vue-cli工程中如何实现无痕刷新？

无痕刷新:在不刷新浏览器的情况下,实现页面的刷新

一般常用的两种刷新方法：
window.location.reload()，原生 js 提供的方法；
this.$router.go(0)，vue 路由里面的一种方法；这两种方法都可以达到页面刷新的目的，简单粗暴，但是用户体验不好，相当于按 F5 刷新页面，
页面的重新载入，会有短暂的白屏。

vue开启无痕刷新

原理：先在全局组件注册一个方法，用该方法控制router-view的显示与否，然后在子组件调用全局方法。//第一步：在app.vue里面设置<template><div id="app"><!--通过切换isRouterAlive的值来控制页面的显示与否--><router-view v-if="isRouterAlive"></router-view></div></template><script>export  default {//给子组件暴露一个方法：这里将当前组件中的reload方法暴露给子组件provide(){return{reload:this.reload}},data(){return {isRouterAlive:true}},methods:{//reload方法中先把isRouterAlive该为false，让router-view不显示//然后在$nextTick方法里面重新把isRouterAlive该为true，让router-view重新显示//$nextTick表示下一次dom更新完毕之后，在更新dom的时候我们让router-view隐藏，更新dom完毕我们让router-view显示，此时就做到了无痕刷新reload(){this.isRouterAlive = false;this.$nextTick(function(){this.isRouterAlive = true;})}}}</script>//第二步：在.vue组件中使用全局方法(先用inject注册全局方法，然后即可通过this调用)<script>export  default{inject:['reload'],mounted(){this.reload();}}</script>

63.vue中中央事件总线？

中央事件总线 ：就是一个名字可以叫做Bus的vue空实例,里边没有任何内容。

它就像一个公交车一样，来回输送人，将组件A输送到组件B，再将组件B输送到组件A；

这里A，B组件可以是父、子组件，也可以是兄、弟组件，或者两个没有任何关系的组件；

我们可以使用中央事件总线这种技术来实现vue组件之间的数据通信。

//1.创建中央事件总线
var bus = new Vue();//2.使用Bus中央事件总线在A组件中发送信息
Bus.$emit('自定义事件名'，'$on发送过来的数据')；//3.使用Bus中央事件总线在B组件中接收信息
Bus.$on('自定义事件名'，function(){//然后执行什么你自己懂的。。。
})；

64.vue开发命令 `npm run dev` 输入后的执行过程【拓展】

npm run dev 是执行配置在package.json中的脚本，比如：

"scripts": {"dev": "webpack-dev-server --inline --progress --config webpack.conf.js","start": "npm run dev","lint": "eslint --ext .js,.vue src","build": "node build/build.js"},npm run dev 执行的就是webpack-dev-server --inline ....命令,通过webpack-dev-server开启一个本地调试服务器。

在webpack.conf.js文件中找到App的入口文件 ./src/main.js
```
entry: {app: './src/main.js'
},
```
main.js用到了页面元素#app、用到了路由和根组件App，并根据这些信息创建一个vue实例

new Vue({el: '#app',router,components: { App },template: '<App/>'
})

webpack-dev-server会将main.js中的代码以及所有引用打包成一个bundle.js，然后配置到内存中
webpack.conf.js中配置的HtmlWebpackPlugin会将index.html文件配置到内存，并且将内存中的bundle.js注入到内存中的index.html中

new HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: true
}),

根据webpack.config.js中所配置的devServer的信息，会决定是否自动打开浏览器呈现网页

devServer: { open: true, // 自动打开浏览器port: 3000, // 设置启动时候的运行端口contentBase: 'src', // 指定托管的根目录hot: true // 启用热更新 的 第1步
},

65.vue打包命令是什么？

vue-cli 生成生产环境部署资源的 npm命令：

npm run build

用于查看 vue-cli 生产环境部署资源文件大小的 npm命令：

npm run build --report

66.vue-cli 打包后会生成哪些文件？

dist--index.html       单页面文件--app.[hash].css   将组件中的css编译合并成一个app.[hash].css的文件--app.[hash].js    包含了所有components中的js代码--vendor.[hash].js   包含了生产环境所有引用的node_modules中的代码--mainfest.[hash].js 包含了webpack运行环境及模块化所需的js代码--0.[hash].js        是vue-router使用了按需加载生产的js文件这样拆分的好处是：每块组件修改重新编译后不影响其他未修改的js文件的hash值，
这样能够最大限度地使用缓存，减少HTTP的请求数。

67.如何配置 vue 打包生成文件的路径？

//vue.config.js//部署应用包时的URL，如果是生产环境，部署到 ./cli-study/dist 路径；如果是开发环境，部署到根路径
publicPath: process.env.NODE_ENV === 'production'? './cli-study/dist': './',
outputDir: 'dist',

前端关于Vue的面试题（五）相关推荐

前端有关vue的面试题
1.vue的虚拟dom? 虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作. 2.如何理解vue中MVVM模式? MVVM全称是Model-View-Vie ...
vue如何获取年月日_好程序员web前端教程分享Vue相关面试题
好程序员web前端教程分享Vue相关面试题,Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来好程序 ...
【前端面试】39道Vue高频面试题，亲测有效！！！快来看看呀！！
Vue高频面试题 1.说下你常用的Vue指令? v-bind:动态绑定数据 v-on:绑定事件监听器 v-for:循环指令,可以循环数组或对象 v-model:实现双向绑定 v-if:根据表达式的真假 ...
vue 离开页面事件_【必看】58 道 Vue 常见面试题集锦，涵盖入门到精通，自测 Vue 掌握程度...
△ 是新朋友吗?记得先点web前端学习圈关注我哦- 1.vue优点? 答: 轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十 kb : 简单易学:国人开发,中文文档,不存在语言障碍 , ...
前端面试总结以及面试题
前沿小编在这几年的前端开发过程中,经历了由js,jquery到vue,由操作dom到数据驱动页面,由只写pc网站,到写移动端网页,再到移动端app,再到微信公众号,小程序,可谓是风云变幻,不得不感叹 ...
Vue相关面试题及答案分享
Web前端重点技能是什么?Vue相关面试题有哪些?Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是Web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来 ...
前端面试---Vue部分考点梳理
一. Vue的使用 1. Vue的基本使用指令插值插值表达式指令动态属性 v-html 会有XSS风险会覆盖子组件 computed 和 watch computed 有缓存 data不 ...
前端 input怎么显示null_小猿圈WEB前端之HTML5+CSS3面试题（一）
学习是一件非常充实的过程,特别是把自己的乐趣变成工作的时候,很多朋友就喜欢学习web前端,所以学习前端,也希望从事前端的工作,但是因为缺少实战经验,所以很多都是卡在面试这关上,下面小猿圈总结了web前 ...
vue关闭当前页面跳转_【必看】58道 Vue常见面试题集锦，涵盖入门到精通，自测 Vue 掌握程度...
作者:Lucky Girl https://zhuanlan.zhihu.com/p/92407628 1.vue优点? 答: 轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十 kb ...

前端关于Vue的面试题（五）

55.vue组件的scoped属性的作用

56.vue中集成的UI组件库

57.如何适配移动端？【经典】

58.vue-cli工程中如何使用背景图？

59.vue中如何实现tab切换功能？

60.vue中如何利用`<keep-alive></keep-alive>`标签实现某个组件缓存功能？

61.vue中实现切换页面时为左滑出效果

62.在vue-cli工程中如何实现无痕刷新？

63.vue中中央事件总线？

64.vue开发命令 `npm run dev` 输入后的执行过程【拓展】

65.vue打包命令是什么？

66.vue-cli 打包后会生成哪些文件？

67.如何配置 vue 打包生成文件的路径？

前端关于Vue的面试题（五）相关推荐

最新文章

热门文章

前端关于Vue的面试题（五）

55.vue组件的scoped属性的作用

56.vue中集成的UI组件库

57.如何适配移动端？【 经典 】

58.vue-cli工程中如何使用背景图？

59.vue中如何实现tab切换功能？

60.vue中如何利用<keep-alive></keep-alive>标签实现某个组件缓存功能？

61.vue中实现切换页面时为左滑出效果

62.在vue-cli工程中如何实现无痕刷新？

63.vue中中央事件总线？

64.vue开发命令 npm run dev 输入后的执行过程【 拓展 】

65.vue打包命令是什么？

66.vue-cli 打包后会生成哪些文件？

67.如何配置 vue 打包生成文件的路径？

前端关于Vue的面试题（五）相关推荐

最新文章

热门文章

57.如何适配移动端？【经典】

60.vue中如何利用`<keep-alive></keep-alive>`标签实现某个组件缓存功能？

64.vue开发命令 `npm run dev` 输入后的执行过程【拓展】