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

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）均可。

四、任务实施（四）安装n