component.png

这篇文章主要简单的讲一下vue组件：

-1- vue 组件分为全局组件和局部组件，我们先来说一下全局组件：

const Vue = require('vue')  // 引入Vue
require('./css/style.css')  // 引入全局css
require('./component.js')(Vue)  //组件
require('./index.js')(Vue)  // 首页js

这里我把组件都放在component.js里面了，将js引进来，然后开始写组件：

首先需要先写一个Vue实例：

// 创建top组件实例
let top = new Vue({
  el: '#top',
  data:{

    topshow:false

  }
})

这里data.topshow是控制top组件里的一个点击事件的，这里暂时不说了。

注册组件：

// 注册组件
Vue.component("my-top",{
    template: '<div class="top-bar"><a class="left">![](./app/img/home.png)</a><p>{{page}}</p><a class="right" v-on:click="topFun">![](./app/img/other.png)</a></div>',
    data:function(){

        return data;

    },methods:{
        topFun:function(){
            top.topshow = !top.topshow;
        }
    }
})

my-top的template为组件的显示的页面结构。
data为组件所需的数据，这里的data是一个函数，注意要和Vue实例的data作区分。
methods是定义的组件的方法。

然后在需要用这个组件的地方引入这个组件就可以了：

<div v-cloak id="top" class="top">
    <my-top></my-top>

    <div class="top-cont" v-show = "topshow">
        <ul>
          <li>
            <p>![](./app/img/icon1.png)</p>
            <p>消息</p>
          </li>
          <li>
            <p>![](./app/img/icon2.png)</p>
            <p>航班</p>
          </li>
          <li>
            <p>![](./app/img/icon3.png)</p>
            <p>旅行</p>
          </li>
          <li>
            <p>![](./app/img/icon4.png)</p>
            <p>钱包</p>
          </li>
          <li>
            <p>![](./app/img/icon5.png)</p>
            <p>喜欢</p>
          </li>
          <li>
            <p>![](./app/img/icon6.png)</p>
            <p>酒店</p>
          </li>
        </ul>
    </div>
</div>

这样全局组件就算完成了

-2- 全局组件说完咱再说说局部组件：

局部组件其实大同小异，简单说就是在Vue实例里面注册的组件就是局部组件：

我在首页index.js 里面注册了一个 my-banner组件

module.exports = function(Vue){

require('./css/index.css')

let banner = {
    template:"<div class='banner-box'>![](./app/img/img1.png)</div>"
} 

let v = new Vue({
    el: '#box',
    data: {
      
    },
    components:{
       'my-banner':banner   
    }
})

}

好了，组件说了这么多来看看最终的效果吧？

vue组件

左侧的other按钮我给加了个点击事件，这里就不再多说vue的指令看官方文档吧！

vue官方文档：https://cn.vuejs.org/v2/guide/
阿里巴巴矢量图标库：http://www.iconfont.cn/

项目地址：https://github.com/wangbaogui123/webpack2-vue2/tree/w-v1.02
© 著作权归作者所有
文／奔跑的攻城狮（简书作者）
原文链接：http://www.jianshu.com/p/82e964996238
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

上一篇：http://www.jianshu.com/p/468a69ac2fc4