javascript前端开发程序设计教程(微课版)（《Vue.js前端开发实战》课后习题答案）
本答案仅供参考 ，禁止用于抄袭等不法用途
第一章
一 、 填空题
用户界面 ViewModel refs vue-devtools 组件二 、 判断题
对 对 对 对 对三 、 选择题
D C D A A四 、 简答题
请简述什么是Vue 。Vue（读音/Vjuː/ ，类似于View）是一套用于构建用户界面的渐进式框架 ，与其他大型框架相比 ，Vue被设计为可以自底向上逐层应用 。其他大型框架往往一开始就对项目的技术方案进行强制性的要求 ，而Vue更加灵活 ，开发者既可以选择使用Vue来开发一个全新项目 ，也可以将Vue引入到一个现有的项目中 。
请简述Vue优势有那些 。轻量级: Vue相对简单 、直接 ，所以Vue使用起来更加友好 。
数据绑定: Vue是一个MVVM框架 ，即数据双向绑定 。
指令: 指令主要包括内置指令和自定义指令 ，以“v- ”开头 ，作用于HTML元素 。
插件: 插件用于对Vue框架功能进行扩展 ，通过MyPlugin.install完成插件的编写 ，简单配置后就可以全局使用 。五 、 编程题
请使用Vue.js动手创建Vue实例并实现数据的绑定效果 。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>登录页面</title> <!-- 引入vue.js --> <script src="vue.js"></script> </head> <body> <!-- 定义唯一根标签 --> <div id="app"> <!-- 绑定login --> <p>{{login}}</p> </div> <script> // 实例化 var vm = new Vue({ el: #app, // 定义初始数据 data: { login: 登录页面 } }) </script> </body> </html> 请手动配置Vue.js开发环境 。1）. 打开git-bash命令行工具
2）. 安装Node环境
3）. 打开解压好的vue-devtools-5.1.1文件 ，执行命令如下
npm install
npm run build
4）. 打开Chrome浏览器 ，添加vue-devtools调试工具
5）. 安装脚手架工具： npm install vue-cli@2.9.x –g
6）. 安装webpack打包工具： npm install webpack@4.27.x –g
7）. 构建项目：vue init webpack appΩ
第2章
一 、 填空题
new关键字 data 唯一根标签 v-model v-on二 、 判断题
对 对 对 对 对三 、 选择题
D A C B B四 、 简答题
请简述什么是Vue实例对象 。在Vue项目中 ，每个Vue应用都是通过Vue构造器创建新的Vue实例开始的 。
通过new关键字的方式创建vm实例对象 。
创建方式： <script> var vm = new Vue({ // 选项 }) <script>其中 ，配置选项的主要内容及含义：
1）. data：Vue实例数据对象
2）. methods：定义Vue实例中方法
3）. components：定义子组件
4）. computed：计算属性
5）. filters: 过滤器
6）. el: 唯一根元素
7）. watch: 监听数据变化 请简述什么是Vue组件化开发 。1）. 在Vue中 ，组件是构成页面中独立结构单元 ，能够减少重复代码的编写
2）. 提高开发效率 ，降低代码之间的耦合程度 ，使项目更易维护和管理
3）. 组件主要以页面结构形式存在 ，不同组件也具有基本交互功能 ，根据业务逻辑实现复杂的项目功能 请简单介绍Vue内置指令主要内容有哪些 。1）. v-model：双向数据绑定
2）. v-on：监听事件
3）. v-bind：单向数据绑定
4）. v-text：插入文本内容
5）. v-html：插入包含HTML的内容
6）. v-for：列表渲染
7）. v-if：条件渲染
8）. v-show：显示隐藏五 、 编程题
编写页面样式： <style> .compare{ margin: 0 auto; width: 500px; } ul{ padding: 0; } ul li { list-style: none; margin-top: 20px; } </style>编写页面结构：
<div id="app"> <!-- 定义页面结构 --> <div class="compare"> <ul> <li> 请输入第一个数：<input type="text" v-model="num1"> </li> <li> 请输入第二个数：<input type="text" v-model="num2"> </li> <li> <input type="button" value="比较" @click=compare()> </li> </ul> <div class="result"> 得出结果：{{result}} </div> </div> </div> <!-- 引入vue.js --> <script src="vue.js"></script>编写JavaScript代码：
<script> var vm = new Vue({ el: #app, // 定义初始数据 data: { num1: , num2: , result: }, // 定义事件处理函数compare methods: { compare() { if (!this.num1 || !this.num2) { this.result = 输入的数不能为空 } else { this.result = parseInt(this.num1) == parseInt(this.num2) ? 两个数相等 : parseInt(this.num1) > parseInt(this.num2) ? 第一个数大于第二个数 : 第一个数小于第二个数 } } } }) </script> 编写页面结构： <div id="app"> <!-- 定义页面结构 --> <div class="calc"> <ul> <li> 请输入第一个数：<input type="text" v-model="num1"> </li> <li> <select name="" id="fuhao"> <option value="1" onclick="">+</option> <option value="2" onclick="">-</option> <option value="3" onclick="">*</option> <option value="4" onclick="">/</option> </select> </li> <li> 请输入第二个数：<input type="text" v-model="num2"> </li> <li> <input type="button" value="计算" @click=calc()> </li> </ul> <div class="result"> 得出结果：{{result}} </div> </div> </div>编写JavaScript代码：
<script> var vm = new Vue({ el: #app, // 定义初始数据 data: { num1: , num2: , result: }, // 定义事件处理函数compare methods: { calc() { if (!this.num1 || !this.num2) { this.result = 输入的数不能为空 } else { var fuhao = document.getElementById(fuhao).value; if (fuhao == "1") { this.result = parseInt(this.num1) + parseInt(this.num2) } if (fuhao == "2") { this.result = parseInt(this.num1) - parseInt(this.num2) } if (fuhao == "3") { this.result = parseInt(this.num1) * parseInt(this.num2) } if (fuhao == "4") { this.result = parseInt(this.num1) / parseInt(this.num2) } } } } }) </script>Ω
第3章
一 、 填空题
vm.$root vm.$data vm.$children install Vue.directive()二 、 判断题
错 对 对 错 错三 、 选择题
D CD B B D四 、 简答题
请简述什么是Vue插件 。Vue.use主要用于在Vue中安装插件 ，通过插件可以为Vue添加全局功能 。插件可以是一个对象或函数 ，如果是对象 ，必须提供install()方法 ，用来安装插件；如果插件是一个函数 ，则该函数将被当成install()方法 。
请简述Vue全局API接口主要内容 。1）. Vue.directive():Vue中有很多内置指令 ，如v-model 、v-for和v-bind等
2）. Vue.use():Vue.use主要用于在Vue中安装插件 ，通过插件可以为Vue添加全局功能
3）. Vue.extend():Vue.extend用于基于Vue构造器创建一个Vue子类 ，可以对Vue构造器进行扩展
4）. Vue.set():Vue的核心具有一套响应式系统 ，简单来说就是通过监听器监听数据层的数据变化 ，当数据改变后 ，通知视图也自动更新
5）. Vue.mixin():Vue.mixin用于全局注册一个混入 ，它将影响之后创建的每个Vue实例 请简单介绍Vue实例对象属性和方法 。1）. vm.
p
r
o
p
s
:
使
用
v
m
.
props: 使用vm.
props:使用vm.props属性可以接收上级组件向下传递的数据
2）. vm.o
p
t
i
o
n
s
:
V
u
e
实
例
初
始
化
时
，
除
了
传
入
指
定
的
选
项
外
，
还
可
以
传
入
自
定
义
选
项
3
）
.
v
m
.
options: Vue实例初始化时 ，除了传入指定的选项外 ，还可以传入自定义选项 3）. vm.
options:Vue实例初始化时 ，除了传入指定的选项外 ，还可以传入自定义选项3）.vm.el: vm.e
l
用
来
访
问
v
m
实
例
使
用
的
根
D
O
M
元
素
4
）
.
v
m
.
el用来访问vm实例使用的根DOM元素 4）. vm.
el用来访问vm实例使用的根DOM元素4）.vm.children: vm.c
h
i
l
d
r
e
n
用
来
获
取
当
前
实
例
的
直
接
子
组
件
5
）
.
v
m
.
children用来获取当前实例的直接子组件 5）. vm.
children用来获取当前实例的直接子组件5）.vm.root: vm.r
o
o
t
用
来
获
取
当
前
组
件
树
的
根
V
u
e
实
例
，
如
果
当
前
实
例
没
有
父
实
例
，
则
获
取
到
的
是
该
实
例
本
身
6
）
.
v
m
.
root用来获取当前组件树的根Vue实例 ，如果当前实例没有父实例 ，则获取到的是该实例本身 6）. vm.
root用来获取当前组件树的根Vue实例 ，如果当前实例没有父实例 ，则获取到的是该实例本身6）.vm.slots:插槽就是定义在组件内部的template模板 ，可以通过s
l
o
t
s
动
态
获
取
7
）
.
v
m
.
slots动态获取 7）. vm.
slots动态获取7）.vm.attrs: vm.$attrs可以获取组件的属性 ，但其获取的属性中不包含class 、style以及被声明为props的属性五 、 编程题
编写页面样式： <style> * { margin: 0; padding: 0 } ul { list-style: none; } .c-nav { width: 900px; height: 42px; margin: 0 auto; border-radius: 5px; position: relative; } .c-nav li { float: left; width: 83px; text-align: center; line-height: 42px; } .c-nav li a { color: #333; display: inline-block; height: 42px; } header { background: #ccc; } .c-nav li.current a { color: red; } </style>编写页面结构：
<div id="app"> <my-component> <!-- 定义导航栏结构 --> <template v-slot:header> <div id="c_nav" class="c-nav"> <span class="cloud"></span> <ul ref=nav> <li v-bind:class="{currentName}" v-for="item,key in list" @mouseenter="current(key)" @mouseleave="cancel()" :id=key> <a href="#">{{item}}</a> </li> </ul> </div> </template> </my-component> </div>编写JavaScript代码：
<script> // 注册组件 Vue.component(my-component, { render(createElement) { return createElement(div, [ createElement(header, this.$slots.header), ]) } }) var vm = new Vue({ el: #app, // 定义初始数据 data: { list: [首页新闻, 公司简介, 招聘信息, 活动策划, 师资力量], currentName: , }, methods: { // 定义事件处理函数 current(key) { vm.$refs.nav.getElementsByTagName(li)[key].className = current; }, cancel() { for (var i = 0; i < vm.$refs.nav.getElementsByTagName(li).length; i++) { vm.$refs.nav.getElementsByTagName(li)[i].className = } } } }) </script> 编写页面结构： <div id="app"> <my-component><my-component /> </div>编写JavaScript代码：
<script> // 定义一个MyPlugin（自定义插件）对象 let MyPlugin = {} // 编写插件对象的install方法 // install()方法有两个参数 ，第1个参数Vue是Vue的构造器 ，options是一个可选的配置对象 。 MyPlugin.install = function (Vue, options) { // 在插件中为Vue创建组件myComponent Vue.component(my-component, { template: <div>{{msg}}</div>, data() { return { msg: 我是登录页面 } } }) } // 调用Vue.use()方法安装插件 ，在第1个参数中传入插件对象MyPlugin ，第2个参数传入可选配置 。 Vue.use(MyPlugin, { someOption: true }) var vm = new Vue({ el: #app }) </script>Ω
第4章
一 、 填空题
transition name appear v-leave 、v-leave-active 、v-leave-to 自定义过渡二 、 判断题
对 错 对 错 对三 、 选择题
C D D四 、 简单题
请简述JavaScript钩子函数包括哪些 。入场钩子分别是beforeEnter（入场前） 、enter（入场） 、afterEnter（入场后）和enterCancelled（取消入场）
出场钩子分别是beforeLeave（出场前） 、leave（出场） 、afterLeave（出场后）和leaveCancelled（取消出场）
@before-enter=“beforeEnter ”
@enter=“enter ”
@after-enter=“afterEnter ”
@enter-cancelled=“enterCancelled ”
@before-leave=“beforeLeave ”
@leave=“leave ”
@after-leave=“afterLeave ”
@leave-cancelled=“leaveCancelled ”
v-bind:css=“false ”> // Vue会跳过CSS的检测 请简述6个内置的过渡类名有哪些 。进入（enter）：
v-enter: 在元素被插入之前生效 ，在元素被插入之后的下一帧移除
v-enter-active: 在整个进入过渡的阶段中应用 ，在元素被插入之前生效 ，在过渡动画完成之后移除
v-enter-to: 在元素被插入之后下一帧生效（与此同时v-enter被移除） ，在过渡动画完成之后移除
离开（leave）：
v-leave：在离开过渡被触发时立刻生效 ，下一帧被移除
v-leave-active：在整个离开过渡的阶段中应用 ，在离开过渡被触发时立刻生效 ，在过渡完成之后移除
v-leave-to：在离开过渡被触发之后下一帧生效（与此同时v-leave被移除） ，在过渡动画完成之后移除 请简述自定义过渡类名的属性有哪些 。enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
注意：自定义类名的优先级高于普通类名五 、编程题
html代码如下： <body> <!-- 定义登录组件 --> <template id="example1"> <div> <!-- 唯一的根容器 --> <div class="form-input"> <input type="text" name="user" placeholder="请输入手机号/邮箱" class="form-input"> </div> <div class="form-input"> <input type="password" name="psd" placeholder="请输入密码" class="form-input"> </div> <button type="button" class="primary-button"><span>登录</span></button> </div> </template> <!-- 二维码登录 --> <template id="example2"> <div class="pic"> <img src="images/code.jpg"> </div> </template> <div id="content"> <div class="title"> <a href="javascript:;" @click="compontentName = example1,cur=0" :class="{active:cur == 0}">账号登录</a> <a href="javascript:;" @click="compontentName = example2,cur=1" :class="{active:cur == 1}">二维码登录</a> </div> <transition enter-active-class="animated bounceInDown"> <component :is="compontentName"></component> </transition> </div> </body>css代码如下:
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> <style> #content{ width: 400px;; margin: 60px auto; } .title{ height: 50px; border-bottom: 1px solid #e1e7ec; text-align: center; } #content a{ text-decoration: none; color: black; font-size: 16px; background: #f1f1f1; padding: 5px 10px; margin: 0 10px; border-radius: 5px; } .form-input{ height: 46px; line-height: 46px; margin-top: 10px;; } input{ box-sizing: border-box; padding: 0 25px; background: #eef3f5; border-radius: 8px; width: 100%; height: 100%; border: 0; outline: 0; font-size: 14px; } #content .active{ background-color: #09f; color: #fff; } .primary-button{ background: linear-gradient(325deg,#4aa4ff,#1058fa); width: 100%; height: 42px; border-radius: 23px; border: 0; outline: none; color: #fff; letter-spacing: 10px; font-weight: 500; font-size: 16px; cursor: pointer; margin-top: 30px; } .pic{ width: 200px; height: 200px; margin: 0 auto; } .pic img{ width: 100%; height: 100%; } </style>js代码如下：
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> Vue.component(example1,{template:#example1}) Vue.component(example2,{template:#example2}) var vm = new Vue({ el: #content, data: { compontentName :example1, cur:0 } }); </script>2. html代码如下：
<div id="app"> <div> <div v-for=item in showList>{{item}}</div> <div @click="showAll = !showAll" class="status">{{flag}}</div> </div> </div>js代码如下：
<!-- 一开始只显示4个数据 ，点击展开显示全部 --> <script type = "text/javascript"> var vm = new Vue({ el:#app, data() { return { fruitList:[ 草莓,苹果,香蕉,榴莲,香梨 // 进行显示的数据 ], showAll:false, // 标记数据是否需要完全显示的属性 } }, computed:{ showList:function(){ if(this.showAll == false){ var showList = []; if(this.fruitList.length > 4){ // 一开始显示前4个数据 for(var i=0;i<4;i++){ showList.push(this.fruitList[i]) } }else{ showList = this.fruitList } return showList; } else{ return this.fruitList; } }, flag:function(){ if(this.showAll == false){ return 单击展开 } else{ return 单击收起 } } } }) </script>Ω
第5章
一 、 填空题
npm install vue-router 路由对象 命名路由 编程式导航 hash（#号）二 、 判断题
对 错 对 错 对三 、 选择题
A A C四 、 简单题
请简述npm方式安装vue-router的步骤 。1.首先通过cd命令进入创建好的项目目录里面
cd 文件名
2.使用以下npm命令来安装路由
方式一：npm install vue-router --save（不加版本号）
// --save 会在package.json包配置文件中添加对应的配置
方式二：npm install vue-router@3.1.x（指定版本号）
安装完成之后可以在package.json文件中查看到vue-router的相关信息
3.在main.js文件中引入路由 、安装路由功能等 ，示例代码如下
import Vue from ‘vue’
import VueRouter from ‘vue-router’ // 引入插件
import App from ‘./App’
Vue.use(VueRouter) // 注册组件
const router = new VueRouter({ // 创建实例
routes:[] // 配置路由规则
})
const app = new Vue({
el: ‘#app’,
router:router, // 挂载路由
render:h=>h(App)
}) 请简述vue-router路由的作用 。根据不同的url哈希值 ，在路由视图中显示不同的页面 ，实现非跳转式的页面切换
在单页面应用中更新视图可以不用重新请求页面
用户体验好 ，不需要每次都从服务器全部获取 ，快速展现给用户 请简单列举并说明路由对象包括哪些属性 。路由对象表示当前激活的路由的状态信息 ，包含了当前URL解析得到的信息 ，还有URL匹配到的路由记录 ，this.
r
o
u
t
e
r
表
示
全
局
路
由
器
对
象
，
t
h
i
s
.
router表示全局路由器对象 ，this.
router表示全局路由器对象 ，this.route表示当前正在用于跳转的路由器对象 ，$route的常用属性信息如下：
$route.path：对应当前路由地址
$route.query：一个{key:value}对象 ，表示 URL查询参数
$route.params：一个{key:value}对象 ，路由转跳携带参数
$route.hash：在history模式下获取当前路由的hash值（带#） ，如果没有hash值 ，则为空字符串
$route.fullPath：完成解析后的URL ，包含查询参数和hash的完整路径
$route.name：当前路由的名称
$route.matched：路由记录 ，当前路由下路由声明的所有信息 ，从父路由（如果有）到当前路由为止
$route.redirectedFrom：如果存在重定向 ，即为重定向来源的路由五 、编程题
题目：请使用Vue路由相关知识动手实现Tab栏切换案例 。在这里提供了2种方式来实现 ，分别是单页面构建和手动搭建webpack+vue项目 。
第一种方式 html代码如下： <body> <div id="app"> <ul> <li> <router-link to="/payment">待付款</router-link> </li> <li> <router-link to="/deliver">待发货</router-link> </li> <li> <router-link to="/receive">待收货</router-link> </li> </ul> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> <template id="Payment"> <div class="pay"> <p>待付款商品信息</p> </div> </template> <template id="Deliver"> <div class="pay"> <p>待发货商品信息</p> </div> </template> <template id="Receive"> <div class="pay"> <p>待收货商品信息</p> </div> </template> </body>css示例代码如下：
<style> *{ margin: 0; padding: 0; } #app{ width:100%; } #app ul{ height: 30px; list-style: none; display: flex; flex-wrap: wrap; align-content: flex-center; align-items: center; justify-content: space-around; text-align: center; } #app>ul>li{ border: 1px solid red; flex: 1; } li a{ width: 100%; text-decoration: none; line-height: 30px; display: inline-block; } .pay p{ text-align:center; line-height: 200px; } /* router-link激活选中时的状态 */ .router-link-active{ background-color: orange; color: #fff; } </style>js代码如下：
<script> // 1 定义路由组件 const ListOne = {template:#Payment} const ListTwo = {template:#Deliver} const ListThree = {template:#Receive} // 2 定义路由 ，创建 router 实例 const router=new VueRouter({ routes:[ { path: /, redirect: /payment }, { path:/payment,component:ListOne }, { path:/deliver,component:ListTwo }, { path:/receive,component:ListThree %创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！