位置: 编程技术 - 正文

基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)(vue.js如何使用)

编辑:rootadmin

推荐整理分享基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)(vue.js如何使用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue.js实战,vue.js案例,vue.js使用教程,vue.js使用教程,vue.js使用教程,vue.js使用教程,vue.js使用,基于vue.js的论文,内容如对您有帮助,希望把文章链接给更多的朋友!

像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除。故观念使然,尽管 Nuget 和 Maven 用得顺溜,但对 NPM 仍不带感,兴许是周边无人带动的稀薄气氛,也或者是没参加过类似的大型活动,于是在自发性上差了许多。再者,我不用 MVVM 模式,领导也不会扣绩效。

为了快速体验 MVVM 模式,我选择了非工程化方式来起步,并选择使用 Vue.js,以及基于它构建的 iView UI 框架。

Vue.js 是美籍华人尤雨溪创作的,那会儿他还在 Google 工作,他自感 Angular.js 繁杂,进而自创了更为简洁易用的 Vue.js。

iView UI 是由 后梁灏[hào]创作,网名 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 /locale/zh-CN.js 语言包 iview /font 字体包

下载 Vue.js

来到 Github 上的 Vue 项目,直接下载 Zip 源码:

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

根据不同的环境选择一个版本即可,至此第 1 步就搞定了。

下载 iView 系列文件

在 iView 官网的“组件” / “安装” 页面的开头处发现了这个链接: dist** 目录:

必要文件都在这里,这些文件无法打包下载,我采取的笨办法是逐个点开,然后复制其中的内容。

在获取 iView 相关的 js 和 css 方面还有一个办法,仔细观察官网给出的 CDN 地址分别为:

iView UI 来正式开发了,接下来基于 table 表格组件演示一下购物车的基本操作。

引入资源

经过起步工作的筹备,可以在新建页面中逐个地引入这些资源。

HTML head 部分

按一贯的方式引用,样式居前,随后紧跟着 vue.js 和 iView.js,以及 iView 中文语言包 zh-CN.js,然后立即调用 lang 方法使其生效。

绑定数据

基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)(vue.js如何使用)

首先把数据绑定起来,从而看一看整体效果,至于其他的行为操作先不管:

HTML body 部分

组件 i-table 最核心的两个属性分别是 columns 和 data,columns 是列定义,data 则为数据。

这两个属性都添加了冒号(:)语法糖,它指代的是 v-bind 指令,表示这个属性的值是动态绑定的,这样在运行过程中发现数据有变更时,表格视图也会迅速的变更。

iViewUI_cart.js 脚本部分

该文件是与页面对应的业务脚本,整个文件就负责 new 一个 Vue 实例,并将其赋值给了变量 cart,可以看到的 data 包含了两个属性,即表示数据源的 cartList 和 列定义的 columns,二者正好与上述 i-table 的核心属性相映射。

再次值得注意的是 data,它的值需要以匿名函数的形式进行书写,即:

如此,在其 columns 中出现的 Render 函数体内才能正常通过 this 访问到 methods 中定义的方法。当然本次演示是通过 cart 对象来访问,故不受此影响。

运行页面后,数据即可绑定成功。

添加操作所需按钮

数据呈现出来后,就可以补充必要的按钮了:

这一步简单,只需要修改一下 columns 属性,追加一项“操作”列,添加三个按钮:

在这里使用到了 Render 函数,该函数的内部机制略显复杂,作为初步演示只需依样画葫芦即可。

说到 Render 函数,还需要再强调一下在其内部对 methods 中所定义方法的调用,如果试图通过 this 来调用方法(比如 reduceQuantity),那么 Vue 实例中 data 的值需要使用匿名函数的方式来表达;反之,若是通过 Vue 实例 cart 来调用,则无此顾虑,即 data 的值使用一贯的对象大括号({})来表达即可。

添加操作所需方法

操作按钮已经添加成功了,那就需要有对应的方法去执行,在 Vue.js 中,方法都定义在 methods 属性中。

减去数量

首先关注一下“减去数量”的定义:

通过遍历找到目标记录,并将其 count 属性减一,如同 MVVM 的定义,当数据变更的时候,视图也跟随着变化。

但凡是存在于购物车内的商品,其数量至少应该为 1,为防止减到 0,不妨再加一个判断使其逻辑更为完美:

增加数量

只需要针对 count 属性做 +1 操作即可。

删除

在删除逻辑中,当遍历到目标记录时,会询问用户是否真的要删除当前记录,这里用到了 $Modal 对话框,如果用户点击确定,那么就执行真正的删除,看一看效果:

非常漂亮考究的 iView Modal 对话框,令人赏心悦目,一见倾心。

至此,针对 Vue.js 和 iView 框架的体验就告一段落,后面抽时间再学习一下组件和 Render 函数,提升一下内功修养。

Angular4自制一个市县二级联动组件示例 最近遇到了不少问题,真的是命运多舛。Angular真是让人又爱又恨的框架,恨的是资料太少,遇到问题无从下手。爱的是许多其他框架难以做到的功能,a

Angular实现双向折叠列表组件的示例代码 最近在做一个双向折叠组件,如下图所示,页面是分为两组,左边页面是SummaryPanel,主要是一组列表,右边页面是DetailPanel,展示左边列表中某一项的具

第一个Vue插件从封装到发布 前言这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤。插件地址:

标签: vue.js如何使用

本文链接地址:https://www.jiuchutong.com/biancheng/377412.html 转载请保留说明!

上一篇:值得收藏的vuejs安装教程(值得收藏的十大收录机)

下一篇:Angular4自制一个市县二级联动组件示例(angular动态生成表单)

  • 报废汽车残值收入
  • 计提企业所得税费用会计分录
  • 税控财务软件装什么系统
  • 公司老板有钱吗
  • 主营业务成本借方表示什么意思
  • 劳务费可以开工程服务发票吗
  • 凭证附件的粘法
  • 起重机属于固定资产哪个类别
  • 报完税的发票还能作废吗
  • 建筑劳务公司开劳务发票税率是多少
  • 外贸企业当月没交税
  • 怎么结转销项税额
  • 人力资源劳务费发票税率
  • 企业缴纳社保费一个月多少钱
  • 发票反写是什么时候
  • 利润分配需要缴纳企业所得税吗
  • 购车保险属于什么费用
  • 无需支付的款项需要缴税吗
  • 取得高新技术企业
  • 单位购进员工餐食材怎做账务处理?
  • 清算期间未申报债权
  • 在银行买理财产品
  • 服务业成本会计分析
  • 公司费用高好还是低好
  • 财务软件上线需注意什么
  • 图解 http
  • linux系统的介绍
  • 抵扣了的进项税可以冲销么
  • 公司向股东还款的会计分录
  • php读取excel内容
  • 计提资产减值准备是利好还是利空
  • php发送短信
  • php include和include_once
  • ps怎么把文字单独抠出来
  • python中变量类型有几种
  • 去年的滞纳金没有入账怎么处理
  • 个人所得税和投保的区别
  • sql如何设置远程连接
  • 小企业会计准则适用于哪些企业
  • 预提费用取消了吗
  • win2008r2服务器文件无法进入软件
  • 行政事业单位职工工伤有哪些待遇
  • 待抵扣进项税如何在营运资金
  • 企业专利权拥有人是指
  • 增值税发票系统客服电话
  • pycharm怎么安装mysql
  • 公司购买土地建厂房账务处理小企业会计准则
  • 会计中制造费用包括哪些内容
  • 小规模企业缴纳公积金怎么做账
  • 免租期租金可以追回吗
  • 税局代开的法律顾问费能否抵扣?
  • 《关于工资总额组成的规定》第四条
  • 企业的研发活动阶段包括
  • 存出保证金计入
  • sql查询连续登录天数
  • Windows Remote Shell(WinRM)使用介绍
  • linux,windows
  • mac火狐浏览器flash插件设置
  • win7与xp双系统设置
  • 解决安装后软件icon一圈白边问题
  • html5+javascript实现简单上传的注意细节
  • javascript中的判断语句
  • js传参数有长度限制
  • 基于android的app
  • 分享一下相亲时碰见过哪些奇葩事
  • jquery popupDialog 使用 加载jsp页面的方法
  • js 函数写法
  • 安卓手机管家怎么关闭
  • javascript框架的作用
  • 示例代码
  • python生产
  • 怎么用python画图具体步骤
  • 辽宁省社保系统操作
  • 成都所见所得科技有限公司是什么平台
  • 宁波税务局网上办税服务厅
  • 陕西职工医保申请流程
  • 税务部门立足
  • 小微企业 2018
  • 普通发票管理系统官网
  • 税务稽查机构
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设