vux-ui html版本,升级到 vux@2.x
升级到 vux@2.x
Vue@2.x 主要变更
参考Vue官方文档进行迁移, 这也是Vux组件的代码更新部分,主要包括: :value.sync 已经废弃
broadcast 方法已经废弃
@click 需要更改为 @click.native
v-for的(index, item) => (item, index)
vue-router 更新
配合vue2, vue-router同样需要更新到2.0版本以上
原来的路由配置修改为: const routes = [{
path: '/vux/2.0',
component: Vux2Demo
}]
const router = new VueRouter({
routes
})
原来的路由挂载修改为: new Vue({
router,
render: h => h(App)
}).$mount('#app')
go 已经不是过去的 go了,要用push方法来跳转 this.$router.go('/somewhere')
v-link也废弃了,使用router-link组件来代替
不再生成umd文件
但是你可以使用npm run build-components来生成,请参考文档首页。
双向绑定修改为 v-model
所有相关Vux调用的 :value.sync都需要更改成 v-model // 0.x
// 2.x
使用 vux-loader
原来你可能在webpack中做了这样的配置以正确编译vux的js源码: {
test: /vux.src.*?js$/,
loader: 'babel'
}
或者你也可能使用了低版本vux-loader的getBabelLoader方法。
现在你可以直接删除这一句了,直接使用vux-loader。
在webpack.base.conf.js中这样配置: const vuxLoader = require('vux-loader')
module.exports = vuxLoader.merge(webpackConfig, {
options: {},
plugins: [
{
name: 'vux-ui'
}
]
})
引入方式变更
原来你可能是单个组件引入,现在在vux-loader的支持下你可以直接这样写: import { Group, Cell } from 'vux'
组件名字变更
为什么不参照其他组件库全部加上`X`前缀,主要是因为觉得总要写个`X`相当不顺手。
因Vue2.0限制组件名不能与原有的html5标签一样,因此部分组件进行了重命名,加上 x-前缀,所有需要加前缀的组件如下: Progress => XProgress
Switch => XSwitch
Dialog => XDialog
Address => XAddress
Circle => XCircle
XButton
XImg
XInput
XTextarea
XHeader
各个组件变更:
Swiper 引入路径变化
目录结构变化,与其他有子组件的统一,导致引入方式变化: // 0.x
import Swiper from 'vux/src/components/swiper'
import SwiperItem from 'vux/src/components/swiper-item'
// 2.0
import Swiper from 'vux/src/components/swiper/swiper'
import SwiperItem from 'vux/src/components/swiper/swiper-item'
// 或者
import { Swiper, SwiperItem } from 'vux/src/components/swiper' // with vux-loader
ColorPicker 废弃
`2.0.0`可用用,但是后面不再维护。
这个组件可以由cell配合slot扩展出来,而且更灵活。没有做过统计,但是感觉使用人数应该挺少。
Countdown 废弃
`2.0.0`可用,但是后面不再维护。
功能薄弱,比较鸡肋。
Scroller reset方法更新
由于 Vue@2.x 的broadcast方法已经废弃,并且之前的设计也并不是很好,uuid的绑定也其实是没必要的。 reset方法变成使用ref的reset()方法
pullup reset 变成 ref 的 donePullup()方法
pullup disable 变成 ref 的 disablePullup()方法
pullup enable 变成 ref 的 enablePullup()方法
pulldown reset 变成 ref 的 donePulldown()方法
pullup和pulldown的status绑定变成v-model="status"绑定,示例 status: {
pullupStatus: 'default',
pulldownStatus: 'default'
}
表单默认required为true
保持和html规范一致, 影响的组件有 XInput Checklist
Checklist 不显示错误提示
考虑到错误样式目前并不优雅,而用户有自定义错误样式的需要,因此处理成emit一个错误事件+底部slot, 用户可自行处理。
XInput 的valid获取
由于Vue2的$ref不再是响应的,因此不能直接在模板中通过ref调用组件的valid值(会报undefined),所以需要变成在提交时再进行ref来获取valid值。
XAddress 默认地址数据更新
目前引用方式: import { XAddress, ChinaAddressData } from 'vux'
如果你想继续使用旧版本数据 import { XAddress, ChinaAddressV1Data } from 'vux'
按照最新统计局数据进行更新,部分区域已经不存在,部分id做了更新。因此请谨慎更新,评估后端数据存储设计和前端交互再进行更新,避免错误更新用户数据或者导致数据丢失。
完整更新如下图:
vux-ui html版本,升级到 vux@2.x相关推荐
- spring-cloud Finchley.SR2版本 升级微服务到springboot 2.0
2019独角兽企业重金招聘Python工程师标准>>> 读书笔记 spring-cloud Finchley.SR2版本 升级微服务到springboot 2.0 贴码云 https ...
- 关于如何根据UI的版本把Tab切换成新的Notes UI Component
Sent: Monday, December 29, 2014 5:07 PM 关于如何根据UI的版本把Tab切换成新的Notes UI Component,IconTabBar控件提供了一系列操作下 ...
- 三星android升级名单,三星One UI 3.1升级名单曝光:含Galaxy S10系列 另更新Android 11系统升级计划...
知名爆料者 @TheGalox_ 称,三星将为旧机型提供 One UI 3.1 升级支持,升级列表至少包括: Galaxy Note 20 Galaxy Note 20 Ultra Galaxy Z ...
- vux 选择器_Picker 组件使用教程 - VUX 中文文档
Picker是指提供多个选项集合供用户选择其中一项的控件.Picker展示区域有限,部分选项会被隐藏,最好是当用户对所有选项都比较熟悉.有预期的时候,才使用Picker. 合理的默认选项能让用户减少操 ...
- 使用vux+ajax,Vue 应用中结合vux使用微信 jssdk的方法
vux微信分享说明 分享接口只有认证公众号才能使用,域名必须备案且在微信后台设置. 先确认已经满足使用jssdk的要求再进行开发. 引入 在 main.js 中全局引入: console.log(Vu ...
- linux查看java编译版本,升级linux系统中的java版本到1.8
1安装jdk Java运行环境 1.1上传 jdk-8u161-linux-x64.tar.gz 源码包到centos 7 1.2 解压 tar -zxf jdk-8u161-linux-x64. ...
- vux在ISO中异常 this.$vux.confirm.show
在按钮事件中调用this.$vux.confirm.show,并且启用按钮的show-loading属性 安卓正常,ios中弹窗无法显示 经过排查,iso中设置按钮的loading后,要用异步setT ...
- thinkcmf需要的php版本,升级指导 · ThinkCMF5开发手册 · 看云
# 升级指导 >[danger] 升级前请做好备份 [TOC=2,5] ## 5.0.190312升级到5.0.190419 ### 升级步骤 1.备份数据库,和程序 2.覆盖新版本到老版本 3 ...
- linux升级最新的ssl版本,升级CentOS的OpenSSL环境到最新版本的OpenSSL
漏洞描述 OpenSSL软件存在"心脏出血"漏洞,该漏洞使攻击者能够从内存中读取多达64 KB的数据,造成信息泄露. 漏洞危害 可被用来获取敏感数据,包括会话Session.coo ...
最新文章
- python gui选择_Python之GUI的最终选择(Tkinter)
- 皮一皮:这是传说盖浇饭中的天花板~白粥盖浇饭...
- Python中enumerate函数的解释和可视化
- linux信号量参数能在线改吧,UCOSII信号量有问题,CNT值会自己变化
- 推荐5个免费项目管理工具
- C语言 extern “C” - C语言零基础入门教程
- nodejs ref操作_nodejs事件和事件循环详解
- (转)学习淘淘商城第二十二课(KindEditor富文本编辑器的使用)
- OpenCV-Python实战(18)——深度学习简介与入门示例
- Linux下查看软件安装与安装路径
- c语言中fread函数_使用示例的C语言中的fread()函数
- 【转下载】黑莓7290中文说明书
- 一文彻底看懂成交量的本质
- Google 按图搜索的原理
- Introduction to Modern cryptograhy阅读笔记(二)
- 2021的科技卦象·雷·到元宇宙玩“躲猫猫”
- java第八章习题,第八章 Servlet技术习题
- 情侣生日纪念日倒数提醒的便签
- SAS 学习笔记(六)— SAS与属性数据分析
- science 近些年上发表的关于网络人工智能等内容汇总
热门文章
- 第十五周知原理题目解析
- 设置ScrollView中content位置导致content会自动移动
- win10中打开cygwin出现崩溃问题
- Pycharm中对sqlite数据库的可视化操作——详细步骤一目了然
- 电话语音控件:AddTapi.NET 6.0 Crack
- c语言平面向量加法考点,平面向量的加减法怎么死活都不会?有没有什么口诀?
- MFC CListCtrl 虚拟列表使用详解
- 《2021-2022年中国国资云市场发展状况研究报告》发布 华云数据位居中国国资云市场领先者
- 删除jar包中的.class文件保留源码文件.java文件
- springcloud+springboot+Eureka+Feign+Ribbon+Hystrix+Zuul