Vue+前端核心分析
Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。
HTML + CSS + JS : 视图 ：
给用户看，刷新后台给的数据网络通信 ： axios
页面跳转 ： vue-router
状态管理：vuex
Vue-UI : ICE , Element UI
VUE 概述
Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。
Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r3HiAnlx-1658970670003)(\java\8.框架\VUE\vue\Vue的介绍.PNG)]
前端三要素
HTML (结构) :超文本标记语言(Hyper Text Markup Language) ，决定网页的结构和内容
CSS (表现) :层叠样式表(Cascading Style sheets) ，设定网页的表现样式
JavaScript (行为) :是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行,用于控制网页的行为
JavaScript框架
jQuery: 大家熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7、8;
Angular: Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发;对后台程序员友好，对前端程序员不太友好;最大的缺点是版本迭代不合理(如: 1代-> 2代，除了名字，基本就是两个东西;截止发表博客时已推出了Angular6)
React: Facebook出品，一款高性能的JS前端框架;特点是提出了新概念[虚拟DOM]用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率;缺点是使用复杂，因为需要额外学习一门[JSX] 语言;
Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点;
Axios :前端通信框架;因为Vue 的边界很明确，就是为了处理DOM,所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery提供的AJAX通信功能;
前端三大框架：Angular、React、Vue
MVVM
什么是MVVM
MVVM (Model-View-ViewModel) 是一种软件架构设计模式，由微软WPF (用于替代WinForm，以前就是用这个技术开发桌面应用程序的)和Silverlight (类似于Java Applet,简单点说就是在浏览器上运行的WPF)的架构师Ken Cooper和Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。
由John Gossman (同样也是WPF和Silverlight的架构师)于2005年在他的博客上发表。
MVVM 源自于经典的MVC (ModI-View-Controller) 模式。
MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下:
该层向上与视图层进行双向数据绑定,向下与Model层通过接口请求进行数据交互
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9G9NRmq6-1658970670005)(F:\java\8.框架\VUE\vue\访问流程.png)]
为什么要使用MVVM
MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型(Model),有几大好处：
低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可复用:你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
可测试:界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
Vue 是 MVVM 模式的实现者
Model : 模型层，在这里表示JavaScript对象
View : 视图层,在这里表示DOM (HTML操作的元素)
ViewModel : 连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者
ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel 能够监听到视图的变化，并能够通知数据发生改变
至此，我们就明白了，Vue.js 就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YiCOjJ06-1658970670006)(F:\java\8.框架\VUE\vue\MVVM.png)]
快速入门
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qwERItv4-1658970670007)(F:\java\8.框架\VUE\vue\快速入门.PNG)]
1:{{firstName}} {{lastName}}
2:{{name()}}
3:{{names}}
4:{{firstName+" "+lastName}}
new Vue({el:"#app",data:{//model:数据firstName:"张",lastName:"三"},methods:{//方法name(){return this.firstName+" "+this.lastName}},computed:{//计算属性names(){return this.firstName+" "+this.lastName}}})常用指令
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ZkKziK9-1658970670008)(\java\8.框架\VUE\vue\常用指令.PNG)]
//1.创建vue核心对象new Vue({el:"#app", data(){ sex:"";username:"",url:"https://www.baidu.com",count:3,address:["张三","李四","王五"]},methods:{show(){alert("我被点击了....");}}});1.v-bind
<div id="app"><a v-bind:href="url">点击一下</a><a :href="url">点击一下</a><input v-model="url"></div>2.v-on
<input type="button" value="按钮" v-on:click="show()"><input type="button" value="按钮" @click="show()">3.v-if
<div v-if="count==3">a</div><div v-else-if="count==4">b</div><div v-else>c</div>4.v-show
<div v-show="count==3">show</div>5.v-for
<div v-for="i in address">{{i}}<br/></div><div v-for="(a,i) in address">{{i}}——{{a}}<br/></div>6.v-model
你可以用v-model指令在表单 、