Vue2 （一）组件定义

心已赠人 2022-06-06 08:58 162阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue: 组件中 template 定义

Vue.component( 　　'button-counter', \{ 　　　　 template: '<button v-on:click="coun

╰半夏微凉°/ 2023年08月17日 17:09/ 0 赞/ 84 阅读

相关 vue2.0自定义分页组件

vue2.0自定义分页组件显示效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a

朴灿烈づ我的快乐病毒、/ 2023年01月12日 11:37/ 0 赞/ 127 阅读

相关 vue2中自定义组件的v-model

工作中经常会涉及到父子组件数据更新和页面相应数据样式改变的问题。通俗点来说，就是涉及到公共组件的可以抽离出来作为子组件，如果父组件中与子组件相关的数据改变，子组件中的数据

痛定思痛。/ 2022年10月18日 12:59/ 0 赞/ 193 阅读

相关 vue自定义组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

客官°小女子只卖身不卖艺/ 2022年09月09日 11:45/ 0 赞/ 254 阅读

相关 vue自定义组件

一、无参组件首先利用VUE-CLI创建一个vue项目（不用vue-cli也行此处只是原来建立好了，方便演示） ![在这里插入图片描述][watermark_

- 日理万妓/ 2022年09月02日 13:00/ 0 赞/ 244 阅读

相关 Vue自定义组件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

港控/mmm°/ 2022年07月12日 14:51/ 0 赞/ 262 阅读

相关 Vue2 （一）组件定义

vue都火了好久了，一直想研究研究。今天终于写了第一个组件 js代码 //右边图片菜单 var imgMenuTemp=Vue.extend({

心已赠人/ 2022年06月06日 08:58/ 0 赞/ 163 阅读

相关自定义vue日历组件

今天给大家介绍一下，如何在vue中实现自定义日历组件，功能类似FullCalendar插件，但是却比较灵活。先给大家看一下组件的效果图，如下所示： ![640_wx_fm

短命女/ 2022年05月27日 03:30/ 0 赞/ 461 阅读

相关 vue 通讯录自定义组件

在线demo：[http://tangyupeng.top/dist/index.html\/phone][http_tangyupeng.top_dist_index.htm

Myth丶恋晨/ 2021年09月16日 13:12/ 0 赞/ 460 阅读

相关 vue 定义组件

在js中定义组件 Vue.component('名称',{ template:'xx', data:function(){

向右看齐/ 2021年07月24日 23:04/ 0 赞/ 398 阅读