vue.js中mint-ui框架的使用方法


Posted in Javascript onMay 12, 2017

本文为大家分享了vue.js中mint-ui框架的使用方法,具体内容如下

1.安装vue2.0的mint-ui框架

npm install mint-ui -save

2.引用和使用框架,我用的是全部组件,也可以按需选择加载相应的组件,不过要使用babel-plugin-component

import Mint from 'mint-ui'; 
Vue.use(Mint);

3.创建一个header.vue组件,里面写入mint-ui的头部组件

<template> 
 <mt-header title="问答"> 
 <router-link to="/search" slot="left"> 
  <mt-button icon="search">{{searchTitle}}<mt-button> 
 <router-link> 
 <mt-button to="/ask" slot="right"> 
  <mt-button icon="ask">提问<mt-button> 
 <mt-button> 
 <mt-header> 
<template>
<script> 
 require('../less/config.less'); 
 export default { 
  data(){ 
  return{ 
   searchLeft:'searchLeft', 
   searchTitle:'搜索', 
  } 
  }, 
  methods:{ 
  handleClose:function(){ 
   this.$indicator.open('加载中...'); 
  } 
  } 
 } 
<script>

4.在app.vue组件中调用header.vue组件

<template> 
 <div id="app"> 
 <h-eader><h-eader> 
 <router-link to="/home">主页<router-link> 
 <router-link to="/news">新闻<router-link> 
 <mt-button @click.native="handleClick">按钮<mt-button> 
 <div> 
  <router-view><router-view> 
 <div> 
 <div class="box"><div> 
 <div> 
<template>
<script> 
 import Header from './components/header.vue'; 
 require('./less/collect.less'); 
 export default { 
 name: 'app', 
 methods:{ 
  handleClick:function(){ 
  this.$indicator.open('加载中...'); 
  }, 

 }, 
 components:{ 
  'h-eader':Header 
 } 
 } 
<script>

5.预览图

vue.js中mint-ui框架的使用方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 上传图片预览问题
Dec 06 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
vue 如何使用递归组件
Oct 23 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 #Javascript
微信小程序之数据双向绑定与数据操作
May 12 #Javascript
Flask中获取小程序Request数据的两种方法
May 12 #Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 #Javascript
微信小程序 支付功能实现PHP实例详解
May 12 #Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 #Javascript
JS实现图片预加载之无序预加载功能代码
May 12 #Javascript
You might like
缅甸的咖啡简史
2021/03/04 咖啡文化
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
解决GD中文乱码问题
2007/02/14 PHP
PHP 开源框架22个简单简介
2009/08/24 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
layui树形菜单动态遍历的例子
2019/09/23 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
js实现3D旋转相册
2020/08/02 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
Python命令启动Web服务器实例详解
2017/02/23 Python
Python下载网络小说实例代码
2018/02/03 Python
python实现linux下抓包并存库功能
2018/07/18 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
关于母亲节的感言
2014/02/04 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
北京天坛导游词
2015/02/12 职场文书