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

Vue组件化_WHERE 1=2

21 人参与  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://m.zhangshiyu.com/post/40087.html

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

  • 评论(0)
  • 赞助本站

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

最新文章

  • (番外)+(全书)此去经年人未还全书+番外+后续免费下载_(沈青禾霍沉洲)此去经年人未还全书+番外+后续列表_笔趣阁(沈青禾霍沉洲)
  • 完结文毁容的姐姐和瞎眼的我离开后,姜家两兄弟悔哭了+后续列表_完结文毁容的姐姐和瞎眼的我离开后,姜家两兄弟悔哭了+后续(林梦婉)
  • 妻子辱我爸受贿自杀,我掏出一等军功章节选推荐_[陈素云辰朋友]小说精彩章节分享
  • 全书浏览苔藓爬满旧日诺言新上(顾砚廷慕晚夏)_苔藓爬满旧日诺言新上(顾砚廷慕晚夏)全书结局
  • 顾尘傅雅宁(神女老婆,却在背地承欢作乐+后续+结局)结局_(顾尘傅雅宁神女老婆,却在背地承欢作乐+后续+结局全书结局)结局列表_笔趣阁(顾尘傅雅宁)
  • 「老婆怀上助理的孩子后,助理要求我净身出户」章节限时抢先看‌_「黄秋雅秋雅姐刘嘉铭」后续完结版
  • 此去经年人未还,沈青禾霍沉洲_此去经年人未还,沈青禾霍沉洲
  • 我爸娶了九十九个媳妇都死了,这次准备娶我的女同学小说精彩章节免费试读_[小梅娶媳妇孤儿]全文免费在线阅读
  • 此去经年人未还结局+番外文章简述(沈青禾霍沉洲)列表_此去经年人未还结局+番外文章简述
  • 完结文寻你寻不到归期结局+完结列表_完结文寻你寻不到归期结局+完结(姜昭意盛西)
  • 江以蓁的潮起时问归期高分佳作江以蓁秦司礼全书在线
  • 「亲手逼死儿子后,男人悔不当初」后续全文免费阅读_[傅司衍轩轩佳佳]最新章节免费阅读

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

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