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

mint-ui Toast

官网文档示例:

  1. Toast({
  2. message: 'Upload Complete',
  3. position: 'bottom',
  4. duration: 5000
  5. });

实际应用:

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

mint-ui MessageBox

官网文档示例:

  1. MessageBox({
  2. title: 'Notice',
  3. message: 'Are you sure?',
  4. showCancelButton: true
  5. });

实际应用:

  1. this.$messagebox.confirm('确定执行此操作?')
  2. .then(action => {
  3. this.cancel = false;
  4. })
  5. .catch(action => {
  6. this.cancel = true;
  7. });

mint-ui Field

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

  1. <template>
  2. <mt-field label="birthday" placeholder="Input birthday" type="date" v-model="birthday"></mt-field>
  3. </tempalte>
  4. <script>
  5. export default{
  6. data(){
  7. return{
  8. birthday:'2017-06-12'
  9. }
  10. },
  11. methods:{}
  12. }
  13. </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. 超简单使用批处理(batch)操作数据库

    超简单使用批处理(batch)操作数据库 批处理(batch)是什么 批处理的执行就好比快递员的工作: 未使用批处理的时候,快递员一次从分发点将一件快递发给客户: 使用批处理,则是快递员将所有要派送的 ...

  2. 灾难恢复-boot分区的恢复方法

    boot分区是系统启动中最重要的部分,如果服务器由于病毒攻击又或者被管理员误删除了boot分区.那么就会存在潜在的风险.为什么说是潜在的风险?因为boot分区被删除后系统仍在继续运行,看似无状况但是在 ...

  3. 七字真言解读TCP三次握手

    三次握手所谓的"三次握手"即对每次发送的数据量是怎样跟踪进行协商使的发送和接收同步,根据所接收到的数据量而确定的数据确认数及数据发送.接收完毕后何时撤消联系,并建立虚连接. 一.七 ...

  4. 编译安装dropbear

    author:JevonWei 版权声明:原创作品 dropbear也可实现ssh远程登录的作业 1. 安装开发包组 yum -y groupinstall "Development Too ...

  5. 原生的AJAX

    var XHR=null; if (window.XMLHttpRequest) { // 非IE内核 XHR = new XMLHttpRequest(); } else if (window.Ac ...

  6. C 语言 define 变参__VA_ARGS__使用

    在C语言的标准库中,printf.scanf.sscanf.sprintf.sscanf这些标准库的输入输出函数,参数都是可变的.在调试程序时,我们可能希望定义一个参数可变的输出函数来记录日志,那么用 ...

  7. 团队作业7---Alpha冲刺之事后诸葛亮

    一.设想与目标 1.我们的软件要解决什么问题? 我们的软件主要是帮助老师解决通过博客地址收集博客的相关信息来对学生对课程的认真与努力程度进行评定的问题,主要就是根据采集到的各项博客数据作为评分项,构建 ...

  8. 扫雷游戏制作过程(C#描述):第四节、菜单操作

    前言 这里给出教程原文地址. 该项目已经放在github上托管. 菜单操作 我们现在的程序单击菜单的时候不会有任何反应,这一节我们主要介绍菜单的相关代码,使得菜单能够正常使用. 现在我们希望在对应级别 ...

  9. 201521123075 《Java程序设计》第14周学习总结

    1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) 参 ...

  10. thymeleaf模板引擎调用java类中的方法(附源码)

    前言 <Docker+SpringBoot+Mybatis+thymeleaf的Java博客系统开源啦> 由于开源了项目的缘故,很多使用了My Blog项目的朋友遇到问题也都会联系我去解决 ...