vue学习：webpack+vue（组件学习）

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: '
![](./app/img/home.png)
{{page}}
![](./app/img/other.png)
',
    data:function(){

        return data;

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

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

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

    

    

        

          

            
![](./app/img/icon1.png)
            
消息
          
          

            
![](./app/img/icon2.png)
            
航班
          
          

            
![](./app/img/icon3.png)
            
旅行
          
          

            
![](./app/img/icon4.png)
            
钱包
          
          

            
![](./app/img/icon5.png)
            
喜欢
          
          

            
![](./app/img/icon6.png)
            
酒店
          
        
    

这样全局组件就算完成了

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

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

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

module.exports = function(Vue){

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

let banner = {
    template:"
![](./app/img/img1.png)
"
} 

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