《软件建模与软件文档写作》课件-5-1.前端Vue.js开发基础

创新信息技术共享智慧未来VUE基础主讲人：康罗娜课程学习目标vue.js是什么安装vue，创建项目项目目录介绍指令与事件生命周期数据绑定与数据渲染渲染基础组件与传值路由页面示例前后台数据交互项目功能模块梳理什么是vue.jsvue.js是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架；vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。MVC模式（Model–view–controller）是软件工程中的一种软件架构模式，它把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）模型（Model）：程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的功能)；控制器（Controller）：负责转发请求，对请求进行处理；视图（View）：界面设计人员进行图形界面设计。安装VUE直接用<script>引入NPM安装

npminstallvue（需要先安装node.js） npminstall--globalvue-cli

创建VUE项目vueinitwebpackmy-project(项目名称) ......此时需要一些配置 cdmy-projectnpminstallnpmrundevvue-cli地址：/zh/创建VUE项目script引入CLI创建git地址：‘’gitclone‘url’cd‘文件名’npminstallnpmrundev项目已经创建好了，直接clone即可项目目录介绍src：源代码文件夹api：所有的请求assets：

静态资源目录components：

全局公共组件router:路由配置utils:全局公共方法views:页面app.vue:页面入口git使用gitcloneurl拷贝远程仓库到本地gitadd*添加文件到暂存区gitcommit-m“提交更改的内容”提交暂存区到本地仓库gitstatus查看仓库当前的状态，显示有变更的文件。gitpull下载远程代码并合并(有些会自动合并，有些不会，则需要手动解决冲突)gitpush上传远程代码并合并gitcheckout-b‘分支名’创建本地分支并切换gitcheckout‘分支名’切换分支gitbranch-d‘分支名’删除本地分支gitbranch查看本地分支gitbranck-a查看所有分支gitbranck-r查看远程分支gitpushorigin‘本地分支名’推送本地分支至远程

，即远程也创建了这个分支但是再次pull或者push时候会报错，此时需要将本地与远程建立关联gitbranch--set-upstream本地新建分支名origin/远程分支名参考：/sinat_31057219/article/details/102822594vscode插件安装AutoRenameTag

匹配标签，关闭对应的标签HTMLCSSSupport

用于HTML的CSS智能感知ElementUISnippetselemenUI片段ESLint将ESLintJavaScript集成到VSCode中。JavaScript(ES6)codesnippetsES6语法中的JavaScript代码片段Prettier-Codeformatter格式化js、css代码插件PrettierESLint

格式化JavaScript和TypescriptVeturVScode中的VUE工具，高亮、格式化element-ui使用1、npm引入：npmielement-ui-S2、CDN引入<!--引入样式--><linkrel="stylesheet"href="/element-ui/lib/theme-chalk/index.css"><!--引入组件库--><scriptsrc="/element-ui/lib/index.js"></script>3、npm引入的需要在main.js中引入才能使用本项目调用的是"element-ui":"2.13.2"，已经引入了，直接使用即可如：<el-inputv-model="input"placeholder="请输入内容"></el-input>指令插值：<span>Message:{{msg}}</span>指令：v-bind与v-onv-bind数据绑定v-on绑定事件

事件事件：v-on指令监听DOM事件v-on后面跟的是事件名称=后面是该事件触发的方法名所有定义的方法需要写在methods中方法名传参：

<button@click="handleNum(666)">(v-on简写)</button>handleNum(num){this.num=num}

结果：num:6指令修饰符<!--阻止单击事件继续传播--><av-on:click.stop="doThis"></a><!--提交事件不再重载页面--><formv-on:submit.prevent="onSubmit"></form><!--修饰符可以串联--><av-on:click.stop.prevent="doThat"></a><!--只有修饰符--><formv-on:submit.prevent></form><!--添加事件监听器时使用事件捕获模式--><!--即内部元素触发的事件先在此处理，然后才交由内部元素进行处理--><divv-on:click.capture="doThis">...</div><!--只当在event.target是当前元素自身时触发处理函数--><!--即事件不是从内部元素触发的--><divv-on:click.self="doThat">...</div>.prevent

阻止浏览器的默认事件的。.stop阻止冒泡.capture打乱冒泡顺序.self不让子元素的事件触发自己绑定的事件，但是不会阻止冒泡.once事件只会触发一次生命周期每个Vue实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数。beforeCreate(创建前)created(创建后)beforeMount(载入前)mounted(载入后)beforeUpdate(更新前)updated(更新后)beforeDestroy(销毁前)destroyed(销毁后)Vue第一次页面加载会触发beforeCreatecreatedbeforeMountmounted四个钩子函数DOM渲染在mounted这个周期就已经完成数据绑定与渲染v-bind绑定数据，如果是多条数据渲染呢？v-for渲染列表数据<ulid="example-1"><liv-for="iteminitems":key="item.message">{{item.message}}</li></ul>渲染的数据需要在特定情况下显示，可以使用v-if，v-show，与v-if搭配的有v-else-if、v-elsev-if：dom不会被创建v-show：dom创建，相当于css给了display:none组件创建button-counter为组件名称template是组件模板组件创建后可以直接调用组件传值子组件传值给父组件传递：this.$emit(‘on-change’,‘要传递的值’)接收：<son@on-change=“todoEvent”/>父组件传值给子组件传递：<son:data=”data”/>接收：props：{ data：{ type:Array,//接收的组件类型 }}子组件调用父组件的方法this.$parent.父组件的方法名子组件传值给父组件，父组件触发该事件调用方法父组件调用子组件的方法this.$refs路由VueRouter是Vue.js的官方路由。它与Vue.js核心深度集成，让用Vue.js构建单页应用变得轻而易举。功能包括：嵌套路由映射动态路由选择模块化、基于组件的路由配置路由参数、查询、通配符展示由Vue.js的过渡系统提供的过渡效果细致的导航控制自动激活CSS类的链接HTML5history模式或hash模式可定制的滚动行为URL的正确编码路由嵌套一些应用程序的UI由多层嵌套的组件组成。在这种情况下，URL的片段通常对应于特定的嵌套组件结构，例如：相关地址：/zh/guide/essentials/nested-routes.html路由跳转与传参获取路由的传参this.$roue.query.id//123path路径跳转this.$router.push(url)url后面可以拼接参数user?id=123命名式路由跳转（name）this.$router.push({ name:‘路由的名称’, query:{ name:‘需要携带的参数’ ...其他参数 }})编程式路由跳转this.$router.push({ name:‘路由的名称’, query:{ name:‘需要携带的参数’ ...其他参数 }})页面示例每个大模块新建一个文件夹，其中有与之相关的小模块1、在views中新增【服务中心管理】模块的文件2、新增页面后在router-index.js中配置路由3、开始写页面了注意：路由配置可以配置该页面是否在左侧菜单中显示（hidden）、重定向地址（redirect）、是否显示面包屑（breadcrumb）、当前选中的菜单路由（activeMenu）一般用于子页面前后台数据交互在utils中有封装的axios请求request文件在api下面的ServiceConfig.js页面中引入request后调用在页面中引入方法调用该请求功能模块梳理—查询1、是否有搜索条件？有搜索条件则要确认搜索对应的字段是哪一个，是否支持模糊搜索2、是否分页？分页组件选取，每一页的数据条数，页码或者每页数量改变后的查询3、搜索条件是否可以重置搜索后点击重置，需清空搜索条件后搜索4、查询条件中是否有日期查询入参的日期格式，是否需要YYYY-MM-DDHH:mm:ss5、查询后的列表展示根据后台返回的字段展示，如果涉及到时间的看是否需要根据实际情况格式化日期如果保存的时候存的value，则需要后台查询出对应的name功能模块梳理—新增1、数据校验非空校验，数据格式校验数据格式如：身份证、年龄、手机号码等blur时需要校验输入是否正确在点击保存时需要校验整个表单的数据2、数据来源下拉框或者级联下拉数据都需要与产品确认确认后数据一般由后台做数据字典，前端从后台查询3、计算有些涉及到金额计算的，需要在一个触发计算的时机（可以是点击计算按钮计算、也可以是输入完成后计算）如果是点击按钮计算，那么在保存的时候则一定要再调用一次计算方法。4、数据长度一般输入类型的需要根据实际情况清空限制用户输入内容的长度，此时前后端的限制最好保持一致，或者后端大于前端功能模块梳理—删除单条数据删除1、数据是否可以删除

删除需要确认是否有关联其他数据，如：知识库管理中删除知识库分类，需要确认该分类下是否有数据

删除提示，询问是否确认删除批