课本1 2 3 6 7 9 11 12 13 14章节问题汇总
第一章 vue.js简介
1-1简述vue.js的特性:
①轻量级,vue.js是一个更加轻量级的前端库;②数据绑定双向数据绑定;③应用指令④插件化开发,可以用来开发一个完整的单页应用;
1-2Vue.js的安装方法
①官网下载 ②使用CDN下载③ 使用NPM方法
第二章 基础特性
2-1在Vue.js构造函数的选项对象中,最基本的选项有哪几个?
- el：指定Vue实例控制的HTML元素的选择器。
- data：指定Vue实例使用的数据对象。
- methods：指定Vue实例的方法。
- computed：指定Vue实例的计算属性。
- watch：指定Vue实例的监听器。
2-2为HTML元素绑定属性需要使用什么指令
v-bind
2-3定义过滤器主要有哪俩种方式
定义无参全局过滤器 定义有参全局过滤器 注意： 1、 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！ 2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右
2-4Vue.js中指令有什么作用
Vue.js指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。
Vue.js作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。
指令的作用是：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
第三章 条件判断与列表渲染
3-1 v-if指令和v-show指令在使用上有什么不同?
v-show 通过css样式中的dispaly：none；控制元素显示、隐藏
v-if 通过控制vue的虚拟dom树上的节点,来联动控制真实dom上的节点，从而控制元素的显示、隐藏
使用场景
3.1 v-if
此元素进入页面后，此元素只会显示或隐藏不会被再次改变显示状态，此时用v-if更加合适，如请求后台接口通过后台数据控制某块内容是否显示或隐藏，且这个数据在当前页不会被修改
作用：当用v-if来隐藏元素时，初次加载时就不用渲染此dom节点，提升页面加载速度
3.2 v-show
此元素进入页面后，此元素会频繁的改变显示状态，此时用v-show更加合适，如页面中有一个toggle按钮,点击按钮来控制某块区域的显示隐藏
作用：当用v-show来隐藏元素时，只会在初次加载时渲染此dom节点，之后都是通用display来控制显隐，如果此时使用v-if，那会频繁的操作dom，会极大的影响性能，但用display则不会
3-2 向对象中添加响应式属性可以使用哪几种方法?
Vue.set()方法,也可以通过Object.assign()实现
set()去改变一个传入组件的对象(没有直接定义在data对象中，通过mixins选项做相关操作，能够通过this.去获取)，没有触发视图更新
而改用Object.assign()去给对象重新赋值时,会触发视图更新 通过重新给对象赋值，来使视图更新; 使用Object.assign()新增，或者改变原有对象,
// 起作用的是给对象重新赋值 this.obj = Object.assign({}, this.obj, {e: 5})
3-3 指出Vue.js中变异方法和非变异方法打的不同?
解答1: 变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组
push( ) pop( ) shift( ) unshift( ) splice( ) sort( ) reverse( )
也有非变异 (non-mutating method) 方法，例如：
filter( ) concat( ) slice( ) 这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组
解答2: （1）变异方法:改变原数组，使视图更新 push() 往数组最后面添加一个元素，成功返回当前数组的长度。 pop() 删除数组的最后一个元素，成功返回删除元素的值。 shift() 删除数组的第一个元素，成功返回删除元素的值。 unshift() 往数组最前面添加一个元素，成功返回当前数组的长度。 splice() 有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除后想要在原位置替换的值（可选） 。返回删除的数组 sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组 reverse() 将数组倒序，成功返回倒序后的数组。 （2）非变异方法：不改变原数组，返回新数组 array.slice() 接受两个参数。 第一个参数是开始拷贝的起始索引位置。 第二个参数是拷贝结束的索引位置。结束位置的元素并不会包含进去 其他： map,filter,concat
3-4 应用v-for指令可以遍历哪些类型的数据?
v-for是用来遍历，主要可以遍历我们常用的一下四个数据类型，number/string/array/object，
其中使用最多的是遍历array和object
待解决问题
第六章 事件处理
6-1如果在内联语句中需要获取原生的DOM事件对象需要什么变量?
在内联语句中需要获取原生的 DOM 事件对象时，可以将一个特殊变量 $event 传入方法中。
6-2 列举常用的俩个事件修饰符并且说明他们的作用.
stop: 等同于js中的event.stopPropagation(), 防止事件冒泡
prevent：等同于js中的event.preventDefault()阻止默认行为
<a href="www.baidu.com" @click.prevent="showInfo">点我提示信息
capture：与事件冒泡方向相反，事件捕获由外到内容-
.self：只会触发元素自己的事件，不包含子元素
第七章表单控件绑定
7-1为复选框进行数据绑定分为俩种情况,说明俩种情况的不同
单向绑定(v-bind) :数据只能从data流向页面。 双向绑定(v-model) :数据不仅能从data流向页面，还可以从页面流向data。 1.双向绑定一般都应用在表单类元素上（如: input、 select等) 2.v-model:value可以简写为v-model，因为v-model默认收集的就是value值。
7-2在单个复选框中,将值绑定到动态属性上需要应用复选框的哪个属性?
复选框单独使用 复选框也分单独使用和组合使用，不过，与单选按钮不同，复选框单独使用时，也是用v-model来绑定一个布尔值，例如：
7-3 Vue.js为v-model指令提供了哪几个修饰符?
第九章 组件
9-1 说明 全局组件和局部组件的区别
vue中的全局组件指的是可以在应用程序中的任何位置使用的组件，而局部组件指的是未在全局组件中注册的组件，因此只能使用于局部。
9-2 将父组件的数据传递给子组件需要使用哪个选项?
vue父子组件传值：父组件向子组件传值用的是props
9-3 简述Vue.js提供的Prop验证方式有哪几种?
类型检查：可以通过指定props的类型来检查其是否符合预期。例如：props: { count: Number } 必要性检查：可以通过设置required选项来确保必须传入该props。例如：props: { message: { type: String, required: true } } 默认值：可以通过指定default选项来为props设置默认值。例如：props: { size: { type: String, default: 'medium' } } 自定义验证：可以通过指定validator选项来自定义验证规则。例如：props: { age: { type: Number, validator: function (value) { return value >= 18 } } }
9-4 怎样在一个组件的根元素上监听一个原生事件?
使用this.$emit() 使用v-on指令的修饰符 .native 可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。
9-5 实现动态组件需要应用component元素的哪个属性?
动态组件适用于在不同组件之间进行动态切换。 我使用过2种方法来实现： （1）可以通过 Vue 的 元素加一个特殊的 is 特性来实现； （2）通过v-if来进行条件渲染，同样能实现。
第十一章 常用插件
11-1 简述引用vue-router插件的几种方式
1.普通直接引用的方式 import DemoIndex from '../views/home/index.vue' import Coma from '../views/home/coma.vue'
export const routes = [ { path: '/home', name: 'home', component: DemoIndex, }, { path: '/coma', name: 'coma', component: Coma, } ]
2.es提案的 import()的方式 export const routes = [ { path: '/home', name: 'home', component: () => import( /* webpackChunkName: "home" / '@/views/home/index.vue'), }, { path: '/coma', name: 'coma', component: () => import( / webpackChunkName: "coma" */ '@/views/home/coma.vue'), } ]
3.resovle=>require方式引入 export const routes = [ { path: '/home', name: 'home', component: (resolve) => require(['../views/home/index.vue'], resolve) }, { path: '/coma', name: 'coma', component: (resolve) => require(['../views/home/coma.vue'], resolve) } ]
4.webpack 的 require.ensure()方式（这个跟方式三生成后的内容及其相似，不过可以指定生成后的js名称） export const routes = [ { path: '/home', name: 'home', component: resolve => require.ensure([], () => resolve(require('../views/home/index.vue')), 'home'), }, { path: '/coma', name: 'coma', component: resolve => require.ensure([], () => resolve(require('../views/home/coma.vue')), 'coma'), } ]
11-2 在应用路由时如何在界面中同时展示多个视图?
有3个待加载的vue文件：HelloWorld.vue ,topBar.vue, footBar.vue
一个主vue文件app.vue
要将三个待加载的都通过app.vue在同一个路径显示在同一个页面上
首先处理index.js这个文件：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import topBar from '@/components/topBar'
import footBar from '@/components/footBar'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
components: {
default: HelloWorld,
topBar: topBar,
footBar: footBar
}
} ]
})
这里对app.vue的处理：
11-3 在使用axios发送请求后的回调函数中,怎样访问当前Vue实例中的数据?
发送get请求 以及传参 get传参用params :{ } post传参数用data :{ }
发送 post请求 以及传参 点击发送请求按钮 控制台显示接收的参数 里面的data 是传递进去的参数
第十二章 单页Web应用
12-1 简述webpack配置文件中的几个常用选项及他们的作用
p187
12-2 在应用中处理.vue文件需要使用哪些依赖
p191
12-3 简述使用@vue/cil工具创建项目的基本流程
p193 194
第十三章 状态管理
13-1 简述Vuex的组成部分它们的含义
p206
13-2 Vuex中的action和mutation有什么区别?
可以通过提交mutations中的方法来改变状态,与mutations不同的是他可以进行异步操作
第十四章 综合开发实例-51购商城 仿豆瓣电影评分网的小结
p263
