vue面试题（上）
低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
2.vue父组件向子组件传递数据？
1.父组件将数据绑定在子组件上
<template><transition name="slide">
<music-list :songs="songs" :title="title" :bg-image="bgImage"></music-list>
</transition>
</template>
2.子组件接受数据props
export default { props: {
bgImage: {
type: String,
default: ''
},
songs: {
type: Array,
default: () => []
},
title: {
type: String,
default: ''
}
},
}
3.子组件像父组件传递事件
在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了
父组件
<template><div>
<child @fatherMethod="fatherMethod"></child>
</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
components: {
child
},
methods: {
fatherMethod() {
console.log('测试');
}
}
};
</script>
子组件
<template><div>
<button @click="childMethod()">点击</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
this.$emit('fatherMethod');
}
}
};
</script>
4.v-show和v-if指令的共同点和不同点
v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果
5.如何让CSS只在当前组件中起作用
将当前组件的修改为<style scoped>
6.的作用是什么?
包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。
7.如何获取dom
通过refs方法
HTML
<div id="App"><div class="aa" ref="menuItem" @click="aa($event)">aa</div>
<div @click="bb"\>bb</div>
</div>
JS
<script>new Vue({
el: '#App',
methods: {
bb: function() {
var getMenuText = this.$refs.menuItem.innerText;
console.log(getMenuText);//aa
},
aa: function(e) {
var el = e.target;
console.log(el);//<div class="aa">aa</div>
}
}
})
</script>
8.说出几种vue当中的指令和它的用法？
v-if：判断是否隐藏；
v-for：数据循环；
v-bind:class：绑定一个属性；
v-model：实现双向绑定
9. vue-loader是什么？使用它的用途有哪些？
vue文件的一个加载器。
用途：js可以写es6、style样式可以scss或less、template可以加jade等
根据官网的定义，vue-loader 是 webpack 的一个 loader，用于处理 .vue 文件。
10.为什么使用key
当有相同标签名的元素切换时，需要通过key 特性设置唯一的值来标记以让Vue 区分它们，否则Vue 为了效率只会替换相同标签内部的内容。
11.axios及安装
1.axios是什么？
请求后台资源的模块
2.axios安装？
根目录运行
npm install axios -S
在使用的地方
import axios from 'axios'
12.axios解决跨域
首先在build/webpack.dev.conf.js设置代理
var express \= require('express')var axios \= require('axios')
var app \= express()
var apiRoutes \= express.Router()
app.use('/api', apiRoutes)
before(apiRoutes) {
apiRoutes.get('/api/getDiscList', function (req, res) {
var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg' // 原api
axios.get(url, {
headers: {
referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'
},
params: req.query
}).then((response) => {
res.json(response.data)
}).catch((e) => {
console.log(e)
})
})
}
在页面中使用
export function getDiscList() { const url = '/api/getDiscList'
const data = Object.assign({}, commonParams, {
platform: 'yqq',
hostUin: 0,
sin: 0,
ein: 29,
sortId: 5,
needNewCode: 0,
categoryId: 10000000,
rnd: Math.random(),
format: 'json'
})
return axios.get(url, {
params: data
}).then((res) => {
return Promise.resolve(res.data)
})
}
13.v-model的使用
用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model在内部使用不同的属性为不同的输入元素并抛出不同的事件：
- text 和 textarea 元素使用
value属性和input事件； - checkbox 和 radio 使用
checked属性和change事件； - select 字段将
value作为 prop 并将change作为事件。
14. 请说出vue.cli项目中src目录每个文件夹和文件的用法？
assets文件夹是放静态资源；
components是放组件；
router是定义路由相关的配置;view视图；
app.vue是一个应用主组件；
main.js是入口文件
15.分别简述computed和watch的使用场景
一. methods和（watch、computed）的 区别
1.watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。
2.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数
以上是 vue面试题（上） 的全部内容， 来源链接： utcz.com/z/378921.html
