首页 > 其他分享 >【vue3入门】-【18】组件组成

【vue3入门】-【18】组件组成

时间:2024-04-25 21:12:23浏览次数:26  
标签:vue 入门 18 mycomponent export vue3 组件

组件组成

组件最大的优势就是可复用性

当使用构建步骤是,我们一般将vue组件定义在一个单独的.vue文件中,这杯叫做单文件组件(简称SFC)

  • 组件组成结构
<!--承载所有的html标签,组件中必须要有的部分-->
<template>
	<div>承载标签</div>
</template>
<!--承载所有的业务逻辑,组件中可选存在的部分-->
<script>
export default{}
</script>
<!--承载所有的样式,组件中可选存在的部分-->
<!--scoped:让当前样式只在当前组件中生效,建议总是在组件中添加,避免全局生效-->
<style scoped>
</style>
  • 组件引用
<template>
  <!--第三步:显示组件-->
  <mycomponent />
</template>
<script>
// 第一步:引入组件
import mycomponent from './components/mycomponent.vue'

export default {
  // 第二步:注入组件
  components: {
    mycomponent
  }
}
</script>
<style></style>

以上内容出自
【【2023最新版】Vue3从入门到精通,零基础小白也能听得懂,写得出,web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9

标签:vue,入门,18,mycomponent,export,vue3,组件
From: https://www.cnblogs.com/T-Ajie/p/18158603

相关文章

  • 【vue3入门】-【17】模版引用
    模版引用虽然Vue的声明性渲染模型抽象了大部分的DOM的直接操作,但在某些情况下,我们仍然需要直接访问底层DOM元素。要实现这一点,我们可以使用特殊的refattribute挂载结束后引用都会被暴露在this.$refs只上,从this.$refs中按照js原生方法获取元素属性或变更元素属性<template>......
  • 【vue3入门】-【19】组件嵌套关系
    组件嵌套关系组件允许我们将UI划分为独立的,可重用的部分,并且可以对每个部分进行单独的思考。在实际应用中,组件常常被阻止成层层嵌套的树状结构这和我们嵌套HTML元素的方式类似,Vue实现了自己的组件模型,使我们可以在每个组件内封装自定义内容和逻辑APP.vue<template><!--主......
  • 【vue3入门】-【5】属性绑定
    属性绑定双大括号不能在htmlattributes中使用。想要响应的绑定一个attribute,应该使用v-bind指令<script>exportdefault{data(){return{msg:"active",myid:"test-id"}}}</script><template><divclass="{{msg}......
  • 【vue3入门】-【6】条件渲染
    条件渲染在vue中,提供了条件渲染,这类似于javascript中的条件语句v-ifv-elsev-else-ifv-showv-if指令用于条件性的渲染一块内容,这块内容只会在指令的表达式返回真值时才会渲染。v-else指令则在前面的if指令都不满足时则执行的指令<template><div>条件渲染</div><......
  • 【vue3入门】-【7】列表渲染
    列表渲染v-for列表渲染可以使用一个v-for指令基于一个数组来渲染一个列表,v-for指令的值需要使用iteminitems形式的特殊语法,其中items是源数据的数组,而item是迭代项的别名,item是可以改名的,和{{}}内的名称保持一致就行,结合div或其他标签使用,可以获取列表内的多个属性值v-fo......
  • 【vue3入门】-【8】事件处理
    事件处理我们可以使用v-on指令(简写为@)来监听DOM事件,并在事件触发时,执行对应的javascript。用法v-on:click="methodName"或者@click="handler"事件处理器的值可以是:内联事件处理器:事件被触发时执行的内联JavaScript语句(与onclick类似)方法事件处理器:一个指向组件上顶一个方法的......
  • 【vue3入门】-【2】文本插值
    文本插值最基本的数据绑定形式是文本插值,它使用的是”Mustache“语法(即双大括号)<script>exportdefault{data(){return{msg:"神奇的语法"}}}//以上为文本插值的固定使用格式</script><template><h3>模版语法</h3><p>{{msg}}</p></templ......
  • 【vue3入门】-【3】使用javascript表达式
    使用javascript表达式每个绑定仅支持单一表达式,也就是一段能够被求值的JavaScript代码。一个简单的判断方法是是否可以合法的写在return后面。<template><h3>模版语法</h3><p>{{msg}}</p><p>{{number+1}}</p><p>{{ok?"yes":"No"}}</......
  • 【vue3入门】-【4】插入html
    原始html双大括号,将会将数据插值为纯文本,而不是html,若想要插入html,则需要使用v-html指令<template><h3>模版语法</h3><p>{{tthtml}}</p><!--会直接将html文本展示出来-->><pv-html="tthtml"></p><!--会在进行渲染后展示出来-->></templa......
  • FLINKCDC 3.0整库同步MYSQL至DORIS(FLINK1.18): 历程
    大数据技术涉及组件较多,各个环境较DEMO又不尽相同,所以参照DEMO进行,任然很多报错信息出现。如下报错处理,尽供参考:1.创建同步配置文件################################################################################Description:SyncMySQLalltablestoDoris#########......