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 OOP包机制,类创建的方法定义
Nov 02 Javascript
js select常用操作控制代码
Mar 16 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
Sep 06 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
用PHP函数解决SQL injection
2006/10/09 PHP
php+oracle 分页类
2006/10/09 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
php自动加载代码实例详解
2021/02/26 PHP
js常用函数 不错
2006/09/08 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
Python 文件重命名工具代码
2009/07/26 Python
Python修改Excel数据的实例代码
2013/11/01 Python
Python常用知识点汇总
2016/05/08 Python
python面向对象入门教程之从代码复用开始(一)
2018/12/11 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
python实现函数极小值
2019/07/10 Python
浅析python中while循环和for循环
2019/11/19 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
python中pop()函数的语法与实例
2020/12/01 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
国际花店:Pickup Flowers
2020/04/10 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
如何掌握自荐信格式呢
2013/11/19 职场文书
升职自荐书范文
2013/11/28 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
请客吃饭开场白
2015/06/01 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python