当前位置:首页 » 《随便一记》 » 正文

Vue组件化_WHERE 1=2

10 人参与  2022年05月13日 17:23  分类 : 《随便一记》  评论

点击全文阅读


Vue组件化

面向组件编程

把一个页面按照模块拆分成N个小块

注意:演示环境为 Vue脚手架搭建的项目上进行演示

创建局部组件

语法格式:

Vue.component('my-component-name',{
// ...options...
})

例子:

注册一个组件 组件名为my-component-name

组件内容为<h3>第一个局部组件</h3>

image-20211114090936532

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <!-- 使用局部组件 -->
    <my-component-name/>
  </div>
</template>

<script>
// 引入Vue
import Vue from 'vue'

// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
// 创建局部组件
Vue.component('my-component-name', {
  template: '<h3>第一个局部组件</h3>'
})
export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

image-20211114090921487

创建全局组件

  • 新建组件vue文件(在里演示为在原有的组件上进行修改)

组件的基本结构

image-20211114091835097

image-20211114092159110

<template>
  <div class="hello">
    <h1>第一个全局组件</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

  • 导入该组件

    image-20211114092525439

    import HelloWorld from '@/components/HelloWorld.vue'

    @表示src目录

  • 注册该组件

image-20211114092645083

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
  • 使用该组件

image-20211114092831474

进行复用

直接使用标签即可

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld/>
    <HelloWorld/>
    <HelloWorld/>
    <!-- 使用局部组件 -->
    <my-component-name/>
  </div>
</template>

<script>
// 引入Vue
import Vue from 'vue'

// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
// 创建局部组件
Vue.component('my-component-name', {
  template: '<h3>第一个局部组件</h3>'
})
export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

效果:

image-20211114093520531

注意事项:

data必须是一个函数

image-20211114093911860

<template>
  <div class="hello">
    <h1>第一个全局组件</h1>
    <ul>
      <li>{{ name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      'name': '组件'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

运行效果:

image-20211114094010763

创建组件可以理解为自定义了有一个html标签

拆分组件的目的是为了复用


点击全文阅读


本文链接:http://zhangshiyu.com/post/40087.html

组件  局部  第一个  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 凛月栖春山完结(关凛月程衍)全书免费_(关凛月程衍)凛月栖春山完结后续(关凛月程衍)
  • 放弃救赎师尊后,看他尸骨无存我笑了精彩章节试读_「师尊林云玉骨琴」全章节免费阅读
  • 春到南楼雪尽处(傅庭州苏枝夏)全书免费_(傅庭州苏枝夏)春到南楼雪尽处后续(傅庭州苏枝夏)
  • 完结文常梨厉晏舟列表_完结文常梨厉晏舟
  • 重返1977:从成为***状元开始剧情悬念章节分段解锁_「高远李健群」完结版全文
  • (番外)+(全书)君心如竹,此生荒芜结局+番外(沈南音贺方竹)完结_(沈南音贺方竹)列表_笔趣阁(君心如竹,此生荒芜结局+番外)
  • 剜月寄无书结局+番外(姜若凝楚淮舟)_(剜月寄无书结局+番外)列表_笔趣阁(姜若凝楚淮舟)
  • 剜月寄无书免费赏析(姜若凝楚淮舟)_剜月寄无书免费赏析姜若凝楚淮舟
  • (番外)+(全书)(瀛洲晚晚)_反派暴君难攻略全书+后续列表_笔趣阁(瀛洲晚晚)(瀛洲晚晚)完结_(瀛洲晚晚)列表_笔趣阁(反派暴君难攻略全书+后续)
  • 江宁夏寻寒彦(江宁夏寻寒彦+结局+番外)_(江宁夏寻寒彦)列表_笔趣阁(江宁夏寻寒彦+结局+番外)
  • 「老婆拿着她妈救命钱和初恋泡温泉」全章节免费阅读_赵琳阿泽陈泽情感冲突名场面试读章
  • [婚书难寄,无岸之秋]限时免费章节抢先看_顾向阳陈西颜枝全集阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1