[toc]
# 题1、data 中定义的数据如何在页面中显示?
答:
1. 如果是字符串、数字等,使用 {{ ... }}
2. 如果是数组一般使用 v-for
# 题2、生命周期函数有哪些?项目中是怎么使用的?
答:
1. 创建前后、挂载前后、销毁前后、更新前后、被激活、被隐藏等
2. 项目中常用的:
created(创建后):调接口获取页面初始数据。
mounted(挂载后):在页面加载完之后执行一个 DOM 操作的 JS 代码,比如:商城后中的图表功能。
# 题3、在 Vue 中如何绑定事件?
答:v-on 或者 @ 。比如:v-on:click 或者 @click。
# 题4、什么是双向绑定?项目中是怎么使用的?
答:使用 v-model 指令进行双向绑定。
项目中:操作表单元素:单选框、复选框、下拉框等时需要定义数据并使用 v-model 进行绑定。
# 题5、Vue 组件中的 data 为什么是函数?
答:跟按引用传值有关。如果不用函数,data 是对象类型的数据,对象都是按引用传递的,会导致:当组件使用多次时,它们会共享用同一个 data 数据,修改任何一个组件中的 data ,其他的组件也会跟着一起改变,这是不对的,每个组件实例在使用时应该是完全独立 的,互不影响才对。
所以 data 必须是一个函数,每次在函数中返回一个全新的对象,这样就不会出现共享的问题了。
# 扩展:什么是按引用传值?
变量赋值时分为两种情况:
- 按值传递:如果是数字、布尔、字符串等基础类型。
原理:先把这个值在内存中复制一份,然后赋给另一个变量。
效果:赋值之后两个值是两个独立的变量互不影响 。
~~~
/* 按值传递 */
let a = 100 // 数字
let b = a // 按值传递(因为 a 是数字)
// 现在 a 和 b 是两个独立 互不影响 的变量
b=200 // 修改 b 不影响 a
console.log(a) // a 还是 100
~~~
- 按引用传递:如果值类型是对象或者数组时。
原理:把这个变量在内存中的地址赋给另一个变量。
效果:赋值之后,两个变量指向同一个内存地址,其实还是同一个变量,只不过有两个变量名。
~~~
/* 按引用传递 */
let a = [1,2,3] // 数组
let b = a // 按引用传递(数组和对象都是引用传递)
// a 和 b 指向内存中的同一个地址,a和b是同一个数据
b[0] = 100 // 把 b 修改
console.log( a[0] ) // 100 也变成100,
// 所以如果希望复制出一个全新的数组,需要使用 “克隆技术”
/*
浅克隆:只克隆最外层的数据。(只克隆一部分)
方法:let b = [...a] , 把 a 克隆一份给 b (浅克隆)
深克隆:把内层的也复制一份。(完全的克隆)
方法:let b = JSON.parse( JSON.stringify(a) )
*/
~~~
# 题6、如何定义计算属性?项目中是怎么使用的?
答:使用 computed 来定义计算属性。制作购物车时里面的商品总价。
# 题7、什么是监听器?监听什么的?项目中是怎么使用的?
答:使用 watch 来定义监听器,一个监听器就是一个函数,函数名就是要监听的 data 中的一个变量的名字,一旦监听的变量发生变量,这个函数就被调用了。
监听器分为浅监听和深度监听,当监听的数据是一个复杂的数据类型(数组、对象)时需要使用深度监听。
在项目中实现数据搜索、排序、翻页时使用过,每当用户点击翻页、排序、搜索条件的按钮时就要重新调用接口,所以我定义了一个变量,保存翻页、排序、搜索的信息,然后使用监听器监听这个变量,一量发生变化就重新调用接口获取数据
代码:
~~~
data() {
return {
// 保存翻页、搜索关键字、排序信息
info: {
page: 1,
keywords: '',
sortby: 'id',
sortway: 'desc'
}
}
},
// 监听器
watch: {
// 当条件改变时重新调用接口
info: {
deep: true, // 深度监听
handle: function() {
// 重新调用接口获取数据
}
}
}
~~~
# 题8、什么是过滤器?项目中是怎么使用的?如何使用过滤器?
答:使用 filter 定义过滤器。
过滤器分为全局过滤器 和 局部过滤器。
全局过滤器:在任何一个组件中可以直接使用。
局部过滤器:在组件中需要先引入,再注册到组件的 filter 中,然后才能使用。
当一个绝对时间(发表文章时间)在显示时转化成一个相对时间,项目中的实现思路:
1. 先定义了一个叫做 relativeTime 的全局变量器
2. 在组件中使用: {{ time | relativeTime }}
# 题9、什么是混入?项目中是怎么使用的?
答:mixins 是定义混入。可以把一段 JS 代码合并到一个 Vue 组件中。
用途:可以把多个组件共用的 JS 代码单独提取出来放到一个 JS 文件中,然后哪个组件中需要就直接混入。
之前写的商城后台的项目:使用了混入实现的把组件中的JS 代码和 HTML+CSS 分离写在两个文件中。
实现思路:
1. 把 JS 代码单独写到一个 JS 文件中
2. 在 .vue 文件中使用 mixins: [ js 文件] 混入进来
# 题10、如何将 data 中定义的图片路径绑定到 src 属性上?
答:使用 v-bind 或者 : 。
比如:
~~~
<img :src="image" />
<img v-bind:src="image" />
data:{
image: 'http://www.ww.ww/1.jpg'
}
~~~
# 题11、在 Vue 中使用一个自定义组件的流程是?
答:
自定义组件有两种情况:
- 全局组件:直接在页面中使用 ,比如: <Hello />
- 局部组件:先引入、再组件,然后才能使用。
1.创建一个自定义组件,比如:Hello.vue 组件
2. 使用 import 引入这个自定义组件,比如:import Hello from 'Hello.vue'
3. 注册这个组件,在 Vue 的 components: { Hello }
4. 使用:<Hello />
# 题12、组件之间如何传值?父向子传值时,如何设置属性的默认值和属性的类型?
答:
父>子 使用属性 ,注意,需要在子组件中使用 `props` 来接收属性。
子>父 使用 事件,注意:在子组件中使用 `this.$emit(事件名,数据)` 触发父组件中的事件
兄弟之间 使用 `Bus 总线` 的中间组件实现。
**父向子传值时,如何设置属性的默认值和属性的类型?**
在子组件中使用 props 接收属性:
写法一、不设置类型和默认值
props: [ 'name', 'age' ] // 接收 name 和 age ,不限制类型
写法二、限制类型和默认值
props: {
name: {
type: String,
default: ''
},
age: {
type: Number,
default: 0
}
}
# 题13、style 上的 scoped 是什么意思?使用原理是什么?
答:里面的样式只对当前这个组件生效,不会影响其他组件。
当添加了 scoped 之后,vue 会在这个组件中所有的标签上都添加一个唯一的标识符,只有这个组件中的标签上才有这个标签符,然后在 CSS 上会通过这个属性来限制 CSS 的应用范围。
1. 组件中添加属性
![](https://img.kancloud.cn/e3/f3/e3f35c6e95d0a6b1ff38592e17d3a3b9_1348x340.png)
2. css 上通过属性来限制范围
~~~
/* 通过属性选择器就只对当前这个组件中的 .count 生效 */
.count [ data-v-26084dc2 ] {
color: blue;
}
~~~
# 题14、什么是插槽?干什么用的?
答:组件中会在特定的位置上留插槽,我们可以在使用这个组件时向这个插槽中添加HTML的结构,目的是可以自己扩展一个组件的功能。比如:项目中使用的 vant 的导航栏组件,但是它默认的图标不满足要求,所以我们可以使用它的插槽,自己来定义图标这个区域的内容。
插槽分为两种:
- 匿名插槽(默认插槽)一个组件中只能有一个匿名插槽。
如果在组件中间不使用 slot 默认放到匿名插槽的位置。
- 有名插槽,一个组件中可以有多个有名的插槽。
向有名插槽中放数据时需要使用 slot 属性指定插槽的名字
# 题15、v-if 和 v-show 的区别?
答:
共同:v-if 和 v-show 都是控制一个元素是否显示。
区别:v-if 如果是 false 就不渲染这个元素,页面中没有这个元素
v-show 无论 true 和 false 都会渲染这个元素,页面中始终有这个元素,当 false 时使用 display: none 把它隐藏。
# 题16、v-html 的用途是?
答:把一个 HTML 字符串 `解析` 成 HTML 显示出来。
比如:
~~~
{{ str }} ------------> 当成普通字符串显示出来: <h1>hello</h1>
<div v-html="str"></div> ----------> 解析 h1 标签,显示出来是一个加粗放大的 hello
data: {
str: '<h1>hello</h1>'
}
~~~
# 题17、template 组件的用途是?
答:这个标签在页面中不会渲染出任何元素,它的用途是把多个标签套起来当成一个整体。
比如有三个 div 标签要循环
~~~
<div>abc</div>
<div>abc</div>
<div>abc</div>
~~~
必须要使用一元素套起来
~~~
<div v-for="v in 10">
<div>abc</div>
<div>abc</div>
<div>abc</div>
</div>
~~~
这样最外层多了一个 div,如果不想要外层 div 可以使用 tempalte
~~~
<template v-for="v in 10">
<div>abc</div>
<div>abc</div>
<div>abc</div>
</template>
~~~