vue-autoui自匹配webapi的UI控件的实现_vue.js

来源:脚本之家  责任编辑:小易  

console.log("每次切换都会触发我"); this.swiper.slideTo(3, 1000, false) } } </script> 以上所述是小编给大家介绍的基于vue.js轮播组件vue-awesome-swiper实现轮

vue-autoui 是一款基于vueelement扩展的一个自动化UI控件,它主要提供两个控件封装分别是auto-formauto-grid; 通过这两个控件可以完成大多数的信息输入和查询输出的需要.auto-formauto-grid是通过json来描述展示的结构,在处理上要比写html标签来得方便简单, 但这控件的最大优势并不是在这里,它最重要的功能是可以结合webapi的信息来自动输出界面,只需要调整webapi的信息结构即可完成UI的调整。

所以本文仅是我DIY的一个思路,求轻虐=_= 在我的理解中,vue-router是根据path去匹配注册的route,匹配到则加载对应的组件,匹配不到则重置(或者说清空)对应的router-view。

基础使用

Vue 列表渲染中修改数组元素(对象)的某个属性,但不能触发视图更新。

控件可以直接在vuejs功能中使用,但需要结合json来设置具体UI展示,以下是一个简单的例子

vue 的单文件组件中,即以 .vue 结尾的文件中,本文说明的只是一种实现方法,既不是唯一 src="./lib/js/jquery-2.1.1.min.js"></script> 第三步 接着使用自定义指

<auto-form ref="form" v-model="data" size="mini" :info="info"> </auto-form> <el-button @click="if($refs.form.success()){alert(JSON.stringify(data))}">确定</el-button>

也希望大家多多支持脚本之家。 您可能感兴趣的文章:vue.js element-ui tree树形控件改iview的方法vue用递归组件写树形控件的实例代码vue.js与element-ui实现菜单树形结构的

功能很简单就是显示当前输入并验证通过的数据,下面用json描述信息输入源。

Mint UI 的 Vue 项目。 脚手架 随着 Vue.js 的迅速发展,目前搭建一个 Vue 项目的脚手架已经有不少选择了。比如可以使用官方提供的 vue-cli。本文使用饿了么自己的构建工具 c

data(){ return { info: { items: [] }, data: { }, }; }, mounted(){ var items = []; items.push({ name: 'active', label: '活动名称', rules: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ] }); items.push({ name: 'region', label: '活动区域', type: 'select', data: [{ value: '广州' }, { value: '深圳' }, { value: '上海' }, { value: '北京' }], rules: [{ required: true, message: '请选择活动区域', trigger: 'change' }], eof: true }); items.push({ name: 'starttime', label: '开启时间', type: 'date', rules: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }] }); items.push({ name: 'endtime', label: '-', type: 'date', eof: true, rules: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }] }); items.push({ name: 'instant', type: 'switch', label: '即时配送', eof: true }); items.push({ name: 'nature', type: 'checkbox', label: '活动性质', rules: [{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }], data: [{ value: '美食/餐厅线上活动' }, { value: '地推活动' }, { value: '线下主题活动' }, { value: '单纯品牌暴光' }], eof: true }); items.push({ name: 'resource', label: '特殊资源', type: 'radio', rules: [{ required: true, message: '请选择活动资源', trigger: 'change' }], data: [{ value: '线上品牌商赞助' }, { value: '线下场地免费' }], eof: true }); items.push({ name: 'remark', label: '活动形式', type: 'remark', rules: [{ required: true, message: '请填写活动形式', trigger: 'blur' }] }) this.info = { items: items} }

提供几种可行的方案: 1.element-ui里面有文件上传的组件,已经开源。或者是你说的vue-file-upload; 2.自己写一个文件上传的组件,也是可以的,也不难的,封装一下请求,做一些事件

以上是使用json来描述一个输出的界面,具体效果如下:

require('./assets/css/index.css') src之下才是你的文件目录 其他访问不到的 把index.css放到src的assets/css下 即可 import 引入css 不推荐

虽然用json来描述界面会比html描述会方便一些,但总体上来说工作量还是有些大的,在调整界面的时候也不方便。接下介绍一下如何结合BeetleX.FastHttpApi来进一步简化这些繁琐的操作。

t 'element-ui/lib/theme-default/index.css' Vue.use(Element) 以上这篇浅谈vue.js导入 vue 2.0项目中如何引入element-ui详解Vue中引入样式文件的方法vue + element-ui实现简

Webapi动态输出

原理是通过改变属性图真实数据,过程就是利用递归循环查找被点击的data.id与数据中哪个对象id相等来进行判断与递归。包括增删改都是利用这个方法,没找到框架提供的api有

其实在构建vue-autoui的时候更多是考虑和BeetleX.FastHttpApi进行一个整合,通过和后端融合可以把这些UI编写的工作量大大节省下来,让开发这些功能变得更简单方便,更重要的是api变化后界面就自动适应。使用要求:在和BeetleX.FastHttpApi整合还需要引用BeetleX.FastHttpApi.ApiDoc插件,因为这个插件用于给接口输出对应UI的JSON信息。接下来通过几个示例来介绍整合的方便性:

哪方面的框架?js框架就jQuery、zepto等等吧,mv*的就angular、backbone等等吧,css就jQuery ui、bootstrap等等吧

登陆

登陆功能是比较常见的,接下来看一下使用auto-form如何结合webapi来完成这个功能。

看看是不是需要清理缓存。

<div> <auto-form ref="login" url="/login" v-model="login.data" size="mini"> </auto-form> <el-button size="mini" @click="if($refs.login.success())login.post()"> 登陆 </el-button> </div>

npm 的全称是 nodejs包管理,现在越来越多的项目(包)都可以通过npm来安装管理,nodejs是js运行在服务器端的平台,它使得js的能力进一步提高,我们还要使用nodejs配合 webpa

以上是一个登陆功能UI的定义,是不是很简单呢?通过指定url的webapi连接即可以自动适应UI;这时候只需要针对登陆接口进行一个定义即可:

: { "element-ui": "^1.0.4", "vue": "^2.1.0" } //webpack.config.js module: { rules: [ { test: /\\.vue$/, loader: 'vue-loader', options: { // vue-load

[Input(Label = "用户名", Name = "name", Eof = true)] [Required("用户名不能为空", Name = "name")] [Input(Label = "密码", Name = "pwd", Type = "password", Eof = true)] [Required("用户密码不能为空", Name = "pwd")] [Input(Label = "保存状态", Value = true, Name = "saveStatus")] public bool Login(string name, string pwd, bool saveStatus) { Console.WriteLine($"name:{name} pwd:{pwd} saveStatus:{saveStatus}"); return name == "admin"; }

注册

接下来定义一个信息多些的注册界面

<div> <auto-form ref="login" url="/register" v-model="register.data" size="mini" @completed="onCompleted"> </auto-form> <el-button size="mini" @click="if($refs.login.success())register.post()"> 注册 </el-button> </div>

在UI定义上基于没什么变化,只是调整一下对应的url地址,在这里多了一下completed事件,这个事件主要是通过接口加载UI信息才会触发的。对应功能的javascript代码

data(){ return { register: new beetlexAction('/register', {}), checkConfirmPassword: (rule, value, callback) => { var password = this.$refs.login.getField('Password'); var cpassword = this.$refs.login.getField('ConfirmPassword'); if (password.value != cpassword.value) callback(new Error('确认密码不正确!')); else callback(); }, } }, methods: { onCompleted(){ this.$refs.login.getField('ConfirmPassword').rules.push({ validator: this.checkConfirmPassword, trigger: 'blur' }); }, }, mounted() { this.register.requested = (r) => { alert(JSON.stringify(r)); }; }

代码主要是定密码和确认密码的对比验证,接下来看一下后台注册对应的接口

[Post] public RegisterDto Register(RegisterDto register) { Console.WriteLine(Newtonsoft.Json.JsonConvert.SerializeObject(register)); return register; } public class RegisterDto { [Input(Label = "用户名", Eof = true)] [Required("用户名不能为空")] [DataRange("用户名的必须大于3个字符", Min = 3)] public string Name { get; set; } [Input(Label = "邮箱地址", Eof = true)] [Required("邮件地址无效", Type = "email")] public string Email { get; set; } [Input(Label = "密码", Eof = true, Type = "password")] [Required("输入密码")] public string Password { get; set; } [Input(Label = "确认密码", Eof = true, Type = "password")] [Required("输入确认密码")] public string ConfirmPassword { get; set; } [GenderInput(Label = "性别", Value = "男", Eof = true)] public string Gender { get; set; } [Required("选择所在城市")] [CityInput(Label = "城市", Eof = true)] public string City { get; set; } [HobbyInput(Label = "爱好")] [Required("选择爱好", Type = "array", Trigger = "change")] public string[] Hobby { get; set; } }

服务代码也没太多的变化,只是通过一些标签来标记一下相关属性的数据源和输入要求.具体运行效果如下:

数据列表

有应用中除了数据输出外更多的数据列表,auto-grid即是专门用于处理列表的一个控件,这个控件提供分页,选择,编辑和删除的功能;接下来做一个简单的雇员列表示例:

<auto-grid url="/employees" @completed="employees.get()" @itemchange="onItemChange" @itemdelete="onItemDelete" @command="onCommand" :data="employees.result" size="mini" height="100%" edit="true" delete="true"> </auto-grid>

这个列表提供编辑和删除功能,相关脚本代码如下:

data(){ return { employees: new beetlexAction('/employees', {}, []) } }, methods: { onCommand(e){ this.$open('models-employee', e.data); }, onItemChange(item){ if (confirm('是否要修改' + item.data.FirstName + '?')) { item.success(); } }, onItemDelete(item){ if (confirm('是否要删除' + item.data.FirstName + '?')) { item.success(); } }, }, mounted() { }

接下来的工作就是在服务端定义api来输出结果

[Column("FirstName", Type = "link")] [Column("LastName", Read = true)] [Column("Title")] [Column("HomePhone")] [Column("City")] [Column("Address")] public object Employees() { return DataHelper.Defalut.Employees; }

动态查询

实际应用中需要提供查询条件输入,这个时候就可以把auto-formauto-grid整合起来,以下通过一个简单的订单查询来展示这两个控件结合使用

<auto-form url="/orders" v-model="orders.data" @completed="orders.get()" size="mini" @fieldchange="orders.get()"> </auto-form> <auto-grid url="/orders" height="300" :data="orders.result.items" :pages="orders.result.pages" :currentpage="orders.result.index" @pagechange="onPageChange" size="mini"> </auto-grid>

可以在auto-formfieldchange事件中自动执行查询,对应的脚本代码如下:

data(){ return { orders: new beetlexAction("/orders", {}, { index: 0, pages: 0, items: [] }) }; }, methods: { onPageChange(page){ this.orders.data.index = page; this.orders.get(); }, }, mounted(){ }

接下来需要实现服务端代码,由于方法需要描述输入和列表所以对应的标签比较多

data(){ return { orders: new beetlexAction("/orders", {}, { index: 0, pages: 0, items: [] }) }; }, methods: { onPageChange(page){ this.orders.data.index = page; this.orders.get(); }, }, mounted(){ }

插件详细代码https://github.com/IKende/BeetleX-Samples/tree/master/Web.AutoUI

https://github.com/IKende/vue-autoui

到此这篇关于vue-autoui自匹配webapi的UI控件的实现的文章就介绍到这了,更多相关vue-autoui自匹配webapi的UI控件内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

Vue.js实现一个自定义分页组件vue-paginaiton

vue实现一个分页组件vue-paginaiton

vue使用了一段时间的感触就是,我再也不想直接操作DOM了。数据绑定式的编程体验真是好。实现的一个分页组件。

这里的css就不放出来了,可以看直接去github上下载:vue-pagination

先上一张实例图吧

模版

<div class="page-bar"> <ul> <li v-if="showFirstText"><a v-on:click="cur--">上一页</a></li> <li v-for = "index in pagenums"> <a v-on:click="pageChange(index)">{{index}}</a> </li> <li v-if="showNextText"><a v-on:click="cur++">下一页</a></li> <li><a>共<i>{{all}}</i>页</a></li> </ul> </div>

在未引入js前,页面的显示,分析下,all字段简单直接输出即可,{{index}}是分页码这个需要一些动态的渲染。

var app = new Vue({ el: '#app', data:{ currentpage: 1, totlepage: 28, visiblepage:10, msg: '' }, })

调用 new Vue({参数}) 就是创建了一个基本的组件,赋值给变量 app.el就是element的缩写,定位模版的位置.data就是数据了.知道了总页数但是要显示页码还是要一番计算,所以显示页码就是计算属性了.所以我们要用computed

computed: { //计算属性:返回页码数组,这里会自动进行脏检查,不用$watch(); pagenums: function(){ //初始化前后页边界 var lowPage = 1; var highPage = this.totlepage; var pageArr = []; if(this.totlepage > this.visiblepage){//总页数超过可见页数时,进一步处理; var subVisiblePage = Math.ceil(this.visiblepage/2); if(this.currentpage > subVisiblePage && this.currentpage < this.totlepage - subVisiblePage +1){//处理正常的分页 lowPage = this.currentpage - subVisiblePage; highPage = this.currentpage + subVisiblePage -1; }else if(this.currentpage <= subVisiblePage){//处理前几页的逻辑 lowPage = 1; highPage = this.visiblepage; }else{//处理后几页的逻辑 lowPage = this.totlepage - this.visiblepage + 1; highPage = this.totlepage; } } //确定了上下page边界后,要准备压入数组中了 while(lowPage <= highPage){ pageArr.push(lowPage); lowPage ++; } return pageArr; } },

观看html模版发现v-if指令.很明显当内容是true就输出,否就没。

重点看下

<li v-for="index in pagenums" v-bind:class="{ active: currentpage == index}"> <a v-on:click="pageChange(index)">{{ index }}</a> </li>

v-for是循环渲染输出计算属性pagenums.每一次循环的子元素赋值给index v-bind:class绑定class,当渲染到目前的角标的时候加个class v-on:click是绑定了事件,我把index当参数传进入了,后面做判断,默认传event事件.

然后我们Vue的选项里面再增加methods字段

methods:{ pageChange: function(page){ if (this.currentpage != page) { this.currentpage = page; this.$dispatch('page-change', page); //父子组件间的通信:==>子组件通过$diapatch(),分发事件,父组件冒泡通过v-on:page-change监听到相应的事件; }; } }

组件交互

组件写完了,问题来了,用户点击发生页面改变,你怎么通知其他组件作出相应的变化. 可以在页角发生改变的函数下,插一条语句通知其他组件。不过这种方法是很差的做法。可以使用

watch: { currentpage: function(oldValue , newValue){ console.log(arguments) } }

观察了currentpage数据当它改变的时候,可以获取前后值。然后通知其他组件。

完整的代码可以看 github:vue-pagination

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

做webapp,js用vue.js,UI上用什么好

我也是觉得SUI可以,之前看过别人把这两者结合的demo,现在也是在用vue结合sui重构微信web,这是别人的那个demo地址GitHub - eteplus/vue-sui-demo: 用vue 和 SUI-Mobile 写了一个移动端demo,用来反馈学习vue的成果(禁用了SUI自带的路由,使用vue-router, vue-resource, webpack)[a mobile demo of vue]

vue中不使用脚手架,如何自己用webpack加载main.js和index.vue?

wenpack中文文档 网页链接

github官网 网页链接

webpack坑很深,

如果项目没有什么特殊性,

最好还是能用脚手架就用脚手架

vue elementui穿梭框组件怎么实现数据回显

body {

  1.    background: #fff;
  2.    color: #333;
  3.    font-family: "PingFang SC","Lantinghei SC","Microsoft YaHei",arial;
}body {
  1.    background: #FFF;
  2.    color: #333;
  3.    font: 12px/1.5 'Microsoft Yahei',arial,sans-serif;
  4.    text-align: center;
}
}


  • 本文相关:
  • vue+axios+webapi+npoi导出excel文件实例方法
  • nginx 解决webapi跨域二次请求以及vue单页面的问题
  • 基于vue的侧边目录组件的实现
  • 基于cropper.js封装vue实现在线图片裁剪组件功能
  • 使用vue-cli+webpack搭建vue开发环境的方法
  • vue-cli3.0 环境变量与模式配置方法
  • 通过npm或yarn自动生成vue组件的方法示例
  • vue2.0 可折叠列表 v-for循环展示的实例
  • 基于vuejs+webpack的日期选择插件
  • 详解vue双向数据绑定原理解析
  • 在vue中实现随hash改变响应菜单高亮
  • vue基础之事件v-onclick="函数"用法示例
  • Vue.js实现一个自定义分页组件vue-paginaiton
  • 做webapp,js用vue.js,UI上用什么好
  • vue中不使用脚手架,如何自己用webpack加载main.js和index.vu...
  • vue elementui穿梭框组件怎么实现数据回显
  • Vue的elementUI实现自定义主题方法
  • 基于vue.js轮播组件vue-awesome-swiper实现轮播图
  • s vue-router如何实现无效路由(404)的友好提示
  • vue封装饿了吗element-ui的时间控件el-date-picker报错v
  • vue.js通过自定义指令实现数据拉取更新的实现方法
  • vue elementUI tree树形控件获取父节点ID的实例
  • 基于VUE.JS的移动端框架Mint UI的使用
  • vue里的elementui日期控件怎么将明天改成左上角有标记
  • Vue在单独引入js文件中使用ElementUI的弹框,调用的时候报错...
  • 浅谈vue.js导入css库(elementUi)的方法
  • 关于Vue elementui Tree组件自定义编辑删除后值怎么取
  • vue的ui框架除了VUX用的比较多,还有什么UI是比较好的
  • 为什么vue-cli安装时输入vue init webpack demo 后会弹出vue文...
  • vue文件引入font-awesome,webpack.config.js需要配置什么吗
  • 详解vue+vueRouter+webpack的简单实例
  • 用Vue-cli创建出来的main.js中的Vue实例中的template选项是什...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库vue.jsvue+axios+webapi+npoi导出excel文件实例方法nginx 解决webapi跨域二次请求以及vue单页面的问题基于vue的侧边目录组件的实现基于cropper.js封装vue实现在线图片裁剪组件功能使用vue-cli+webpack搭建vue开发环境的方法vue-cli3.0 环境变量与模式配置方法通过npm或yarn自动生成vue组件的方法示例vue2.0 可折叠列表 v-for循环展示的实例基于vuejs+webpack的日期选择插件详解vue双向数据绑定原理解析在vue中实现随hash改变响应菜单高亮vue基础之事件v-onclick="函数"用法示例vue引用js文件的多种方式(推荐)简单理解vue中props属性vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fovue 进阶教程之v-model详解vue之父子组件间通信实例讲解(prvue props用法详解(小结)使用vue实现图片上传的三种方式vue.js实战之利用vue-router实现vue.js中的图片引用路径的方式vue2.0使用嵌套路由实现页面内容切换/公用vue生命周期与钩子函数简单示例说说vue.js中的functional函数化组件的使vue按需加载实例详解关于vue实现组件信息的缓存问题详解vue-cli + webpack 多页面实例配置优详解vue父子模版嵌套案例vue实现百度下拉列表交互操作示例vue封装swiper代码实例解析vue-loader中引入模板预处理器的实现
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved