Vue2 （一）组件定义

vue都火了好久了，一直想研究研究。今天终于写了第一个组件

js代码

//右边图片菜单
var imgMenuTemp=Vue.extend({
    data(){

    },
    methods:{
        //点击菜单子项 切换相应的界面展示。
        changeSpace:(event)=>{
            var el=event.target;
            if(AssertUtils.isNotEmpty(el.id)){

            }
        }
    },
    template:(()=>{
        let menuItems=[{name:'个人空间',id:'personSpace'},{name:'单位空间',id:'orgSpace'},{name:'集团空间',id:'jtSpace'}];let menus=[];
        //循环数组来构建菜单
        menuItems.forEach(function({id,name},index){
            let activeCss=index==0?"active":"";
            menus.push(`<div class="menuLi  ${activeCss}" ><div class="content" id="${id}">${name}</div></div>`);
        })
        let menuContent=menus.join("\n");
        return `<div class="spaceMenu" @click="changeSpace">${menuContent}</div>`
    })()
});

//vue 主函数
var vueObj=new Vue({
    el:"#mainPage",
    components:{
        'imgmenu': imgMenuTemp
    }
})

html代码：

   <div class="rightCell">
            <imgmenu></imgmenu>
            </div>

注意事项：

• 定义的标签明不能用驼峰命名imgmenu。【刚开始我定义imgMenu则通过不了】
• template直接用this.变量名，是获取不到data中数据。

 template:(()=>{
        let menuItems=[{name:'个人空间',id:'personSpace'},{name:'单位空间',id:'orgSpace'},{name:'集团空间',id:'jtSpace'}];let menus=[];
        //循环数组来构建菜单
        menuItems.forEach(function({id,name},index){
            let activeCss=index==0?"active":"";
            menus.push(`<div class="menuLi  ${activeCss}" ><div class="content" id="${id}">${name}</div></div>`);
        })
        let menuContent=menus.join("\n");
        return `<div class="spaceMenu" @click="changeSpace">${menuContent}</div>`
    })()