基于Vue.js的iView UI框架非工程实践记录(推荐)

后端程序员喜欢Java或者。NET习惯于在日常生活中做事，他们对前端的理解往往停留在jQuery时代，包括需要的时候引用，不需要的时候删除的插件。因此，由于概念的原因，虽然Nuget和Maven使用起来很流畅，但他们仍然没有NPM感。也许是周围没有人带动的稀薄氛围，或者是他们没有参加过类似的大型活动，所以自发的少了很多。再者，我不使用MVVM模式，领导不扣绩效。

为了快速体验MVVM模式，我选择了非工程化的方式入手，选择使用Vue.js和基于它的iView UI框架。

Vue.js由美籍华人尤雨溪创建。当时他还在谷歌工作。他觉得Angular.js很复杂，于是创建了一个更简单易用的vue.js.

IView UI由[郝]在90年代后创建，网名为Aresn。他负责大数据公司TalkingData的可视化基础设施。更值得注意的是，他还出了一本书《Vue.js实战》，是我在“双十一”前一天买的。用词简洁，直接混淆，快速录入，是我喜欢的风格。我花了一周的时间浏览了前十二章的内容，并用WebStorm练习了大部分例子。虽然整章都在书中介绍了webpack工程建设方案，但由于我的惯性，我选择跳过它，用一种非工程化的方式去体验Vue.js，其实多少有点侮辱性。无奈，毕竟我才学了一个星期，后期时间充裕。那我就分享一下我对工程建设的学习经验。

1.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 /locale/zh-CN.js语言包iView/字体包下载vue.js。

来Github上的Vue项目，直接下载Zip源代码：

vue.js文件可以在dist目录中找到：

根据不同的环境选择一个版本，第一步就完成了。

下载iView系列文件

此链接位于https://unpkg.com/iview/**, iView官方网站“组件”/“安装”页面的开头，您可以通过此链接查看dist**目录：

所有必要的文件都在这里，所以这些文件不能打包下载。我的笨办法是一个个打开，然后复制内容。

还有另一种方法可以获得与iView相关的js和css。仔细观察官方网站给出的CDN地址，如下所示：

http://unpkg.com/iview/dist/iview . min . js http://unpkg.com/iview/dist/style/iview . CSS

我试图在浏览器中访问它们：

我发现地址变了，但没关系。

此时，将每个文件放在所需的位置：

这张图中文档的布局不是很严格，大家可以根据自己的习惯来做。

三、例题练习

完成以上准备工作后，可以结合iView UI进行正式开发，然后演示基于表格组件的购物车基本操作。

介绍资源

准备好初始工作后，可以将这些资源逐一引入新页面。

HTML标题部分

Head meta charset='UTF-8' title购物车实例/title link rel='样式表' href=' iview content/iview . 2 . 7 . 0 . CSS ' rel='外部nofollow '脚本src=' http : utility _ js/vue . min . 2 . 5 . 3 . js '/脚本脚本src=' http : utility _ js/iview . min . 2 . 7 . 0 . js '/脚本src=' http : iview/script/head以一致的方式引用，先用样式，后用vue.js和iView.js，以及iView中文语言包zh-CN.js，然后立即调用lang方法使其生效。

绑定数据

首先把数据绑定在一起，看整体效果。至于其他行为和操作，不管：

HTML正文部分

body div id=' app ' i-table id=' datatable 1 ' size=' small ' : columns=' columns ' : data=' cart list ' stripe highlight-row/I-table/div script src=' http : iview ui _ cart . js '/script/body组件I-table的两个核心属性是列和数据，列是列定义，数据是数据。

冒号(:)语法糖加在这两个属性上，指的是v-bind指令，表示这个属性的值是动态绑定的，这样在运行过程中数据发生变化时，表视图会快速变化。

IViewUI_cart.js脚本部分

var cart=new Vue({ el: '#app '，data : function(){ return { cart list :[{id : 1，name: 'iPhone X '，price: 8300.05，count: 1}，{id: 2，name: 'MacBook Pro '，price: 18800.75，count: 3}，{ id如您所见，数据包含两个属性，即代表数据源的cartList和由列定义的列，它们正好与上面i-table的核心属性进行映射。

再次值得注意的是，数据，其值需要以匿名函数的形式写入，即：

Function () {return {}}通过这种方式，在方法中定义的方法可以在它的列中出现的Render函数体中通过它正常访问。当然，这个演示是通过cart对象访问的，所以它不受此影响。

运行页面后，可以成功绑定数据。

操作需要添加按钮

数据显示后，您可以添加必要的按钮：

这个步骤很简单，只需修改columns属性，添加一个“Operation”列，并添加三个按钮：

{title:' quantity '，key: 'count'}，{ title:' operation '，render3360 (h，params)={return h ('div '，[h ('button ')，{ props: { type3360 ' primary。Size :' small'}，style : { margin right : ' 5px ' }，在： { click 3360()={ console . info('减少数量')；cart . reduce quantity(params . row . id)；}}}，'-')，h ('button '，{props : {type :' primary '，size :' small'}，style : { margin right 3360 ' 5px ' }，on : { click 3360()=cart . incrementequantity(params . row . id)；}}}，'')，h ('button '，{ props: { type3360 ' error '，size:' small'}，style 3360 { margin right : ' 5px ' }，3360 { click 3360()={ console cart . delete item(params . row . id)；}}}，' delete ')])；}}这里使用的是Render函数，这个函数的内部机制略显复杂，作为初步演示，只需按照示例即可。

当涉及到渲染函数时，有必要强调对方法中定义的方法的调用。如果试图通过此调用方法(如reduceQuantity)，则Vue实例中数据的值需要以匿名函数的形式表示；相反，如果通过Vue实例cart调用，则没有什么顾虑，即数据的值可以用一致的对象大括号({})来表示。

添加操作所需的方法

操作按钮已经添加成功，需要执行相应的方法。在Vue.js中，方法都是在methods属性中定义的。

减去数量

一、注意“减量”的定义：

methods : { reduce quantity : function(id){ for(让I=0；I this . CartList . length；i ) { if (this.cartList[i]。id===id) { this.cartList[i]。计数-；打破；}}}}通过遍历找到目标记录，并将其count属性减1，就像MVVM的定义一样，当数据发生变化时，视图也随之变化。

但是，购物车中的商品数量至少应为1。为了防止它降为0，我们不妨再加一个判断，让它的逻辑更加完善：

methods : { reduce quantity : function(id){ for(让I=0；I this . CartList . length；i ) { if (this.cartList[i]。id===id) { if (this.cartList[i]。计数1) { this.cartList[i]。计数-；} break}}}}，增加号码

methods: {递增数量：函数(id) { for(让I=0；I this . CartList . length；i ) { if (this.cartList[i]。id===id) { this.cartList[i]。计数；打破；}}}}您只需要对count属性进行1次操作。

删除

deleteItem:函数(id) { for(让I=0；I this . CartList . length；我){如果(这个。卡特利斯[我]。id===id){//询问是否删除此。$ modal。确认({title :' prompt '，content: '您确定要删除吗？'，onok :()={ this . cart list . splice(I，1)；}，onCancel: ()={//什么也不做} })；}}}在删除逻辑中，遍历目标记录时，会询问用户是否删除当前记录。这里使用了$Modal对话框。如果用户点击确定，那么将执行真正的删除来查看效果：

非常漂亮优雅的iView Modal对话框赏心悦目，一见钟情。

至此，Vue.js和iView框架的体验告一段落。以后再花时间学习组件和Render函数，这样可以提升你的内功。