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>`
})()