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 相关文章推荐
Javascript开发包大全整理
Dec 22 Javascript
javascript 数组学习资料收集
Apr 11 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 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
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
php Smarty模板生成html文档的方法
2010/04/12 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
python3 爬取图片的实例代码
2018/11/06 Python
Python3数字求和的实例
2019/02/19 Python
python如何实现视频转代码视频
2019/06/17 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
设计师个人求职信范文
2014/02/02 职场文书
制作部班长职位说明书
2014/02/26 职场文书
项目建议书模板
2014/05/12 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
培训后的感想
2015/08/07 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫