多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
[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> ~~~