Vue搭配mint-ui

有关vue框架的mint-ui

http://mint-ui.github.io/#!/zh-cn

mint.ui和Element.ui 都是由饿了么ued团队开发的ui框架 前者是为移动端服务 后者是为后台管理搭建的

mint-ui 可以全局引入

mint-ui 只给mt-button添加了点击事件 其他组件如果需要添加点击事件需要@click.native

axios 是基于promise构造方法的一个请求方式 主要目的是为了解决传统的ajax回调地狱

--------------------------------------------

vux ui框架 尤雨溪 推荐的 它是由腾讯内部的开发人员创建的（已经创业了）

vux 默认不支持全局添加

ui样式来自于weui

使用node安装 并引入全局 设置全局css

--------------------流程---------------------

在node中引入的插件他们的css等文件的存放目录都差不多，就如mint-ui来说它的css文件就在node_modules-->mint-ui-->lib-->style.css

1. npm install mint-ui --save-dev  (v2.0)
2. 在公用文件里引入mint-ui,并调用全局组件--->main.js
   1. inport Mint from 'mint-ui'
   2. Vue.use(Mint) 必须放到main.js
3. 引入之后启动服务此服务是特式服务，在真正的项目当中会启动外置的服务器 会提供给你 路径端口等信息
4. 当mint-ui引入到当前项目当中就可以直接调用mint中的组件
5. 选择中文文档进行查看,如果没全局引入mint，想要在一个页面只需要一个组件就可以按需引入mint
   1. import { Header } from 'mint-ui';

Vue.component(Header.name, Header);
6. 直接选取一个组件 例如header吧：放置到--->Hello.vue中
7. fixed是固定定位
8. <mt-header fixed title="固定在顶部"></mt-header>
   1. 并在QuickStart中完整引入中引入css样式
      1. import 'mint-ui/lib/style.css'
   2. 想要修改header中的title的话需要进行bind绑定 :
      1. < mt - header : title = "msg" ></mt-header>

      7.添加列表：

       .列表组件是cell项：

                   。这里选用带有链接的列表项放到内容布局的组件中--->info.vue

                   。凡是使用mt开头的布局title是这个组件的内容

                   。在mint-ui中to的属性直接兼容vue-router和router-link中的to用法一样，它的router兼容2.0然后给一个路径/detail/123(还需要加一个模拟用的id，否则无法正常跳转)

< mt-cell

  title = "标题文字"

  to = "/detail"

  is-link

  value="带链接">

</mt-cell>               

     8.Detail.vue推送数据给父元素Hello

<template>

    <div>

         <h2>{{msg}}</h2>

         <h2>{{$route.params.id}}</h2>

    </div>

</template>

<script>

    export default {

         name:"Detail",

         data(){

             return {

                 msg:"哈哈哈哈"

             }

         },

         mounted(){

             this.$emit("to-parent",this.msg)

         }

    }

</script>

<style>

</style>

      9.因为在跳转中detail是显示在Hello中的所以需要在router-view中进行接收数据                              

                         < router - view @ to-parent = "getChild" ></ router - view >在标签中使用@绑定一个方法         

  在router-view中添加一个监听方法的另一个好处就是如果有多个页面，在不同页面之间切换to-parent返回的值不一样,后期可以更好的维护和配置

     然后在methods中实现

<script>

import Info from "./Info"

import Desk from "./Desk"

export default {

  name: 'hello',

  data () {

    return {

      msg: 'This is Index',

      isTrue:false

    }

  },

  methods:{

    getChild(childMsg){ childMsg就是传过来的值

         this.msg = childMsg

         this.isTrue = true

    },

    goHome(){

         this.msg = "This is Index",

         this.isTrue = false

    }

  },

  components:{Info,Desk}

}

</script>

10.给header添加返回图标按钮：但是在返回首页时还存在所以需要加一个判断v-if

<mt-header :title="msg">

           <router-link to="/" slot="left"s v-if="iTrue" @click.native="goHome">设置点击事件返回首页设置一个判断点击按钮后回退按钮消失

             除了button以外的块级元素添加点击事件时会无效，需要添加@click.native原生的click事件

             <mt-button icon="back" <--@click="goHome"-->>返回</mt-button>这里直接添加@click就可以了

           </router-link>

</mt-header>

methods:{

    getChild(childMsg){childMsg就是传过来的值

         this.msg = childMsg

         this.isTrue = true 在详情页时显示

    },

    goHome(){当点击时返回首页，且返回按钮隐藏msg发生更改

         this.msg = "This is Index",

         this.isTrue = false

    }

  },

  components:{Info,Desk}

}

 11.添加底部：引入tapbar组件  

<template>

    <mt-tabbar fixed>

      <mt-tab-item id="tab1">

        <img slot="icon" src="http://temp.im/100x100/ff00cc/fff">

       tab1

      </mt-tab-item>

      <mt-tab-item id="tab1">

        <img slot="icon" src="http://temp.im/100x100/ff00cc/fff">

       tab2

      </mt-tab-item>

      <mt-tab-item id="tab1">

        <img slot="icon" src="http://temp.im/100x100/ff00cc/fff">

       tab3

      </mt-tab-item>

      <mt-tab-item id="tab1">

        <img slot="icon" src="http://temp.im/100x100/ff00cc/fff">

       tab4

      </mt-tab-item>

    </mt-tabbar>

</template>

<script>

    export default {

         name:"Desk"

    }

</script>

<style>

</style>

  12.使用aioxs进行数据请求：

          vue-resource（停止维护了）和aixos都是基于es6的promise构造方法的一种请求方式，主要目的是为了解决传统的ajax回调地狱

           vue-axios 和 axios(全都都可以使用：react angular vue等)他不是全局的，设置全局的话需要设置axios default的一些列设置

               npm install axios --save-dev

                    import axios from "axios"

import axios from "axios";

    export default {

         name:"info",

         data(){

             return {

                 swiperOptions:{

                      autoplay:3000

                 },

                 list:[]

             }

         },

         components:{swiper,swiperSlide},

         mounted:function(){

             var that = this;因为此处的aiox没有加this.所以在下面的赋值当中this存在指向问题

             axios({

                 methods:"get",

                 url:"http://datainfo.duapp.com/shopdata/getGoods.php?callback=",

根据请求进行数据传递   params:{"classID":1}

                 }).then((data)=>{//箭头函数指向的是个闭包函数

进行打印查看数据       console.log(data) 相当于response

                      let datas = eval(data.data)    

打印以后是一个对象数组里面data是用来存放数据的所以这里是data.data

                      that.list = datas

                 })

              }

          }