没有合适的资源?快使用搜索试试~ 我知道了~
首页Vue.js与iView UI非工程化实践:MVVM探索
本文主要讲述了作者基于Vue.js和iView UI框架进行非工程化实践的过程与心得。Vue.js是由美籍华人尤雨溪创建的一款轻量级的JavaScript框架,它的设计初衷是简化Angular.js的复杂性,提供易于理解和使用的MVVM(Model-View-ViewModel)模式。MVVM的核心理念是将视图、数据模型和视图层分离,通过双向绑定实现数据变化与视图的实时同步,极大地提高了开发效率。 作者选择非工程化的方式入门,因为这有助于快速体验MVVM模式。非工程化意味着没有采用完整的项目构建工具,如Webpack,而是直接使用Vue.js的API进行开发。尽管书中推荐了webpack,但作者出于习惯和初期学习的考虑,暂时跳过了这个阶段。iView UI作为基于Vue.js的UI组件库,提供了丰富的现成组件,方便开发者快速构建界面。 MVVM模式在Vue.js中的应用体现在组件化开发中,就像搭建积木一样,开发者只需要关注数据逻辑,视图的更新则由框架自动处理。这种方式大大降低了代码复杂性,使得开发者可以更专注于业务逻辑,而非底层实现。 文章详细描述了作者如何通过Vue.js和iView UI实现了非工程化开发,以及他对MVVM模式的理解和初次体验。虽然非工程化有一定的局限性,比如缺乏模块化管理和打包优化,但对于初学者来说,这是一种简单有效的学习路径。作者承诺在后续时间充裕时,会分享关于工程化构建的学习心得,以完善整体的开发流程。 本文是一个有价值的实践指南,对于想要学习或尝试使用Vue.js和iView UI框架的开发者,特别是希望快速理解和实践MVVM模式的开发者,提供了实用的入门经验和参考。
资源详情
资源推荐
基于基于 Vue.js 之之 iView UI 框架非工程化实践记录框架非工程化实践记录(推荐推荐)
为了快速体验 MVVM 模式,我选择了非工程化方式来起步,并选择使用 Vue.js,以及基于它构建的 iView UI 框
架。本文给大家分享基于 Vue.js 之 iView UI 框架非工程化实践记录,需要的朋友参考下吧
像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引
用一下,不需要就删除。故观念使然,尽管 Nuget 和 Maven 用得顺溜,但对 NPM 仍不带感,兴许是周边无人带动的稀薄气
氛,也或者是没参加过类似的大型活动,于是在自发性上差了许多。再者,我不用 MVVM 模式,领导也不会扣绩效。
为了快速体验 MVVM 模式,我选择了非工程化方式来起步,并选择使用 Vue.js,以及基于它构建的 iView UI 框架。
Vue.js 是美籍华人尤雨溪创作的,那会儿他还在 Google 工作,他自感 Angular.js 繁杂,进而自创了更为简洁易用的 Vue.js。
iView UI 是由 90 后梁灏[hào]创作,网名 Aresn,在大数据公司 TalkingData 负责可视化基础架构,更了不起的是他还出了
《Vue.js实战》一书,我是在“双十一”的前一天买的,行文措词简洁,表意直达困惑,入门很迅速,是我喜欢的风格。花了一
周时间扫完了前十二章内容,用 WebStorm 练习了大部分实例,尽管书中用一整章内容介绍了 webpack 工程化构建方案,但
由于我惯性使然,还是选择对其跳过而使用了非工程化方式来体验 Vue.js,其实多少有失暴殄。无奈,毕竟才学了一周,后
期时间充裕了再接着分享工程化构建的学习心得吧。
一、一、 MVVM 模式模式
Vue.js 比较显著的特征是解耦了视图和数据,也就是说视图的变化不再需要命令式编程去显式改变,只要修改完数据就能立即
自动同步,这是比较大的一个思维模式的转变,另一个就是组件化思维俯首皆是,这样开发一个应用就相当是在搭积木。
其实以上对 Vue.js 所阐述的优点也正是 MVVM 模式的写照,它原是由 MVC 所衍生,即当视图层发生变化时,会自动更新到
视图模型上,反之亦然,这就是常说的双向绑定,上一张图吧:
甭管这图是否好理解,通俗地来讲,MVVM 这种模式拆分了视图和数据,这样我们在开发时只要关心数据本身即可,然后视
图 DOM 这方面会由 Vue.js 自动解决。
二、非工程化起步二、非工程化起步
为了能支撑起一个最基本的应用,需要引入以下几个必要文件:
1. vue.min.2.5.3.js,vue.js 库
2. iview.2.7.0.css,iView 样式文件
3. iview.min.2.7.0.js,iView 库
4. iview /locale/zh-CN.js 语言包
5. iview /font 字体包
下载下载 Vue.js
来到 Github 上的 Vue 项目,直接下载 Zip 源码:
在 dist 目录中就可以找到 vue.js 文件:
根据不同的环境选择一个版本即可,至此第 1 步就搞定了。
下载下载 iView 系列文件系列文件
在 iView 官网的“组件” / “安装” 页面的开头处发现了这个链接:https://unpkg.com/iview/**,通过它可以查看到 dist** 目录:
必要文件都在这里,这些文件无法打包下载,我采取的笨办法是逐个点开,然后复制其中的内容。
在获取 iView 相关的 js 和 css 方面还有一个办法,仔细观察官网给出的 CDN 地址分别为:
http://unpkg.com/iview/dist/iview.min.js
http://unpkg.com/iview/dist/styles/iview.css
我尝试将它们放在浏览器里进行访问:
发现地址有变更,不过这并无大碍。
至此,将各个文件放在期望的位置即可:
下载后可阅读完整内容,剩余4页未读,立即下载
weixin_38705788
- 粉丝: 6
- 资源: 907
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++多态实现机制详解:虚函数与早期绑定
- Java多线程与异常处理详解
- 校园导游系统:无向图实现最短路径探索
- SQL2005彻底删除指南:避免重装失败
- GTD时间管理法:提升效率与组织生活的关键
- Python进制转换全攻略:从10进制到16进制
- 商丘物流业区位优势探究:发展战略与机遇
- C语言实训:简单计算器程序设计
- Oracle SQL命令大全:用户管理、权限操作与查询
- Struts2配置详解与示例
- C#编程规范与最佳实践
- C语言面试常见问题解析
- 超声波测距技术详解:电路与程序设计
- 反激开关电源设计:UC3844与TL431优化稳压
- Cisco路由器配置全攻略
- SQLServer 2005 CTE递归教程:创建员工层级结构
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功