vue周测题
1、MVVM的理解
Model view viewmodel
2.vue中html上如何加载data中数据（列举三种）
插值表达式、v-text、v-html
3、如何绑定属性和事件
v-on@
v-bind:
4、vue中常见的事件修饰符有哪些，分别是做什么的？
.stop阻止冒泡
.prevent阻止默认事件
.capture添加事件侦听器时使用事件捕获模式
.self只当事件在该元素本身（比如不是子元素）触发时触发回调
.once事件只触发一次
5、vue中如何实现双向数据绑定
v-model
6、v-if与v-show区别，以及应用场景。
v-if()是直接删除或添加当前元素，
v-show()是设置样式：display:blockdisplay:none
7、代码实现v-for渲染数据，并要求隔行换色
<body>
<div id="app">
<ul>
<li v-for="(item,i) in list"
：style=”{backgroundColor:index%2==0?”green”:”hotpink”}”>name：{{item.name}} ----age：{{item.age}}----sex:{{item.sex}}</li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: "#app",
data: {
list: [{name:”张三”,age:”18”,sex:”男”},
{name:”李四”,age:”19”,sex:”女”},
{name:”王五”,age:”20”,sex:”男”}]
}
})
</script>
8、自定义过滤器实现日期的格式化
Vue.filter("dateTime",(data,format="YYYY-MM-DDhh-mm-ss")=>{
let year=data.getFullYear();
let month=String(data.getMonth()+1).padStart(2,"0");
let day=String(data.getDate()).padStart(2,"0");
let hour=data.getHours().toString().padStart(2,"0");
let minute=data.getMinutes().toString().padStart(2,"0");
let second=data.getSeconds().toString().padStart(2,"0");
return format.replace("YYYY",year)
.replace("MM",month)
.replace("DD",day)
.replace("hh",hour)
.replace("mm",minute)
.replace("ss",second)
})
9、自定义指令实现自动聚焦功能
Vue.directive("focus",{
bind(el,binding){
},
inserted(el,binding){
el.focus();
},
update(el,binding){
}
})
10、Vue生命周期函数有哪些，都有哪些作用
BeforeCreate()创建实例之前，这个阶段拿不到data上面的数据。此阶段进行页
面重定向
Created()界面还没有渲染，但是可以拿到data值了，也是最早可以对数据进行初始化的
地方
beforeMount()执行之前，这个阶段已经准备好了要编译的模板，但还没有渲染到界面
Mounted()界面已经渲染好了，如果依赖于dom的组件初始化可以放到这里
beforeUpdate()数据更新之前，但是界面还没有更新
Updated()如果界面改变了，有些组件可能还需要渲染，渲染过程就放在这里
beforeDestroy()销毁之前
Destroyed()销毁了
11、axios如何进行get和post请求
Axios.get(地址,{}).then()
Axios.post(地址,{},配置).then()
12.编码实现通过axios进行文件上传。
接口地址http://myhope365.com/upload/file
参数：
file上传的文件
name文件名字
<div id='app'>
<input type="file" @change="onSelectFile">
<button @click="uploadFile">文件上传</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
file: null
},
methods: {
onSelectFile(e) {
console.log(e.target.files)
this.file = e.target.files[0];
},
uploadFile() {
//三种方式
// json {}
// application/x-www-form-urlencoded URLSearchParams()
// multipart/form-data FormData()
//FormData
const formdata = new FormData();
formdata.append("file", this.file);
axios.post("http://59.111.92.205:13010/api/nos/upload/image", formdata
).then(res => {
console.log(res);
})
}
}
})
</script>
</body>
13.post请求中常见的三种请求体格式是什么？如何传递这些数据
Json格式:Content-type:application/json
表单格式:application/x-www-form-urlencoded new URLSearchParams()
文件上传 Application/form-data new FormData()
14、代码实现，父组件分别将名为header内容为“我是头部”和名为footer，内容
为“我是底部“插槽，填充到子组件
<body>
<template id="comp">
<div>
<slot name="header"></slot>
<h3>自定义组件</h3>
<!-- 写在那里，组件里html就在那里 -->
<slot></slot>
<slot name="footer"></slot>
</div>
</template>
<script>
//插槽我们组件中HTML该被放在那里
const comp = {
template: "#comp",
}
</script>
<div id='app'>
<comp>
<!-- 希望把指定的html宣染到指定的位置 -->
<header slot="header">
这是一个头部
</header>
这是主题内容
<footer slot="footer">
这是一个尾部
</footer>
</comp>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
},
components: {
comp: comp
}
})
</script>
15、如何进行路由重定向
{
path: "/",
redirect: "/list"
}
16、定义路由的步骤有哪些？
引入路由的js
创建路由实例。newVueRouter
配置地址和组件的映射关系。routes
把路由实例挂载到vue上。
指定路由到这个地址之后，
组件显示的位置<router-view></router-view>
17、路由如何跳转？（两种方式）
(1) <router-link to = "地址"></router-link>
(2)this.$router.push()
18、路由跳转如何传递参数，如何获取路由跳转的参数？
query参数：？参数名=参数值&参数名=参数值
params参数： /：id/：name
要先定义，且必须赋值
区别
- params必传，query不传也可以跳转
- params使用前要先声明，query可以直接使用
- params是通过this.$route.params获取，query通过this.$route.query获取的
19、简述一下vue的计算属性，已经应用场景？
计算属性： 本质上是一个属性，它别的属性的一个派生。 计算属性会进行缓存，只有它依赖的属性发生的时候才会重新计算（不能写异步操作的）
20、Vue中列表循环中为什么要设置key值？
让界面元素和数组里的每条元素进行绑定 提高重排效率，唯一性
21、全局定义一个组件，该组件有一个输入框和一个按钮，组件下展示一个数组。
要求数组的数据从父组件传递进来，用户输入内容后，点击按钮，按照输入值进
行筛选。
<body>
<template id="search">
<div>
<input type="text" v-model="keywords">
<button @click="search">
按钮
</button>
<ul>
<li v-for="(item,index) in list" :key="item.id">id:{{item.id}} name:{{item.name}}</li>
</ul>
</div>
</template>
<script>
const search = {
template:"#search",
data(){
return {
keywords:""
}
},
props:{
list:{
type:Array,
default:[],
}
},
methods:{
search(){
this.$emit("search",this.keywords)
}
}
}
Vue.component("search",search)
</script>
<div id='app'>
<search :list="newlist" @search="onSearch"></search>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
list: [{
id: 1,
name: '老板'
}, {
id: 2,
name: '经理'
}, {
id: 3,
name: '运营总监'
}, {
id: 4,
name: 'CEO'
}, {
id: 5,
name: '销售'
}],
keyword:""
},
methods:{
onSearch(e){
this.keyword = e;
}
},
computed:{
newlist(){
return this.list.filter(item => item.name.includes(this.keyword));
}
}
})