位置: IT常识 - 正文
《Vue.js前端开发实战》课后习题答案(vue.js前端开发快速入门与专业应用)
编辑：rootadmin推荐整理分享《Vue.js前端开发实战》课后习题答案(vue.js前端开发快速入门与专业应用)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:《vue.js前端开发实战》,vue.js前端开发实战,vue.js前端开发实战,vue前端开发实战,《vue.js前端开发实战》,vue.js前端开发实战,vue前端开发实战,《vue.js前端开发实战》,内容如对您有帮助，希望把文章链接给更多的朋友！
本答案仅供参考，禁止用于抄袭等不法用途
第一章一、 填空题用户界面ViewModelrefsvue-devtools组件二、 判断题对对对对对三、 选择题DCDAA四、 简答题请简述什么是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-modelv-on二、 判断题对对对对对三、 选择题DACBB四、 简答题请简述什么是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.$rootvm.$datavm.$childreninstallVue.directive()二、 判断题错对对错错三、 选择题DCDBBD四、 简答题请简述什么是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.props:使用vm.props: 使用vm.props:使用vm.props属性可以接收上级组件向下传递的数据 2）. vm.options:Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项3）.vm.options: Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项 3）. vm.options:Vue实例初始化时，除了传入指定的选项外，还可以传入自定义选项3）.vm.el: vm.el用来访问vm实例使用的根DOM元素4）.vm.el用来访问vm实例使用的根DOM元素 4）. vm.el用来访问vm实例使用的根DOM元素4）.vm.children: vm.children用来获取当前实例的直接子组件5）.vm.children用来获取当前实例的直接子组件 5）. vm.children用来获取当前实例的直接子组件5）.vm.root: vm.root用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身6）.vm.root用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身 6）. vm.root用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身6）.vm.slots:插槽就是定义在组件内部的template模板，可以通过slots动态获取7）.vm.slots动态获取 7）. vm.slots动态获取7）.vm.attrs: vm.$attrs可以获取组件的属性，但其获取的属性中不包含class、style以及被
上一篇：Batchsize的大小怎样设置？Batchsize过大和过小有什么影响(batch size 大小)
下一篇：科托尔湾的圣乔治海峡和圣母湾，黑山 (© Dmitrii Sakharov/Shutterstock)(科托儿古城)
