教程揭秘 | 动力节点内部Java零基础教学文档第六篇：Vue基础
接上期后续
本期分享第六章节-Vue基础
已经分享三分之一了，你们都跟上了吗？
每天都在学习嘛？
有什么不会的嘛？
今日教学文档分享来了
今日新篇章
【Vue基础】
1. 【熟悉】Vue简介
1.1 简介
它是一个构建用户界面单页面的框架 Vue是一个前端框架
https://www.pmdaniu.com/#file UI网站
UI 一般开发者使用蓝湖 工具 看着UI图 写接口
https://lanhuapp.com/web/#/item
是一个轻量级的MVVM（Model-View-ViewModel），其实就是所谓的数据的双向绑定
Mvc
M---model mapper domain utils service servceimpl
V----view html thymeleaf
C----controller
数据驱动和组件化的前端开发
通过简单的API就能实现响应式的数据绑定和组合的视图组件
指令：
用来扩展html标签的功能
https://cn.vuejs.org/
1.2 其它
简单、易学、更轻量
指令v-xxx开头 v-if v-for 这些作用在html标签中
HTML + JSON数据
开发者 尤雨溪 华人 Vue React
这几个框架都不兼容低版本IE window Xp
2. 【重点】MVVM的思想
2.1 Ajax请求数据 显示到页面
1，点击按钮触发事件
2，使用$.post $.get $.ajax 发请求
3，请求 完成之后拿到数据
4，使用document.getElementById(“id”)找到页面的dom对象
5，把第三部请求回来的数据使用innerText innerHtml去修改
2.2 MVVM 设计思想
MVC
|--M Model （domain,service,serviceimpl.utils.pojo.mapper）
|--V view thymeleaf jsp html
|--C controller 接收前端请求(控制器)
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.3 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 NPM【后面讲】
在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
# 最新稳定版
npm install vue
4.3 导入js到项目里面
4.4 第一个Vue应用HelloWorld
1.idea下载插件 （因为下了插件有提示）Vue.js
4.5 配置页面模板
5. 【掌握】v-text,v-html,v-pre,v-once指令
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标签。跳过大量没有指令的节点加快编译。
最终仅显示第二个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 v-for-CRUD案例
9. 【了解】过滤器的使用
作用就是格式化
9.1 概述
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
过滤器分为两种
Ø 全局过滤器 所有Vue实例里面都可以使用Vue.filter
Ø 局部过滤器 当前的Vue实例里面可以使用
9.2 代码
10. 【了解】监听器的使用
10.1 作用
就是用来监听data里面的数据值是否发生变化。如果发生变化会触发监听器
10.2 案例
11. 【掌握】购物车
11.1 效果
11.2 代码
12. 【重点】生命周期（页面渲染顺序）【重点内容】
12.1 生命周期图【重点注意create方法】
12.2 代码
完整版获取联系小动~
更多干货我们下期再说！
下期会分享
第七章节
servlet
相关知识~
下期见！
