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 相关文章推荐
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
深入理解javascript原型链和继承
Sep 23 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
js闭包实例汇总
Nov 09 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 Javascript
纯js实现动态时间显示
Sep 07 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
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
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
javascript实现前端分页效果
2020/06/24 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
python函数局部变量用法实例分析
2015/08/04 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
Python必须了解的35个关键词
2020/07/16 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
python 装饰器重要在哪
2021/02/14 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
班组长竞聘书
2014/03/31 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
2015年酒店工作总结
2015/04/28 职场文书
2016年感恩节寄语
2015/12/07 职场文书
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang