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 简练的几个函数
Aug 29 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
javascript实现图片轮换动作方法
Aug 07 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&amp;MYSQL服务器配置说明
2006/10/09 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
python操作日期和时间的方法
2014/03/11 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
python中的常量和变量代码详解
2018/07/25 Python
浅述python2与python3的简单区别
2018/09/19 Python
python isinstance函数用法详解
2020/02/13 Python
Python序列化pickle模块使用详解
2020/03/05 Python
Python如何定义有可选参数的元类
2020/07/31 Python
用python实现一个简单的验证码
2020/12/09 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
Python实现京东抢秒杀功能
2021/01/25 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
西班牙在线光学:Visual-Click
2020/06/22 全球购物
高校生生产实习自我鉴定
2013/09/21 职场文书
个人年底工作总结
2015/03/10 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
四年级语文教学反思
2016/03/03 职场文书
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers