Vue的中心思想是数据驱动,像远古时代的老前辈jQuery是结构驱动。
大家回忆下以前我们使用jQuery写代码的时候,经常是这样写的:
$("#myDiv").html("HelloWorld")
这些写法首先要获取Dom节点,也就是Dom结构,然后再修改数据更新结构的内容,使用jQuery的一个很大的目的就是为了去简化Dom的操作,而使用Vue就大不一样了,Vue的做法就是直接this.msg=HelloWorld,然后msg就会自动的同步到结构上,我们所要关心的是数据内容的改变,而不再去关心如何操作Dom结构了。
总结一句话:不要在想着怎么操作DOM,而是想着如何操作数据!!
前端框架百花齐放、争奇斗艳,令人眼花缭乱。大神们一言不合就整一个框架出来,另小白们无所适从。下面罗列了一些比较优秀的UI框架,Star多的大都是老牌劲旅,Star少的许多是后起之秀。
(1)Element 饿了么 vue 2.0后台UI框架 (Star:18382)
https://github.com/ElemeFE/element
(2)iview组件库 (Star:10186)
iView 主要服务于 PC 界面的中后台业务,很优秀的组件库,可惜不适合移动端
https://github.com/iview/iview
https://iviewui.com/
(3)vux 基于Vue和WeUI的移动UI组件 (Star:9762)
Vux是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。
https://github.com/airyland/vux
https://vux.li/
(4)Mint-UI 饿了么移动端组件库 (Star:8062)
由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库
https://github.com/ElemeFE/mint-ui
(5)vue-admin 管理面板UI框架 (Star:6289)
https://github.com/vue-bulma/vue-admin
(6)vue-material为 Vue.js 打造的 Material 风格的组件 (Star:4550)
https://github.com/vuematerial/vue-material
https://vuematerial.github.io/#/
(7)vue-strap基于 Vue.js 的 Bootstrap 组件 (Star:4400)
https://github.com/yuche/vue-strap
http://yuche.github.io/vue-strap/
(8)KeenUI 基于Material Design的UI (Star:3041)
https://josephuspaye.github.io/Keen-UI/
(9)vonic (Star:2276)
https://github.com/wangdahoo/vonic/
https://wangdahoo.github.io/vonic/docs/#/
(10)Radon-ui awe大神最近写的一套UI (Star:791)
https://github.com/luojilab/radon-ui
(11)N3-components 基于N3ui (Star:781)
https://github.com/N3-components/N3-components
(12)vue-carbon (Star:739)
https://github.com/myronliu347/vue-carbon
上文转自于 https://www.cnblogs.com/tkzc2013/p/8127294.html
更多 vue 框架参考 https://www.awesomes.cn/subject/vue# 应用-框架
优秀的 github demo 推荐 https://github.com/bailicangdu
1.什么是elementUI?
ElementUI是饿了么前端团队推出的一款基于Vue的桌面端UI框架
大白话: 和Bootstrap一样对原生的HTML标签进行了封装, 进行了美化, 让我们能够专注于业务逻辑而不是UI界面
2.elementUI使用
https://element.eleme.cn/#/zh-CN/component/installation
3.elementUI优化
默认情况下无论我们有没有使用到某个组件, 在打包的时候都会将elementUI中所有的组件打包到我们的项目中
这样就导致了我们的项目体积比较大, 用户访问比较慢
4.如何优化
为了解决这个问题, elementUI推出了按需导入, 按需打包. 也就是只会将我们用到的组件打包了我们的项目中
没有用到的组件不会被打包
https://element.eleme.cn/#/zh-CN/component/quickstart
1.什么是MintUI?
MintUI是饿了么前端团队推出的一款基于Vue的移动端U框架
大白话:和Bootstrap一样对原生的HTML标签进行了封装,让我们能够专注于业务逻辑而不是UI界面
2.mintUI使用
http://mint-ui.github.io/#!/zh-cn
3.注意点: MintUI和ElementUI的第一个不同, 就是在MintUI中需要通过Vue.component来告诉Vue我们需要使用
1.什么是Vant?
在使用MintUI的过程中发现有很多的坑,所以个人不推荐在移动端中选择MintUIXant是有赞前端开发团队又推出的一款 基于Vue的移动端UI框架
大白话:和Bootstrap一样对原生的HTML标签进行了封装,进行了美化,让我们能够专注于业务逻辑而不是UI界面
Vue.use只能use插件,不能use组件
那么如何将一个组件封装成一个插件呢?
1.Vue.use()做了什么事情?
Vue.use的作用是注册一个Vue插件(注册组件), Vue.use必须在new Vue之前使用
2.什么时候需要定义插件?
当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件
例如: 网络加载指示器
3.如果自定义一个插件?
https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6