复习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");