vue周测题
1、MVVM的理解
Model view viewmodel
2. vue中html上如何加载data中数据（列举三种）
插值表达式、v-cloak、v-text、v-html
3、如何绑定属性和事件
v-on @
v-bind :
4、vue中常见的事件修饰符有哪些，分别是做什么的？
l.stop阻止冒泡
l.prevent阻止默认事件
l.capture添加事件侦听器时使用事件捕获模式
l.self只当事件在该元素本身（比如不是子元素）触发时触发回调
l.once事件只触发一次
5、vue中如何实现双向数据绑定
v-model
6、v-if与v-show区别，以及应用场景。
v-if()是直接删除或添加当前元素，v-show()是设置样式：display:block display: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:”男”}]
}
})
8、自定义过滤器实现日期的格式化
Vue.filter("dateTime", (data,format="YYYY-MM-DD hh-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
Application/form-data
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: "/指定的地址"
16、定义路由的步骤有哪些？
引入路由的js
创建路由实例。 new VueRouter
配置地址和组件的映射关系。 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));
}
}
})
