复习MintUI
一、表单----复选框列表
1.<mt-checklist
title="标题"
options="['a','b','c']" #选项列表
v-model="val3" #val3=[ ]
>
</mt-checklist>
#注意事项:复选框列表 value保存数组
2.1 mint-ui组件中面板与底部导航条-(重点)
#由于移动端设备宽度问题,创建多个面板显示不同的
#商品信息,统一个时刻只能显示一个面板
#创建面板方式:一个父面板中间多个子面板,切换
#子面板
<mt-tab-container v-model="active"> 父面板
<mt-tab-container-item id="tab1">
子面板1
</mt-tab-container-item>
<mt-tab-container-item id="tab2">
子面板2
</mt-tab-container-item>
<mt-tab-container-item>
子面板3
</mt-tab-container-item>
<mt-tab-container>
#当active变量中保存tab1时显示tab1对应子面板
#创建新组建 Exam05.vue /Exam05
练习:
(1)创建新组建 Exam06.vue /Exam06
(2)添加三个按钮 "美食" "购物" "休闲"
(3)并且面板父面板与三个子面板
(美食子面板/购物子面板/休闲子面板)
(4)当用户点击某个按钮会显示对应子面板
<mt-tab-container v-model="active">
<mt-tab-container-item id=""tab1>
美食子面板
</mt-tab-container-item>
<mt-tab-container-item>
购物子面板
</mt-tab-container-item>
<mt-tab-container-item>
休闲子面板
</mt-tab-container-item>
</mt-tab-container>
2.2:mint-ui组件库底部导航条-(重点)
底部导航条按钮
(1)图片
(2)文字
(3)当点击按钮时显示指定面板
<mt-tabbar fixed v-model="active"> #父元素
<mt-tab-item id="tab1"> #按钮
<img src=""/> #图片
文字 #按钮下文字
</mt-tab-item>
<mt-tab-item id="tab2"> #按钮
<img src=""/> #图片
文字 #按钮下文字
<mt-tab-item>
</mt-tabbar>
#fixed将tabbar固定在底部导航条
#当用户点击某个按钮时,当时按钮id保存
active变量中
#创建新组件 Exam07.vue /Exam07
2.3:父子组件调用与数据传递
练习一:父组件调用子组件
Sub08.vue 子组件
Fa08.vue 父组件
#Fa08.vue(父) 调用 Sub08.vue(子)
(1)创建子组件 Sub08.vue
(2)创建父组件 Fa.vue
2.1:引入子组件
import Sub08 from "./Sub08.vue"
2.2:注册子组件并且起名字
components:{
"子组件起名字":子组件对象
"sub08":Sub08
}
#sub08子组件名字,全小写不要与标准重名
2.3:在模板中调用即可
<template>
<sub08></sub08>
</template>
#注意事项:子组件不用配置访问路径
var store=new Vuex.Store({
state:{age:23} 保存共享数据
mutations:{ } 保存函数用于修改共享数据
getters:{} 保存函数用户获取共享数据
action:{} 保存函数异步修改数据,
等待数据加载成功后,异步修改数据
})
#当前数据下载慢,立即修改 age = undefined 错误
#提高程序正确性
mutations:{ clear(state){ state.age=0 }}
action:{
#context 上下文对象=>store存储对象
modifyAge(context)=>{
setTimeout(()=>{
context.commit("clear");
},500)
}
}
如何调用定义在actions中方法
this.$store.dispatch("modifyAge");
复习MintUI的更多相关文章
- iOS总结_UI层自我复习总结
UI层复习笔记 在main文件中,UIApplicationMain函数一共做了三件事 根据第三个参数创建了一个应用程序对象 默认写nil,即创建的是UIApplication类型的对象,此对象看成是 ...
- vuex复习方案
这次复习vuex,发现官方vuex2.0的文档写得太简略了,有些看不懂了.然后看了看1.0的文档,感觉很不错.那以后需要复习的话,还是先看1.0的文档吧.
- 我的操作系统复习——I/O控制和系统调用
上篇博客介绍了存储器管理的相关知识——我的操作系统复习——存储器管理,本篇讲设备管理中的I/O控制方式和操作系统中的系统调用. 一.I/O控制方式 I/O就是输入输出,I/O设备指的是输入输出设备和存 ...
- 复习(1)【Maven】
终于开始复习旧知识了,有输入必然要有输出.输入和输出之间的内化过程尤为重要,在复习的同时,真正把学到的东西积淀下来,加深理解. Maven项目概念与配置 Maven是一个项目管理和综合工具.Maven ...
- Element-ui,Mint-ui
style-loader css-loader style!css 饿了么团队开源一个基于vue 组件库 elementUI PC MintUI 移动端 官网: http://element.elem ...
- 《CSS权威指南》基础复习+查漏补缺
前几天被朋友问到几个CSS问题,讲道理么,接触CSS是从大一开始的,也算有3年半了,总是觉得自己对css算是熟悉的了.然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司 ...
- JS复习--更新结束
js复习-01---03 一 JS简介 1,文档对象模型 2,浏览器对象模型 二 在HTML中使用JS 1,在html中使用<script></script>标签 2,引入外部 ...
- jQuery 复习
jQuery 复习 基础知识 1, window.onload $(function(){}); $(document).ready(function(){}); 只执行函数体重的最后一个方法,事 ...
- jQuery5~7章笔记 和 1~3章的复习笔记
JQery-05 对表单和表格的操作及其的应用 JQery-06 jQuery和ajax的应用 JQery-07 jQuery插件的使用和写法 JQery-01-03 复习 之前手写的笔记.实在懒得再 ...
随机推荐
- thinkphp5.1+ 使用 Redis 缓存
修改 config/cache.php 将其配置成多个缓存类型,示例 <?php // +---------------------------------------------------- ...
- php class 访问控制
属性(attribute ) 必须声明访问控制类型 类型: public 公用 protected 受保护的 private 私有的 public 类型的属性 可以在外部访问 protected 及 ...
- StringRedisTemplate的常用操作
stringRedisTemplate.opsForValue().set("test", "100",60*10,TimeUnit.SECONDS);//向r ...
- beetl 模板语法
如何定义临时变量 @var tmp = false; 如何给临时变量赋值 @tmp = true; 如何在判断中使用临时变量 @if(tmp){ ... @} 如何使用条件语句 if else @if ...
- 短视频sdk:选择一个靠谱的短视频SDK 你需要了解这些
2017 年,短视频成为了内容创业的新风口,各种短视频 App 如雨后春笋般先后上线.随着互联网内容消费升级,视频越来越像文字.图片一样,成为每一个 App 不可或缺的一部分. 为了能够更好地聚焦于业 ...
- Fiddler手机端抓包环境设置与过滤(二)
经过了上一篇,我们已经配好了PC与手机端的抓包环境可以实现抓包.传送机:https://www.cnblogs.com/jc-home/p/11668712.html 但是如果不经过筛选的话抓到的内容 ...
- 现代企业要求上什么样的MES(四)
一个制造企业要想盈利,在生产方面要做的无非是提高资源利用效率和缩短生产通过时间(生产周期),而实现这俩步骤需要生产状况的在线透明及避免薄弱环节的分析数据,由此达到改善生产状态的目的.在erp系统中,通 ...
- 使用 Minikube 安装 Kubernetes
概述: 单机低配置主机也可以玩转kubernetes集群.该文章是将介绍使用Minikube安装Kubernetes集群(一般用于本地/开发环境). 配置环境: 硬件:CPU 至少2个核心,至少2.5 ...
- Spring杂谈 | 什么是ObjectFactory?什么是ObjectProvider?
在Spring的学习过程中,总是学的越多,不懂的越多.本来只是想将ApplicationContext的相关内容全部梳理一遍,结果发现涉及的东西越来越多,比如上篇文章中的ResolvableType, ...
- Python 文件的读取与写入
1. 读取文件,文件中没有中文 备注 : 文件名 : EnglishFile.txt 文件位置 : 保存在所写的.py文件的同级目录,附上截图,便于参考 备注 : 文件位置可以改变,只需要把文件路径传 ...