当前位置：首页 > news >正文

vue组件

news 2025/12/14 13:46:48

文章目录

- - 1.vue组件
  - 2.非单文件组件
  - - - 2.1组件创建
      - 2.2祖册组件
      - 2.3使用组件
  - 3.组件的嵌套
  - - - 3.1 school组件嵌套student
      - 3.2 app组件嵌套school和hellozujain
      - 3.3 vm里面引入app组件
  - 4.VueCompent
  - 5.单文件组件

1.vue组件

组件是实现应用中功能的局部代码和资源的集合

在这里插入图片描述

2.非单文件组件

2.1组件创建

注意：template要用div大盒子包裹

 // 创建组件const school = Vue.extend({template: `<div><h1>{{schoolname}}</h1><h2>{{adress}}</h2></div>`,data() {return {schoolname: "新理工",adress: "阿克苏",};},});

2.2祖册组件

//   全局注册组件Vue.component("school", school);new Vue({el: "#app",// 引入组件(局部)components: {school: school,},});

2.3使用组件

  <div id="app"><school></school></div>

3.组件的嵌套

在vue中vm的组件有app管理，在app组件内部引入定义的school和student组件

3.1 school组件嵌套student

 // 创建组件const school = Vue.extend({template: `<div><h1>{{schoolname}}</h1><h2>{{adress}}</h2><student></student></div>`,data() {return {schoolname: "新理工",adress: "阿克苏",};},// 祖册组件components: {student,},});

3.2 app组件嵌套school和hellozujain

 //创建app管理vm的组件const app = Vue.extend({// 使用template: `<div><school></school><hello></hello></div>`,// 祖册组件components: {school,hello,},});

3.3 vm里面引入app组件

 new Vue({el: "#app",template: ` <app></app>`,// 引入组件components: {app,},});

在vm里面通过引入app组件，
其中app组件是整个页面里引入组件的管理者。

4.VueCompent

1.在组件配置中，data函数，methods函数等，他们的this均是vuecompent实例对象。
2.在new data的配置中，，data函数，methods函数等，他们的this均是vue的实例对象。
3.每次调用组件返回的都是一个新的VueCompent实例对象。

在这里插入图片描述

5.单文件组件

school组件

<template><div><h1 class="demo">{{schoolname}}</h1><h2>{{adress}}</h2></div>
</template><script>export default {name:'School',data() {return {schoolname: "新理工",adress: "阿克苏",};},}//   默认暴露//   export default school
</script><style lang="scss">.demo{background-color: green;}
</style>

App组件

<template> <div><School></School><Student></Student></div>
</template><script>
import School from './School.vue'
import Student from './Student.vue'
export default {components: { School },name:'App',comments:{School,Student}
}
</script><style></style>

main.js

import App from './App.Vue'new Vue({el:"#app",template:`<App></App>`,comments:{App}
})

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script><script src="./main.js"></script></body>
</html>

vue组件

文章目录1.vue组件2.非单文件组件2.1组件创建2.2祖册组件2.3使用组件3.组件的嵌套3.1 school组件嵌套student3.2 app组件嵌套school和hellozujain3.3 vm里面引入app组件4.VueCompent5.单文件组件1.vue组件组件是实现应用中功能的局部代码和资源的集合 2.非单文件组件 2.1组件…...

编程日记 2023/5/27 15:10:52

让mybatis-plus支持null字段全量更新

文章目录背景方案一使用方案二方案二原理介绍背景如果仅仅只是标题所列的目标，那么mybatis-plus 中可以通过设置 mybatis-plus.global-config.db-config.field-strategyignored 来忽略null判断，达到实体字段为null时也可以更新数据为null 但是一旦使用…...

编程日记 2023/5/30 11:16:15

MASA Stack 1.0 发布会讲稿——生态篇

2022年运营回顾贡献者首先感谢贡献者们为MASA Stack社区所作的积极贡献，这些贡献者给我们提出了很多宝贵的建议，更是积极的提交PR帮助我们一起让产品更健壮，更完善，还在各种场合推广我们的解决方案，非常给力&#x…...

编程日记 2023/5/27 15:12:34

华为OD机试 - 火星文计算2（JS）| 真题+思路++考点+代码

火星文计算2 题目已知火星人使用的运算符号为#;$ 其与地球人的等价公式如下 x#y4*x3*y2 x$y2*xy3 x y是无符号整数地球人公式按照c语言规则进行计算火星人公式中#符优先级高于$ 相同的运算符按从左到右的顺序运算输入火星人字符串表达式结尾不带回车换行输入的字符串…...

编程日记 2023/5/13 23:01:07

从春节后央行的首批罚单，看金融反欺诈反洗钱的复杂性

目录个人信息保护的问题征信管理的问题反洗钱与反欺诈的问题金融欺诈愈加复杂多变金融机构如何增强反欺诈反洗钱春节后，央行公示首批罚单。其中，厦门银行被中国人民银行福州中心支行给予警告，并没收违法所得767.17元，处…...

编程日记 2023/5/30 11:17:39

【Hello Linux】Linux工具介绍（yum vim）

作者：小萌新专栏：Linux 作者简介：大二学生希望能和大家一起进步！ 本篇博客简介：介绍Linux的常用工具 yum和vim Linux工具介绍Linux中的软件管理工具 -- yum在windows下安装软件的方式在Linux下安装软件的方式认识yum…...

编程日记 2023/5/24 22:07:25

多种充电模式_手持无线充气泵方案

一、手持无线充气泵手持无线充气泵是一个通过锂电池供电达到无需插电就能使用的便携式充气泵，它的适用场景大部分是为身处户外没有办法接通电源的人而设计的，方便人们的出行也可解燃眉之急。不仅如此，为预防手持无线充气泵的锂电池电量用完而…...

编程日记 2023/5/17 11:16:33

【网络基础】DNS是什么

本文不会直接引入复杂枯燥概念，用形象例子通俗讲解，旨在入门理解。 DNS作用 DNS是用来做域名解析的。相当于把网址翻译成实际ip地址，供其他设备访问。一个例子有一个网站的服务器IP地址为1.1.1.1，用电脑访问该网站的话只需…...

编程日记 2023/5/12 20:35:46

二叉树的性质与推导及常见习题整理

目录一、性质推导二、常见的二叉树性质习题 1. 某二叉树共有 399 个结点，其中有 199 个度为 2 的结点，则该二叉树中的叶子结点数为（）。 2.在具有 2n 个结点的完全二叉树中，叶子结点个数为（&#xff…...

编程日记 2023/5/13 23:02:31

亚马逊卖家测评补单的重要性和缺点

对于亚马逊、沃尔玛、ebay、wish、newegg、速卖通、阿里国际站、shopee、lazada、temu、乐天、toktok、joom、ozon等卖家来说，测评补单是一个比较常见的话题，因为测评可以给自己产品留下优质的评价，让国外真实买家更加明确，便捷的…...

编程日记 2023/5/17 23:17:47

Java类和对象超详细整理，适合新手入门

目录一、驼峰命名法二、Java注释三、转义符四、Java程序它的基本结构是什么？ 五、Java中的类六、创建类七、定义main方法八、执行代码输出语句九、Java中的对象十、创建对象十一、类与对象的关系一、驼峰命名法包名：多单词组成所…...

编程日记 2023/5/28 1:21:56

MySQL：连explain的type类型都没搞清楚，怎敢说精通SQL优化？

我们在使用SQL语句查询表数据时，提前用explain进行语句分析是一个非常好的习惯。通过explain输出sql的详细执行信息，就可以针对性的进行sql优化。今天我们来分析一下，在explain中11种不同type代表的含义以及其应用场景。 1，sys…...

编程日记 2023/5/27 15:13:12

6.11 极分解

文章目录计算方法代码实现计算方法一个复数可以写成极坐标形式:zreiθzre^{i\theta}zreiθ.这种分解，左边代表长度，右边代表角度。由此为灵感来源，前人对矩阵也有类似的分解。就是猜想一个线性变换对矩阵的作用，是不是可以分解为…...

编程日记 2023/5/17 11:17:42

Spring、SpringMVC、Shiro、Maven

一、SpringSpring是一个为了解决企业应用程序开发复杂性而创建的开源框架，其核心是IOC–控制反转、AOP–面向切面编程。框架的主要优势之一就是其分层架构（WEB层（springMvc）、业务层（Ioc）、持久层&#xff…...

编程日记 2023/5/12 9:45:42

npm install element-plus --save自动导入 npm install -D unplugin-vue-components unplugin-auto-import// vite.config.jsimport AutoImport from unplugin-auto-import/vite import Components from unplugin-vue-components/vite import { ElementPlusResolver } from …...

编程日记 2023/5/27 15:15:17