教程揭秘 | 动力节点内部Java零基础教学文档第十七篇：vue
接上期后续
本期分享第十七章节
vue
已经分享一大半了，你们都跟上了吗？
每天都在学习嘛？
有什么不会的嘛？
今日教学文档分享来了
今日新篇章
【Vue】
1. 【熟悉】Vue简介
1.1 简介
它是一个构建用户界面的框架 Vue是一个前端框架 js jq
https://www.pmdaniu.com/#file UI网站
UI 一般开发者使用蓝湖 工具 看着UI图 写接口
https://lanhuapp.com/web/#/item
是一个轻量级的MVVM（Model-View-ViewModel），其实就是所谓的数据的双向绑定
Mvc
数据驱动和组件化的前端开发
通过简单的API就能实现响应式的数据绑定和组合的视图组件
指令：
用来扩展html标签的功能
https://cn.vuejs.org/
给页面的id=”app”的DIV里面插入某此HTML代码
JS--- document.getElementById(‘app’).innerHtml=””
JQ--- $(“#app”).text()
1.2 其它
简单、易学、更轻量
指令v-xxx开头 v-if v-for 这些作用在html标签中
HTML + JSON数据
开发者 尤雨溪 华人 Vue React
这几个框架都不兼容低版本IE window Xp
2. 【重点】MVVM的思想
2.1 MVVM 设计思想
MVC
|--M Model （domain,service,serviceimpl.utils.pojo.mapper）
实体类
Entity Domain pojo --->指数据库里面的表的映射对象
Vo view object 后端构造数据对象转给前端的对象
DeptDto/DeptForm 数据传输对象 接收前端传过来的数据
|--V view thymeleaf jsp html
|--C controller 接收前端请求(控制器) /Servlet
Model：对应数据层的域模型，它主要做域模型的同步。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在模型层间关系里，它主要用于抽象出 ViewModel 中视图的 Model。个人理解：后端提供API，后端服务架构是 控制器+数据模型 或者 纯控制器。
View：View是作为视图模板，用于定义结构、布局。它自己不处理数据，只是将ViewModel中的数据展现出来。此外为了和ViewModel产生关联，那么还需要做的就是数据绑定的声明，指令的声明，事件绑定的声明。ViewModel和View之间是双向绑定，意思就是说ViewModel的变化能够反映到View中，View的变化也能够改变ViewModel的数据值。
ViewModel：ViewModel起着连接View和Model的作用，同时用于处理View中的逻辑。在MVC框架中，视图模型通过调用模型中的方法与模型进行交互，然而在MVVM中View和Model并没有直接的关系，在MVVM中，ViewModel从Model获取数据，然后应用到View中。个人理解：Web前端的webserver对View进行双向绑定渲染。
整个MVVM实际上实现了前后端分离，通过api来实现前后端交互，前端通过纯js或者双向绑定框架来渲染页面。
前后端不分离（crm页面写在crm项目里面 html thymeleaf（模板引擎） ）
前后端分离
大概如：
数据库（MySQL、PostgreSQL）<—双向交互—>api（php、java、Python、node）<—双向交互—>ajax/fetch/websocket（node服务、jQ、js）<—双向绑定—>html（标签、css）。
MVVM有利于项目分工和升级，所谓对前后端分离。但也有缺点，就是不利于 。
MVC：服务端来渲染数据，老旧模式。MC属于纯后端，V属于前端，js权重不高，有利于SEO。
万物基于api，一套api可以针对小程序、app、前端，为何不首先使用。需要SEO对部分，单独分离出项目，采用MVC渲染静态页面或者纯html即可。
2.2 MVVM图例解析
3. 【掌握】IDEA开发环境的配置
3.1 安装插件
3.2 创建前端项目
4. 【掌握】安装和部署
https://cn.vuejs.org/v2/guide/installation.html
4.1 直接下载并用 <script> 标签引入
Vue 会被注册为一个全局变量。
在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!
开发版本包含完整的警告和调试模式
https://cn.vuejs.org/v2/guide/installation.html
4.2 CDN
对于制作原型或学习，你可以这样使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
4.3 NPM【后面讲】
在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
# 最新稳定版
$ npm install vue
4.4 导入js到项目里面
4.5 第一个Vue应用HelloWorld
1.idea下载插件 （因为下了插件有提示）Vue.js
5. 【掌握】v-text,v-html,v-pre,v-once指令
Js --- innerText innerHtml
Jq --- text() html()
Vue v-text v-html
5.1 概述
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
5.2 v-text
v-text主要用来更新textContent，可以等同于JS的innerText属性。
<span v-text="msg"></span>
这两者等价：
<span>{{msg}}</span>
5.3 v-html
双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。
或者jquery的$().html(aaa)
<div v-html="rawHtml"></div>
这个div的内容将会替换成属性值rawHtml，直接作为HTML进行渲染。
5.4 v-pre
v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。
<div id="app">
<span v-pre>{{message}}</span> //这条语句不进行编译
<span>{{message}}</span>
</div>
最终仅显示第二个span的内容
5.5 v-once
v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。
上面的例子中，msg即使产生改变，也不会重新渲染。
5.6 案例
6. 【掌握】属性绑定、事件绑定、双向绑定
涉及指令
1，v-bind 字面意思为绑定。是vue中提供的用户绑定属性的指令。v-bind可简写成:
2，v-on 事件绑定指令 可以简写成@
3，v-model 只能用于表单元素的双向绑定指令
6.1 属性绑定
在以前的开发中。我们使用title属性去设置鼠标悬浮的显示值，在vue 中可以使用V-bind去动态设置属性，以title为例
6.2 事件绑定(v-model 一般用于表单)
在以前的开发中。我们使用onclick等属性去设置点击事件，在vue 中可以使用v-on去设置方式，可简写成@
6.3 双向绑定v-model
v-model 只能用于表单元素的双向绑定指令
v-bind是单向绑定
6.4 双向绑定v-model 小练习
7. 【重要】条件渲染v-if v-show
7.1 相关指令
1，v-if
2，v-else
3，v-else -if
4，v-show
7.2 v-if
v-if可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。
如果属性值ok为true，则显示。否则，不会渲染这个元素。
7.3 v-else
v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。
7.4 v-else-if
v-else-if充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。
7.5 v-show
<h1 v-show="ok">hello world</h1>
也是用于根据条件展示元素。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。
注意：v-if有更高的切换开销
v-show有更高的初始渲染开销。
因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好
7.6 案例
8. 【重点】列表渲染v-for
8.1 v-for
用v-for指令根据遍历数组来进行渲染 前端不叫集合
有下面两种遍历形式
<div v-for="(item,index) in items"></div> //使用in，index是一个可选参数，表示当前项的索引
<div v-for="item in items"></div> //使用in
下面是一个例子，并且在v-for中，拥有对父作用域属性的完全访问权限。
8.2 v-for案例
8.3 for-layuiCRUD案例
9. 【了解】过滤器的使用
作用就是格式化
9.1 概述
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
过滤器分为两种
Ø 全局过滤器 所有Vue实例里面都可以使用
Ø 局部过滤器 当前的Vue实例里面可以使用
9.2 代码
10. 【了解】监听器的使用
10.1 作用
用来监听data里面的某一个数据是否发生变化。如果发生变化就会触发监听器的方法
10.2 代码
11. 【掌握】购物车
11.1 效果
11.2 代码
12. 【重点】生命周期（页面渲染顺序）【重点内容】
12.1 生命周期图【重点注意create方法】
12.2 代码
13. 【特别重点】组件使用
13.1 什么是组件
组件的出现，是为了拆分Vue的代码块，不用同的组件划分不同的功能模块，以后我们需要某个功能时，就直接调用对应的组件即可
模块化：模块化是从代码的角度去分析的，方便代码分层开发，保证每个模块职责单一
组件：组件化是从界面的角度去划分的，如：分页组件、轮播、颜色选择、文件上传等
抽象 是把公共的东西 像的东西抽出来 （好处：复用，公共的，缺点：代码的可读性直线下降）
变量名说明：（组件的使用规范）
按java的开发思想，变量名往往是驼峰规则 myComponent my-component
在vue中定义组件可以使用驼峰规则，但是使用组件的时候如果存在驼峰，应该全部改成小写，并把每个单词用-连接 有点像springboot的yml配置文件的语法
组件模板的说明
组件里面必须只有一个template标签
组件的template里面的html代码只能有一个根节点
13.2 组件的第一种声明方式
13.3 组件的第二种声明方式
13.4 组件的第三种声明方式（常用）
13.5 掌握vue中组件的data和methods
组件中也可以有自己的Data和methods，
组件里面的data必须是一个方法 原因如下
组件在存在是为有复用，定义一个组件之后，可能会有多个地方使用到该组件。如果按data:{}的写法，多个组件会复用同一个data，降低组件的复用性，而定义为function则不会
13.6 私有组件的使用
上面的创建方法都是公有的组件，如果只想一个组件在某一个Vue实例里面使用，就可以使用私有组件
13.7 掌握vue组件之间的切换方式
13.7.1 使用v-if v-else v-else-if去切换组件
13.7.2 使用component占位 去实现[适合组件多的情况]
13.8 父子组件传值
13.8.1 子组件直接获取父组件数据（父组件将值传递给子组件）
场景：数据表格将值传递给分页组件
13.8.2 使用方法把子组里面的数据传递到父组件（子传父）
场景：回调场景
13.9 掌握父组件调用子组件的方法【重点掌握】
平级组件怎么互相传值：借助父组件来传递
14. 【特别重点】路由
14.1 什么是路由及作用
什么是路由
后端：对于普通网站，所有的超链接都对应一个url地址，每个url都对应服务器上的资源
前端：对于单页面应用程序来说的，主要通过url中的#（hash）去实现的，(当关于a标签)
作用：就是用来做跳转的局部更新页面内容
14.2 掌握vue路由的基本使用
1.添加一个路由的js文件
127.0.0.1:8080/user?username=admin&password=123456
14.3 掌握路由跳转传参的方式
14.3.1 地址传参【不推荐】数据在$route.query里面
14.3.2 rest风格【推荐】数据在$route.param里面
14.4 掌握路由的嵌套使用
就是路由里面套路由，如登陆页面可以使用手机或者账号密码登陆
14.5 掌握编程式导航的路由跳转
什么是编程试导航
就是通过按钮点击调用方法通过方法去转到某个路由
由于字数限制本文只分享了一半哦
完整版获取可私信小动~
更多干货我们下期再说！
下期会分享
第十八章节
SpringSecurity
相关知识~
下期见！
