Vue简介 骑猪看日落 2021-07-24 18:11 266阅读 0赞 **目录** 一 点睛 二 MVVM模式的实现者 三 为什么要使用Vue.js 四 入门实例 五 集成场景 六 开发工作流 七 参考资料 # **一 点睛** # Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue只关注视图层,采用自底向上增量开发的设计。 Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。 Vue的核心可只关注于视图层,不仅容易上手,还便于与第三方库(vue-router,vue-resource,vuex)或既有项目整合。 # 二 MVVM模式的实现者 # * Model:模型层,在这里表示JavaScript对象。 * View:视图层,在这里表示DOM(HTML操作的元素)。 * ViewModel:连接视图和数据的中间件,Vue.js就是MVVM中ViewModel层的实现者. 在MVVM架构中,是不允许数据和视图直接通信的,只能通过ViewModel来通信,而ViewModel就是定义了一个Observer观察者。 ViewModel能够观察到数据的变化,并对视图对应的内容进行更新。 ViewModel能够监听到视图的变化,并能够通知数据发生改变。 到此,我们明白,Vue.js就是一个MVVM的实现者,它的核心就是实现了DOM监听与数据绑定。 # 三 为什么要使用Vue.js # * 轻量。压缩后只有20多k。 * 移动优先。 * 容易上手,学习曲线平稳,文档齐全。 * 吸取了Angular(模块化)和React(虚拟DOM)的长处,并拥有自己独特的功能,如计算属性。虚拟DOM与DIFF算法描述如下:它是Vue的核心。Vue之所以高效,就是虚拟的dom和diff算法,vue不通过修改dom树来达到修改的效果,而是直接在页面上改那个元素,此时这个元素就是一个虚拟的dom。那么vue怎样改呢?通过diff算法,计算出虚拟的dom修改后和修改前的区别,然后在虚拟dom的原基础上进行修改,这样效率就大大提升了。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][] * 开源,社区活跃度高。 # **四 入门实例** # 1 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>入门实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <p>{ { message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script> </body> </html> 2 效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][] # **五 集成场景** # 1 单页面、多页面引入Vue.js 2 复杂单页面应用Vue cli工具。 # **六 开发工作流** # 1 需求调研(确定需求) 2 交互设计、逻辑设计、接口设计 3 代码实现、测试运行、线上部署 # **七 参考资料** # Webpack 入门教程:[http://www.runoob.com/w3cnote/webpack-tutorial.html][http_www.runoob.com_w3cnote_webpack-tutorial.html] 官方文档:[http://vuejs.org/v2/guide/syntax.html][http_vuejs.org_v2_guide_syntax.html] 中文文档: [https://cn.vuejs.org/v2/guide/syntax.html][https_cn.vuejs.org_v2_guide_syntax.html] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/918834fa716a413b9de2ff73ecb434a2.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/41d7bf031d3a4994b5b1a864af99497a.png [http_www.runoob.com_w3cnote_webpack-tutorial.html]: http://www.runoob.com/w3cnote/webpack-tutorial.html [http_vuejs.org_v2_guide_syntax.html]: http://vuejs.org/v2/guide/syntax.html [https_cn.vuejs.org_v2_guide_syntax.html]: https://cn.vuejs.org/v2/guide/syntax.html
相关 Vue - 简介 渐进式Javascript框架,动态构建用于界面。 Vue的特点 * **MVVM**模式 (Model - View - ViewModel) * 编码简... 傷城~/ 2024年04月17日 15:11/ 0 赞/ 17 阅读
相关 vue简介 一.前后端分离 既然我们在开发中使用前后端分离模式,也就是前端拿到后端的数据时怎么处理,怎么输出都有前端自己来实现,这样就需要写大量的js代码,而为了简化js的代码,就衍 £神魔★判官ぃ/ 2024年03月30日 09:10/ 0 赞/ 17 阅读
相关 Vue简介 聚沙成塔·每天进步一点点 ⭐ 专栏简介 Vue学习之旅的奇妙世界 欢迎大家来到 Vue 技能树参考资料专栏!创建这个专栏的初衷是为了帮助大家更好地应对 Vue.js 技 朱雀/ 2024年02月05日 16:56/ 0 赞/ 11 阅读
相关 Vue简介 什么是vue? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 妖狐艹你老母/ 2023年09月27日 09:42/ 0 赞/ 65 阅读
相关 Vue简介 什么是 Vue? Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便 谁践踏了优雅/ 2023年07月01日 07:29/ 0 赞/ 25 阅读
相关 Vue简介 [2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] Vue.js(读音 /vjuː/,类似于 view) 是 ﹏ヽ暗。殇╰゛Y/ 2021年09月20日 03:12/ 0 赞/ 194 阅读
相关 Vue.js 简介 一、Vue.js 简介 1.1 认识 Vue.js 1.2 Vue.js 安装 1.3 Vue.js 初体验 落日映苍穹つ/ 2021年09月07日 08:10/ 0 赞/ 259 阅读
相关 Vue简介 目录 一 点睛 二 MVVM模式的实现者 三 为什么要使用Vue.js 四 入门实例 五 集成场景 六 开发工作流 七 参考资料 一 点睛 Vue.js( 骑猪看日落/ 2021年07月24日 18:11/ 0 赞/ 267 阅读
还没有评论,来说两句吧...