由于最近项目需求,用上了mint-ui来重构移动端页面,从框架本身来讲我觉得很强大了,用起来也很不错,但是文档就真的是,,,,让我无言以对,给的api对于我们这些小菜鸟来讲真的是处处是坑呀(ps:用vue的主要目的是方便数据双向绑定,所以并没有配置vue的环境,webpack,node等)

mint-ui Toast

官网文档示例:

 Toast({
message: 'Upload Complete',
position: 'bottom',
duration: 5000
});

实际应用:

 this.$toast({
message: '提示信息',
position: 'middle',
duration: 3000
});

mint-ui MessageBox

官网文档示例:

 MessageBox({
title: 'Notice',
message: 'Are you sure?',
showCancelButton: true
});

实际应用:

 this.$messagebox.confirm('确定执行此操作?')
.then(action => {
this.cancel = false;
})
.catch(action => {
this.cancel = true;
});

mint-ui Field

mt-field type="date"初始化的时候预置值格式

 <template>
<mt-field label="birthday" placeholder="Input birthday" type="date" v-model="birthday"></mt-field>
</tempalte>
<script>
export default{
data(){
return{
birthday:'2017-06-12'
}
},
methods:{}
}
</script>

mint-ui Switch

事件change ,API文档里面写返回一个checked:boolen值,但是直接在change事件里面取出来的checked值却和mt-switch绑定的value相反,所以还是只能监听value的变化

mint-ui vue双向绑定的更多相关文章

  1. vue双向绑定的原理及实现双向绑定MVVM源码分析

    vue双向绑定的原理及实现双向绑定MVVM源码分析 双向数据绑定的原理是:可以将对象的属性绑定到UI,具体的说,我们有一个对象,该对象有一个name属性,当我们给这个对象name属性赋新值的时候,新值 ...

  2. IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题

    先上图: 可以看到输入框中的内容和弹出框的内容不一致, <input class="am-fr labRight" id="txcode" type=&q ...

  3. Vue双向绑定原理,教你一步一步实现双向绑定

    当今前端天下以 Angular.React.vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋. 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变 ...

  4. 梳理vue双向绑定的实现原理

    Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty来劫持数据的setter,getter,在数据变动时发布消息给订阅者,订阅者收到消息后 ...

  5. vue双向绑定原理分析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/jiangzhenf ...

  6. vue双向绑定原理及实现

    vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...

  7. vue双向绑定原理源码解析

    当我们学习angular或者vue的时候,其双向绑定为我们开发带来了诸多便捷,今天我们就来分析一下vue双向绑定的原理. 简易vue源码地址:https://github.com/maxlove123 ...

  8. Vue双向绑定实现原理demo

    一.index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  9. Vue双向绑定原理(源码解析)---getter setter

       Vue双向绑定原理      大部分都知道Vue是采用的是对象的get 和set方法来实现数据的双向绑定的过程,本章将讨论他是怎么利用他实现的. vue双向绑定其实是采用的观察者模式,get和s ...

  10. Vue双向绑定原理及其实现

    在之前面试的时候被面试官问到是否了解Vue双向绑定的原理,其实自己之前看过双向绑定的原理,但也就是粗略的了解,但是没有深入.面试官当时让我手写一个原理,但是就蒙了

随机推荐

  1. Java面向对象-方法的值传递和引用传递

    Java面向对象-方法的值传递和引用传递 0 发布时间:『 2016-08-21 14:21』  博客类别:Java核心基础  阅读(197) 评论(0) Java面向对象-方法的值传递和引用传递 方 ...

  2. 数据库索引B-树和B+树

    一开始学习数据结构的时候,主要学习的是数组,队列,链表,队列,栈,树这些数据结构,其中树主要学习二叉树,平衡二叉树,二叉搜索树等这些子节点最多只有两个的树结构.但是,当我们接触数据库的时候,你会发现数 ...

  3. css基础:样式属性

    1.背景与前景:background-color::背景色,样式表优先级高. background-image:url(路径):设置背景图片 background-attachment:fixed:背 ...

  4. 向eclipse的JavaWeb项目中导入jar包--备忘录

    一:      在你所需的jar包网站下载对应的jar包.如org.apache.commons.lang.jar. 二:复制粘贴到该JavaWeb的WEB-INF目录下的lib目录下,如: 三:右键 ...

  5. 【C++小白成长撸】--(续)单偶数N阶魔方矩阵

    1 /*程序的版权和版本声明部分: **Copyright(c) 2016,电子科技大学本科生 **All rights reserved. **文件名:单偶数N阶魔方矩阵 **程序作用:单偶数N阶魔 ...

  6. my new day in CNblog

    感谢大家 今天正式在博客园平台开启我的第三个技术面博客 之前一直坚持在csdn平台撰文(http://blog.csdn.net/github_38885296)欢迎参观:) 因为觉得博客园知名度虽不 ...

  7. 团队作业4——第一次项目冲刺(Alpha版本) 3

    一.Daily Scrum Meeting照片 二.燃尽图 注:由于前两天燃尽图制作不准确,所以重新制作一个,现已由工作量改为功能数,工作日从今天开始. 三.项目进展 功能: 算法这一块已全部完成 文 ...

  8. 团队作业4——第一次项目冲刺 SiStH DaY

    项目冲刺--??? 你以为penta kill以后就没事了嘛,就没得写了吗?你还期待我会给你一个六杀?七杀?别逗了,你以为你玩三国杀呢,做项目这么严肃的事情,怎么能玩笑. 那么我就在这里明明白白地告诉 ...

  9. 【Beta】Daily Scrum Meeting——Day6

    站立式会议照片 1.本次会议为第六次Meeting会议: 2.本次会议在早上9:35,在陆大楼召开,本次会议为30分钟讨论今天要完成的任务以及接下来的任务安排. 燃尽图 每个人的工作分配 成 员 昨天 ...

  10. 201521123025《JAVA程序设计》第6周学习总结

    1. 本章学习总结 2. 书面作业 Q1.clone方法 1.1Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么? 要克隆对象要覆盖clon ...