这篇文章给大家分享的是有关Vue。js之iView UI框架非工程化的示例的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强> Vue。js之iView UI框架非工程化实践
iView UI是由90后梁灏(郝)创作,网名Aresn,在大数据公司TalkingData负责可视化基础架构,更了不起的是他还出了《Vue。js实战》一书,我是在“双十一”的前一天买的,行文措词简洁,表意直达困惑,入门很迅速,是我喜欢的风格。花了一周时间扫完了前十二章内容,用WebStorm练习了大部分实例,尽管书中用一整章内容介绍了webpack工程化构建方案,但由于我惯性使然,还是选择对其跳过而使用了非工程化方式来体验Vue。js,其实多少有失暴殄。无奈,毕竟才学了一周,后期时间充裕了再接着分享工程化构建的学习心得吧。
一、MVVM模式
Vue。js比较显著的特征是解耦了视图和数据,也就是说视图的变化不再需要命令式编程去显式改变,只要修改完数据就能立即自动同步,这是比较大的一个思维模式的转变,另一个就是组件化思维俯首皆是,这样开发一个应用就相当是在搭积木。
其实以上对Vue。js所阐述的优点也正是MVVM模式的写照,它原是由MVC所衍生,即当视图层发生变化时,会自动更新到视图模型上,反之亦然,这就是常说的双向绑定,上一张图吧:
甭管这图是否好理解,通俗地来讲,MVVM这种模式拆分了视图和数据,这样我们在开发时只要关心数据本身即可,然后视图DOM这方面会由Vue。js自动解决。
二,非工程化起步
为了能支撑起一个最基本的应用,需要引入以下几个必要文件:
vue.min.2.5.3.js, vue。李js库
<李>iview.2.7.0。css, iView样式文件
<李>iview.min.2.7.0。js、iView库
<李>iView/地区/应用。js语言包
<李>iview/字体字体包
下载Vue。js
来到Github上的Vue项目,直接下载压缩源码:
在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
我尝试将它们放在浏览器里进行访问:
发现地址有变更,不过这并无大碍。
至此,将各个文件放在期望的位置即可:
该图中各文件的摆放并不是很严谨,大家按自己习惯来即可。
三,实例演练
完成以上的准备工作后,就可以结合iView UI来正式开发了,接下来基于表表格组件演示一下购物车的基本操作。
引入资源
经过起步工作的筹备,可以在新建页面中逐个地引入这些资源。
HTML头部分
