建筑招工找活平台/优化关键词的作用
1.Vue的特点是什么？
1、国人开发的一个轻量级框架。
2、双向数据绑定，在数据方面更为简单
3、试图、数据、结构分离，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作
4、组件化、方便封装和服用
5、虚拟dom：dom操作时非常消耗性能的，不再使用原生的dom操作节点，极大的解放了dom操作
2.Vue中父子组件时如何传值的？
1、子组件通过事件调用向父组件传值
在子组件中，利用 $emit 触发 父组件传递过来的方法的时候，可以将子组件的数据当做参数传递给父组件
2、父组件向子组件传值
第一步：父组件 在引用子组件时，通过属性绑定（v-bind：）的形式，把需要传递给子组件的数据，传递到子组件内部，供子组件使用
第二步：把父组件传递过来的数据， 在 props数组 中定义一下
组件中的 所有props 中的数据，都是通过父组件传递给子组件的
props 中的数据都是只读的，无法重新赋值
第三步：在该子组件中使用props数组 中定义好的数据
3、父组件把方法传递给子组件
第一步：父组件向子组件传递方法，使用事件绑定机制 v-on，自定义一个事件属性，传递给子组件
第二步：在子组件中定义一个方法，在方法中，利用 $emit 触发 父组件传递过来的，挂载在当前实例上的事件，还可以传递参数
第三步：在子组件中调用定义的那个方法，就可以触发父组件传递过来的方法了
3.v-show和v-if的共同点和不同点？
相同点：都能控制元素显示和隐藏
不同点;实现方式不同
v-show是通过display：none/block来控制显示和隐藏的
v-if是通过删除和增加DOM元素来实现显示和隐藏的。
v-if不断地创建添加DOM和删除DOM非常消耗性能，如果需要频繁切换建议使用v-show。
4、说出几种Vue当中的指令和它的用法
v-model双向绑定
v-for循环
v-on绑定事件可缩写为@
v-show，v-if显示与隐藏
v-once只能绑定一次
v-html可解析html：
v-bind属性绑定
5、v-loader是什么？使用它的用途是什么
v-loader是vue里面的加载器，用于加载vue文件将template/js/style转换为js模块。
6、axios是什么？怎么使用？
axios是请求后台资源的模块.
使用方法可以使用npm i axios
也可以使用cdn节点：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
使用举例
1、执行get请求
向具有指定ID的用户发出请求
axios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});也可以通过 params 对象传递参数
axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});
2、执行post请求
axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});
7、单页面应用和多页面应用的区别及优缺点
单页面：是只有一个主页面（html），切换页面内容时通过路由程序动态载入，且js/css/html会一次性同时加载完毕
多页面：是有多个html组成，js/css/html会根据访问页面来一次加载，页面跳转时需要刷新页面
单页面的优点：切换内容快不需要重新加载整个页面、用户体验好、服务器压力较小、前后端分离、页面炫酷
单页面的缺点：不利于seo、导航不可用，如果一定要导航需要自行实现前进后退。
8、简述一下vue常用的修饰符和作用？
一、v-model修饰符
1、.lazy：
输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据：
<input type="text" v-model.lazy="value">
2、.trim：
输入框过滤首尾的空格：
<input type="text" v-model.trim="value">
3、.number：
先输入数字就会限制输入只能是数字，先字符串就相当于没有加number，注意，不是输入框不能输入字符串，是这个数据是数字：
<input type="text" v-model.number="value">
二、事件修饰符
4、.stop：
阻止事件冒泡，相当于调用了event.stopPropagation()方法：
<button @click.stop='test'>test</button>
5、.prevent：
阻止默认行为，相当于调用了event.preventDefault()方法，比如表单的提交、a标签的跳转就是默认事件：
<a @click.prevent='test'>test</button>
6、.self：
只有元素本身触发时才触发方法，就是只有点击元素本身才会触发。比如一个div里面有个按钮，div和按钮都有事件，我们点击按钮，div绑定的方法也会触发，如果div的click加上self，只有点击到div的时候才会触发，变相的算是阻止冒泡：
<div @click.self='test'>test</div>
7、.once：
事件只能用一次，无论点击几次，执行一次之后都不会再执行
<div @click.once='test'>test</div>
8、.capture：
事件的完整机制是捕获-目标-冒泡，事件触发是目标往外冒泡
9、.sync
对prop进行双向绑定
10、.keyCode：
监听按键的指令，具体可以查看vue的键码对应表
9、谈一谈你对MVVM开发模式的理解
MVVM分别是model、view、viewModel三者
- model:代表数据模型，数据和业务逻辑都在model层中定义
- view：代表ui视图，负责数据的展示
- viewmodel：负责监听model中的数据的改变并且控制试图的更新，处理用户交互操作
model和view无直接关联他们是通过viewmodel来关联起来的
这种模式实现了model和view的数据自动同步，开发者只需要专注对数据的维护操作即可。
10、前端如何优化网站性能
1、减少 HTTP 请求数量
在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的 请求数量可以很大程度上对网站性能进行优化。
可以通过精灵图、合并css和js文件、懒加载等方式来减少http请求。
CSS Sprites
国内俗称CSS精灵，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。
合并 CSS 和 JS 文件
现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。
采用 lazyLoad
俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
2、控制资源文件加载优先级
浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。
一般情况下都是CSS在头部，JS在底部。
3、利用浏览器缓存
浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。
4、减少 DOM 操作（vue这种减少操作DOM）
5、图标使用 IconFont 替换image标签
11.vue中样式绑定语法
1、对象绑定法v-bind:
class='{'orange':'isRipe','green':'isNotRipe'}'
2、数组方法v-bind：
class='{class1,class2}'
3、行内v-bind:
style='{color:color,fontSize:fontSize+'px'}'
12.简述vue中每个生命周期具体适合那些场景？
什么是生命周期：
生命周期是一个vue实例从创建到销毁的一个过程，就是生命周期。
就是从开始创建实例、初始化数据、编译模板、挂在dom->渲染、卸载等一系列过程。成为vue的生命周期
生命周期钩子=生命周期函数=生命周期事件
这是前四个生命周期钩子。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KdhoxRoK-1616067805851)(C:\Users\Administrator\Desktop\生命周期.png[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SS3Nw2nR-1616067806433)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210317203044515.png)]]
总共有八个阶段；
分别为创建前、创建后、载入前、载入后、更新前、更新后、撤销前、撤销后
13.如何避免回调地狱
- 模块化：将回调函数换位独立的函数
- 使用流程控制库，例如【aync】
- 使用Promise
- 使用aync/await
14.使用npm有哪些好处
npm的一些知识：
- npm install xx -S写入dependencies对象（生产环境），npm install -D 写入devDependencies插件只用于开发不用于上线。
- 在项目转换的时候不会把node_modules包发过去，通过npm install 安装所有依赖
. 使用Promise
4. 使用aync/await
14.使用npm有哪些好处
npm的一些知识：
- npm install xx -S写入dependencies对象（生产环境），npm install -D 写入devDependencies插件只用于开发不用于上线。
- 在项目转换的时候不会把node_modules包发过去，通过npm install 安装所有依赖