FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

本论坛已关闭(禁止注册、发帖和回复)
请移步 三石和他的朋友们

FineUI首页 WebForms - MVC & Core - JavaScript 常见问题 - QQ群 - 十周年征文活动

FineUI(开源版) 下载源代码 - 下载空项目 - 获取ExtJS - 文档 在线示例 - 版本更新 - 捐赠作者 - 教程

升级到 ASP.NET Core 3.1,快、快、快! 全新ASP.NET Core,比WebForms还简单! 欢迎加入【三石和他的朋友们】(基础版下载)

搜索
查看: 2711|回复: 1

FineUI + Vue 实现数据绑定

[复制链接]
发表于 2020-4-3 16:20:58 | 显示全部楼层 |阅读模式
本帖最后由 棕榈 于 2020-4-3 16:20 编辑

FineUI + Vue 实现数据绑定





Elment 与 FineUI 控件间的数据绑定






FineUI组件与Element组件结合使用



    在这之前使用 Knockout 实现了 FineUI 数据绑定,今天讨论一下如果通过 Vue 来实现数据绑定,Vue 与 Knockout 有很多类似之处,Vue 更现代,语法更简洁,但 Vue 需要 IE9+ 支持,而 Knockout 可以支持到 IE6。虽然 Knockout 4 也实现了 VirtualDOM、生命周期及不再支持旧版 IE,但到现在为止也没有发布正式版。

   由于 Vue 采用 VirtualDOM 进行渲染的,所以它与 Knockout 在进行 FineUI 封装时还有很大的不同,Knockout 在是FineUI 渲染完后,再进行数据的绑定,由于 Knockout 不会对原有的 DOM 进行改变,所以 FineUI 的事件绑定还会保留,但 Vue 却不一样了,它会对挂载点下的 DOM 进行重新创建,这样 FineUI 之前进行的事件绑定就不会存在了。

   为了防止 FineUI 渲染后的 DOM 不被 Vue 重新渲染,需要将挂载点 与 FineUI 的 DOM 隔离开来,再通过控件的 ContentEl 属性对其进行引用,这样做也有一些缺点,如果根节点进行了重新渲染,之前引用的节点也不存在了,这个是需要注意的地方。

   FineUI 的 DOM 不被 Vue 渲染,这样也没法使用 Vue 的模板语法进行数据绑定,我是通过自定义一个模板语法,格式为JSON,这样方便解析,然后再通过 Vue 的 $watch 进行数据监控,变相的实现了数据绑定。

    虽然 FineUI 创建完的 DOM 无法直接使用在 Vue 中,但基于 Vue 的组件封装出来的FineUI控件将不再有前面的限制,使用方式与普通的Vue组件也没有区别,但这样使用无法发挥 FineUI 的布局功能,同时有些控件的样式还需要单独的调整。


  1.     <f:Panel Layout="Anchor" Title="element ui 文本框" Width="350" BodyPadding="20">
  2.         <Items>
  3.             <f:Control CssStyle="margin-bottom:20px">
  4.                 <el-input placeholder="请输入内容" size="medium" prefix-icon="el-icon-search" v-model="input"></el-input>
  5.             </f:Control>
  6.             <f:TextBox AttributeDataTag="{value:'this.input', change:'this.input=control.getValue()'}"></f:TextBox>
  7.         </Items>
  8.     </f:Panel>
复制代码

上面的代码实现了,Element 文本框与 FineUI 文本框的数据双向绑定


  1. <el-table-column label="名称">
  2.         <template slot-scope="scope">
  3.                 <fineui :o="{type:'dropdownlist',style:'margin-bottom:0px',data:goodsNames,value:scope.row.name}"></fineui>
  4.         </template>
  5. </el-table-column>
  6. <el-table-column label="单位">
  7.         <template slot-scope="scope">
  8.                 <el-select v-model="scope.row.unit" size="small">
  9.                         <el-option v-for="item in goodsUnits" :key="item[0]" :label="item[1]" :value="item[0]"></el-option>
  10.                 </el-select>
  11.         </template>
  12. </el-table-column>
复制代码

上面的代码是封装后的 FineUI 组件与 Element 组件结合在一起使用







本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|FineUI 官方论坛 ( 皖ICP备2021006167号-1 )

GMT+8, 2024-3-28 22:33 , Processed in 0.046238 second(s), 19 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表