位置: IT常识 - 正文
Vue（前端框架）(vue前端框架搭建)
编辑：rootadmin推荐整理分享Vue（前端框架）(vue前端框架搭建)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue前端框架技术,vue前端框架技术,vue前端框架模板,vue前端框架搭建,vue前端框架技术,vue前端框架设计,vue前端框架开发,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)]
为什么要使用MVVMMVVM模式和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)]
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body> <!--View层：模板--><div id="app"><p>1:{{firstName}} {{lastName}}</p><p>2:{{name()}}</p><p>3:{{names}}</p><p>4:{{firstName+" "+lastName}}</p></div><script src="js/vue.js"></script><script>new Vue({el:"#app",data:{//model:数据firstName:"张",lastName:"三"},methods:{//方法name(){return this.firstName+" "+this.lastName}},computed:{//计算属性names(){return this.firstName+" "+this.lastName}}})</script></body></html>常用指令[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ZkKziK9-1658970670008)(\java\8.框架\VUE\vue\常用指令.PNG)]
<!--引用js的包--><script src="../js/vue.js"></script> <script> //1.创建vue核心对象 new Vue({ el:"#app", data(){ sex:""; username:"", url:"https://www.baidu.com", count:3, address:["张三","李四","王五"] }, methods:{ show(){ alert("我被点击了...."); } } }); </script>1.v-bind<!--为html标签绑定属性--><div id="app"> <a v-bind:href="url">点击一下</a> <a :href="url">点击一下</a><!--语法糖的简化写法--> <input v-model="url"></div>2.v-on <!--为html标签绑定事件--><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/><!--i为内容--> </div><div v-for="(a,i) in address"> {{i}}——{{a}}<br/><!--i为下标（0开始），a为内容--> </div>6.v-model你可以用v-model指令在表单 <input>、<textarea> 及<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意：v-model会忽略所有元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源，你应该通过JavaScript在组件的data选项中
上一篇：SpringMVC执行流程(springmvc执行流程简单)
下一篇：Win11 Build 23435 预览版今日发布: 文件管理器引入图库功能