MintUI(详见官方文档)
MintUI
MintUI
是饿了么团队开发的基于移动端的vue
组件库。用于搭建移动端界面。
http://mint-ui.github.io/docs/#/zh-cn2
Vant
组件库也是基于移动端的vue
组件库(有赞团队)。
https://vant-contrib.gitee.io/vant/v2/#/zh-CN/
基于脚手架项目安装mintui
新建项目。
# 找一个空文件夹 VUEUI/day01/demo下执行一个命令 vue create scaffolding # 依次选择 Manually select features 选择 Babel - Router - VueX 去掉 linter 2.x 是否使用history的路由模式? 回车 Y In package.json 是否将当前上设置作为未来创建项目的预设配置? 回车 N
在新项目中,通过
npm i
命令安装MintUI
。# 进入新创建的项目目录 cd scaffolding # 执行安装命令 npm i mint-ui -S
安装成功后,将会在
package.json
中出现mint-ui
的依赖。node_modules
文件夹下也会出现mint-ui
的源码包。在脚手架项目中,
main.js
配置MintUI
。// MintUI import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.use(MintUI)
开始使用组件。
npm run serve
没有编译错误,配置完成。
测试案例:访问http://localhost:8080/button
,看到mintui
提供的移动端的按钮样式。
- 编写新组件页面:
src/testing/Button.vue
. - 配置路由:
/button Button.vue
.
MintUI
常用组件
Button
组件
Header
组件
header
用于定义移动端界面的头部标题栏。基本结构:
<mt-header title="标题栏中间的文字内容"><div slot="left">左边</div><div slot="right">右边</div>
</mt-header>
案例:访问:/header
看到 src/testing/Header.vue
。
引入外部样式文件: reset.css
在
public
下新建styles
目录,把reset.css
放进去。在
index.html
中引入该css
文件即可。<link rel="stylesheet" href="/styles/reset.css">
脚手架项目属于单页面应用,无论访问任何地址,其实都在加载public/index.html
.所以,在public
下的资源,可以直接在index.html
通过标签路径引入网页。
Field
组件
Field
组件用于实现表单编辑器,其基本结构:
<mt-field type="输入框的类型"label="文本框左侧标签的文本"placeholder="占位文本"disabled 是否禁用readonly 是否只读state="输入框的状态 success|error|warning" disableClear 禁用清空文本框按钮:attr="{maxlength:11}" 为内部的input标签添加属性
></mt-field>
案例:访问 /field
, 看到testing/Field.vue
.
案例:完成注册页面。
- 新建页面:
src/views/Register.vue
。 - 配置路由:
/register <-> Register.vue
实现注册页面的表单验证
- 为按钮绑定
click
事件,点击后验证表单。 - 在事件处理函数中分别为3个组件进行格式验证,都符合条件才输出验证成功。
- 可以通过
Field
的state
属性来提示用户格式是否正确。
Field
组件的@blur
失效问题
在Mintui
中,为Field
组件绑定焦点失去、焦点获取的事件的方式如下:
<mt-field @blur.native.capture="checkName()"></mt-field>
<mt-field @focus.native.capture="checkName()"></mt-field>
为mt-field
组件直接添加@blur
无效,因为会被vue
当做是mt-field
组件的一个自定义事件。而这种事件需要在mt-field
组件内部捕获,使用$emit()
触发该自定义事件。所以需要在此清楚的告诉vue
,该blur
事件是原生的焦点失去事件,所以需要添加@blur.native
。
mt-field
组件在编译的时候将会编译成a链接元素:
<a class="mint-cell mint-field"><div class="mint-cell-left"></div> <div class="mint-cell-wrapper"><div class="mint-cell-title"><span class="mint-cell-text">用户名</span></div> <div class="mint-cell-value"><input placeholder="请输入用户名" type="text" class="mint-field-core"> <div class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></div><div class="mint-field-other"></div></div></div> <div class="mint-cell-right"></div>
</a>
@blur
将会被添加到最外层的a
上,而浏览器默认input
的blur
事件阻止冒泡,不会执行a
的blur
事件,所以需要添加:@blur.native.capture
,是a
上的blur
事件在事件捕获阶段先执行。
MintUI
常用组件
Navbar
组件
navbar
组件用于实现顶部选项卡(导航)。其基本语法:
<mt-navbar v-model="active"><mt-tab-item id="1">推荐</mt-tab-item><mt-tab-item id="2">科技</mt-tab-item><mt-tab-item id="3">数码</mt-tab-item><mt-tab-item id="4">军事</mt-tab-item>
</mt-navbar>
<script>....data: {return {active: '1'}}....
</script>
案例:访问:/nav
, 看到 testing/Nav.vue
脚手架项目中的图片访问机制
如果在vue
组件中访问src
下的资源,则可以使用相对路径来引入:
<img src="../assets/001.png"> 相对路径 相对当前文件的路径写法
<img src="@/assets/001.png"> 相对路径 @代表了src
如果如上述方式访问图片,则脚手架将会在编译打包过程中,将该引用的图片当做代码模块来处理。会将图片放入/img
目录,并且重命名 001.xxxxxxxx.png
。而后还将修改src
属性值,使得可以访问到该图片。
<img src="/img/001.2cb338f3.png">
上述过程为脚手架对图片的编译打包过程,如果图片足够小,脚手架还有另外一种处理图片的方式:将小图片直接转换成base64
图片编码,为src
属性直接赋值。
研究一下图片的存放位置
在脚手架项目中图片的存放位置有两处:public
下、 src
下
src
下的图片用相对路径访问
假设有图片: src/assets/001.png<img src="../assets/001.png"> 相对路径 相对当前文件的路径写法
<img src="@/assets/001.png"> 相对路径 @代表了src
public
下的图片用绝对路径(斜杠/
)直接访问
假设有图片: public/001.png
<img src="/001.png">
public
文件夹下的资源会在打包时原封不动的复制到dist
目录下,所以可以直接通过/
来访问这些资源。
什么图片放src
?什么图片放public
?
src
目录属于源代码目录,需要思考这些图片是不是属于源代码的一部分。一些不会变化的、项目中必须显示的小图标就适合放到src
,其余的都可以放入public
或其它静态图片服务器,通过网络地址动态加载。
TabContainer
组件
TabContainer
组件用于实现面板,页面中可以保存多个面板,并且实现面板内容的切换(一个显示,其它隐藏)。其基本结构:
<mt-tab-container v-model="active"><mt-tab-container-item id="1">面板1内容</mt-tab-container-item><mt-tab-container-item id="2">面板2内容</mt-tab-container-item><mt-tab-container-item id="3">面板3内容</mt-tab-container-item><mt-tab-container-item id="4">面板4内容</mt-tab-container-item>
</mt-tab-container>
Tabbar
组件
Tabbar
组件用于实现底部选项卡,其语法:
<mt-tabbar v-model="selected"><mt-tab-item id="sy">首页</mt-tab-item><mt-tab-item id="gwc">购物车</mt-tab-item><mt-tab-item id="wd">我的</mt-tab-item>
</mt-tabbar>
data:{selected: 'sy'
}
案例:访问:/tabbar
看到:testing/Tabbar.vue
脚手架环境下的图片的动态路径问题
有如下标签:
<img src="../assets/main_0.png">
该路径为相对路径,访问了src下的资源。这种写法最终将会被脚手架编译,重写src
:
<img src="/img/main_0.adsdkfhs.png">
注意:如果src为动态属性(前面有冒号),脚手架将不会编译该路径,直接输出到页面:
<img :src="../assets/main_0.png">
将不会编译,直接输出为:
<img src="../assets/main_0.png"> // 导致图片找不到
所以应该将动态路径字符串交给require方法进行处理,将会返回处理后的结果(目标路径):
<img :src="require('../assets/main_0.png')">
将会编译为:
<img src="/img/main_0.adsdkfhs.png">
图片处理方案(总结):
- 先确定图片应该放在
public
还是src
。 - public下图片用绝对路径访问,
src
下图片用相对路径访问。 - 若
src
下的图片路径需要动态处理(:src=""
),使用require()
方法处理该路径。
处理底部选项卡的选中效果
点击某一个底部选项卡时,需要动态切换上半部分的内容。可以通过动态组件的方式实现。也可以使用嵌套路由。
访问:
localhost:8080/home/index Home中显示'首页'内容
localhost:8080/home/me Home中显示'我的'内容
实现步骤
准备好3个
Vue
页面:HomeView.vue
该页面中包含一个底部选项卡,还有一个<router-view/>
Index.vue
该页面中用于显示首页内容。Header
Navbar
TabContainer
Me.vue
用于显示我的个人信息页面内容。
配置嵌套路由:
访问: localhost:8080/home/index Home中显示'首页'内容 localhost:8080/home/me Home中显示'我的'内容
Swipe
组件
swipe
组件用于实现轮播图,其基本语法结构:
<mt-swipe><mt-swipe-item>1</mt-swipe-item><mt-swipe-item>2</mt-swipe-item><mt-swipe-item>3</mt-swipe-item>
</mt-swipe>
引入ArticleItem
组件,构建基本界面结构
将
article_item.vue
复制到components
目录下。在
Index.vue
中引入该组件:<template>....<ArticleItem />.... </template><script> import ArticleItem from '../components/article_item.vue' export default {components:{ArticleItem} } </script>
MintUI(详见官方文档)相关推荐
- kafka官方文档学习笔记3--配置简述
Kafka使用key-value键值对格式的配置,这些配置即可以在进程启动时,根据指定的properties文件加载,也可以通过编程的方式,在程序中动态指定:根据集群中角色的不同分为6种配置: bro ...
- Element-UI 要怎么学?官方文档!
Element UI Element UI 介绍 安装 Element UI Element UI 组件使用 Basic 组件 Button 按钮 Link 文字链接 Layout 布局 Contai ...
- matplotlib 常用图形绘制与官方文档
matplotlib 常用图形绘制与官方文档 matplotlib.org Python库matplotlib 图形绘制 官方教程目录 matplotlib.pyplot matplotlib.pyp ...
- 基于vue的微信小程序开发5分钟上手教程(官方文档转)
使用手册 mpvue 继承自 Vue.js,其技术规范和语法特点与 Vue.js 保持一致. 注:其实就是官方文档,只是习惯看博文学习才直接copy过来的,详见官方文档 本文档适用于有一定 Vue.j ...
- 《Redis官方文档》用Redis构建分布式锁
<Redis官方文档>用Redis构建分布式锁 用Redis构建分布式锁 在不同进程需要互斥地访问共享资源时,分布式锁是一种非常有用的技术手段. 有很多三方库和文章描述如何用Redis实现 ...
- Swift 4官方文档中文版 The Basic(上)
Swift学习交流群: 313838956 本群由Guards翻译组创建并维护, 志于给认真想学习Swift的同学打造一个良好的交流圈子. 该文章翻译自Apple官方文档: The Swift 4 P ...
- Spring 4 官方文档学习(十一)Web MVC 框架之异常处理
1.HandlerExceptionResolver Spring HandlerExceptionResolver的实现们会处理controller执行过程中发送的unexpected except ...
- 调查了9648位Go用户:吐槽最多的竟是官方文档!
整理 | 苏宓 出品 | CSDN(ID:CSDNnews) 诞生于 2009 年,崛起于服务器端,作为 Google 亲手开发出来的 Go 语言,还记得彼时 Google 资深软件工程师 Rob P ...
- Spring Framework 官方文档学习(四)之Validation、Data Binding、Type Conversion(二)
接前一篇 Spring Framework 官方文档学习(四)之Validation.Data Binding.Type Conversion(一) 本篇主要内容:Spring Type Conver ...
- 对于微信二维码相关官方文档的一些注解(微信登录和绑定微信、关注公众号)
转载自:https://www.jianshu.com/p/d533c69be034 由于微信官方文档对此的描述虽然还可以,但是还是有一些让人疑惑的地方,所以笔者做了一些注解,希望对大家有所帮助 为什 ...
最新文章
- 【Java】使用单向链表实现一个队列(Queue)
- encoder decoder 模型理解
- [计算机网络] 【谢希仁】考前突击复习二、三、四章
- [Azure] Notification Hubs注册模式
- 9 Unconstrained minimization
- 百度OCR文字识别API使用心得 com.baidu.ocr.sdk.exception.SDKError[283604]
- 非多态的继承情况下,基类指针可以指向派生类对象么?
- 我的前半生面试过300精英+学霸,总结出的面试经验干货大放送!
- Go中对两个 nil 进行比较的结果是什么?
- RepBaseRepeatMaskerEdition下载 | RepeatMasker
- C++STL查找,lower_bound()函数和upper_bound()函数的区别
- junit断言_JUnit断言
- win10新建管理员账户_电脑技巧|Win10家庭版如何开启超级管理员账户
- python 自动化办公 随机生成题库文档
- c语言大学题库pdf,C语言试题库(完整版)..pdf
- 畅玩新方式 | Google Play 游戏 Beta 版在 PC 上发布
- 东软之行-人生当展翅高飞
- EXCEL表格-数据验证报错弹窗制作
- unity中的一个简单易用的A*寻路算法类
- 全局vue中修改字体样式 苹方字体 微软雅黑 亲测可用
热门文章
- wso2 mysql,WSO2 DAS +具有MySQL的集群APIM
- 微信表情包储服务器,微信表情包不用收藏,只需打开这个设置,再也不担心斗图了...
- 移动app性能测试工具:Emmagee使用介绍
- 图解: 线程状态转换(线程生命周期这一篇够用了)
- 阿里云移动推送 - 异常记录
- 阿里云推送:ios和android指定用户推送消息和通知
- webservice wsimport 报错
- 用ArcGIS提取HWSD中的土壤单一属性数据
- 验证OpenCV安装是否成功工程测试模板
- 一汽丰田RAV4电路图2012至2013