《Vue.js综合项目实践》课件-任务一页面局部设计

Vue.js核心技术应用——任务一页面局部设计学习目标了解Vue、特点及使用场景掌握Vue开发工具及环境搭建掌握Vue应用编写步骤掌握bootstrap框架panel、table组件的使用知识目标对具体任务的分析解读能力对分析后的操作实施能力对程序的查错纠错能力技能目标培养设计能力养成主动思考、自主学习的习惯提升发现问题、分析问题、解决问题的能力培养创新思维、发散思维培养良好的沟通交流、语言表达及团队合作能力素养目标一、任务描述本任务需要对页面整体规划进行布局与设计，需求要求添加学生信息页面需要规划三个区域，分为导航区域、添加学生信息区域和学生数据显示区域共3部分。二、任务分析本任务是让学生掌握Hbuilder开发工具使用、项目的创建、页面整体布局以及vue模板的编写。根据任务描述，需要进行如下分析：（1）创建项目并导入js文件；（2）引入vue和bootstrap相关js文件；（3）设计布局，使用div划分区域，使用bootstrap的panel、table等组件构建样式；（4）搭建vue模板。三、相关知识（一）初识Vue.js1.什么是Vue.jsVue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。三、相关知识（一）初识Vue.jsVue核心功能：基础功能页面渲染、表单处理提交、帮我们管理DOM(虚拟DOM)节点组件化开发增强代码的复用能力，复杂系统代码维护更简单前端路由更流畅的的用户体验、灵活的在页面切换已渲染组件的显示，不需与后端做多余的交互前端工程化结合webpack等前端打包工具，管理多种静态资源，代码，测试，发布等，整合前端大型项目。状态集中管理MVVM响应式模型基础上实现多组件之间的状态数据同步与管理三、相关知识（一）初识Vue.js3.

Vue.js的特点轻量级的框架双向数据绑定指令组件化客户端路由状态管理三、相关知识（二）开发环境1.HbuliderX开发工具三、相关知识（二）开发环境2.Vue.js文件三、相关知识（二）开发环境3.Node.js文件三、相关知识（二）开发环境4.安装chrome浏览器和vue-tools插件三、相关知识（三）第一个Vue应用1.编写第一个Vue应用在页面输出指定文本需求三、相关知识代码如下：三、相关知识（四）Vue实例1.创建Vue实例在Vue项目中，每个Vue应用都是通过Vue构造器（newVue()）创建新的Vue实例开始的。三、相关知识（四）Vue实例2.

Vue实例配置选项详解选项说明elVue的实例选项dataVue实例数据对象methods定义Vue实例中的方法computed计算属性watch监视属性变化filters过滤器components定义组件三、相关知识（四）Vue实例2.Vue实例配置选项详解-el根标签el选项的作用是指定设置当前vue管理的视图。在创建vue实例时，通过class或id选择器用来将页面结构与vue实例对象vm中的el绑定。三、相关知识（四）Vue实例2.Vue实例配置选项详解-data初始化数据data选项指定设置当前vue实例所使用的数据，data的值可以是一个对象。Vue会将data的属性转换为getter、setter，从而让data的属性能够响应数据变化。访问data中的数据可以通过vue实例对象.属性名去访问数据，vue的实例代理data对象上的所有属性，因此vm.msg等价于vm.$data.msg。四、任务实施实施流程（一）安装HbuliderX开发工具（二）创建项目工程（三）下载vue.js或vue.min.js文件（四）安装node.js（五）安装chrome浏览器和vue-tools插件（六）编写vue模板代码（七）开发页面四、任务实施（一）安装HbuliderX开发工具在浏览器中输入HBuilderX官网地址http://www.dcloud.io/，点击HBuilderX图标进入HBuilderX产品页面。四、任务实施（二）创建项目工程打开软件后，可以点击新建项目来创建我们自己的项目工程。四、任务实施（三）下载vue.js或vue.min.js文件要开发vue程序，首先需要引入vue.js，在官网上下载vue.js。下载地址/v2/guide/installation.html。对于初学者来说选择开发版本（Vue.js）和生产版本（Vue.min.js）均可。四、任务实施（四）安装node.js四、任务实施（五）安装chrome浏览器和vue-tools插件步骤1：先从github上找到vue-devtools的项目，下载到本地。下载地址：/vuejs/vue-devtools#vue-devtools步骤2：在chrome浏览器输入地址：“chrome://extensions/”进入扩展程序页面，然后点击“加载已解压的扩展程序...”按钮四、任务实施（六）编写vue模板代码创建要控制的div元素，创建vue实例用来管理div元素四、任务实施（七）开发页面编写导航区域代码、添加功能区域和表格区域代码。初始化数据并显示四、任务实施（七）开发页面引入bootstrap.min.css文件四、任务实施（七）开发页面使用bootstrap框架中的panel、table布局，在data属性中初始化三个对象数据。五、任务评估（一）考核方法本任务采用线上+线下、教师评价、组间互评等“工程师+教师+学生+平台”多主体参与的过程性、多元化、个性化、综合化考核评价模式。从多角度全面考察，更加客观科学，也更好地调动学生自主学习、独立思考和勇于创新的积极性，并将小组团队考核带入个人考核，突出团队协作能力的培养。1.由网络教学平台全程记录学生的学习轨迹和得分详情，按照预先设置的权重，将线下评价与线上评价相结合，自动分析生成学生的综合成绩；2.答辩式。针对提前完成项目的学生可以随时可申请考核，提前通过对项目的详细分析和讲解，通过企业工程师、老师和同学提问的方式进行考核，由企业工程师和专业老师共同把关。五、任务评估（二）相关知识评估1.如何搭建vue开发环境？2.如何编写vue模板？3.如何理解vue常用实例？4.使用vue开发应用的流程是什么？五、任务评估