vue组件
文章目录
- 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组件…...
让mybatis-plus支持null字段全量更新
文章目录背景方案一使用方案二方案二原理介绍背景 如果仅仅只是标题所列的目标,那么mybatis-plus 中可以通过设置 mybatis-plus.global-config.db-config.field-strategyignored 来忽略null判断,达到实体字段为null时也可以更新数据为null 但是一旦使用…...
MASA Stack 1.0 发布会讲稿——生态篇
2022年运营回顾 贡献者 首先感谢贡献者们为MASA Stack社区所作的积极贡献,这些贡献者给我们提出了很多宝贵的建议,更是积极的提交PR帮助我们一起让产品更健壮,更完善,还在各种场合推广我们的解决方案,非常给力&#x…...
华为OD机试 - 火星文计算2(JS)| 真题+思路++考点+代码
火星文计算2 题目 已知火星人使用的运算符号为#;$ 其与地球人的等价公式如下 x#y4*x3*y2 x$y2*xy3 x y是无符号整数 地球人公式按照c语言规则进行计算 火星人公式中#符优先级高于$ 相同的运算符按从左到右的顺序运算 输入 火星人字符串表达式结尾不带回车换行 输入的字符串…...
从春节后央行的首批罚单,看金融反欺诈反洗钱的复杂性
目录 个人信息保护的问题 征信管理的问题 反洗钱与反欺诈的问题 金融欺诈愈加复杂多变 金融机构如何增强反欺诈反洗钱 春节后,央行公示首批罚单。其中,厦门银行被中国人民银行福州中心支行给予警告,并没收违法所得767.17元,处…...
【Hello Linux】Linux工具介绍 (yum vim)
作者:小萌新 专栏:Linux 作者简介:大二学生 希望能和大家一起进步! 本篇博客简介:介绍Linux的常用工具 yum和vim Linux工具介绍Linux中的软件管理工具 -- yum在windows下安装软件的方式在Linux下安装软件的方式认识yum…...
多种充电模式_手持无线充气泵方案
一、手持无线充气泵手持无线充气泵是一个通过锂电池供电达到无需插电就能使用的便携式充气泵,它的适用场景大部分是为身处户外没有办法接通电源的人而设计的,方便人们的出行也可解燃眉之急。不仅如此,为预防手持无线充气泵的锂电池电量用完而…...
【网络基础】DNS是什么
本文不会直接引入复杂枯燥概念,用形象例子通俗讲解,旨在入门理解。 DNS作用 DNS是用来做域名解析的。 相当于把网址翻译成实际ip地址,供其他设备访问。 一个例子 有一个网站的服务器IP地址为1.1.1.1,用电脑访问该网站的话只需…...
二叉树的性质与推导及常见习题整理
目录 一、性质推导 二、常见的二叉树性质习题 1. 某二叉树共有 399 个结点,其中有 199 个度为 2 的结点,则该二叉树中的叶子结点数为()。 2.在具有 2n 个结点的完全二叉树中,叶子结点个数为(ÿ…...
亚马逊卖家测评补单的重要性和缺点
对于亚马逊、沃尔玛、ebay、wish、newegg、速卖通、阿里国际站、shopee、lazada、temu、乐天、toktok、joom、ozon等卖家来说,测评补单是一个比较常见的话题,因为测评可以给自己产品留下优质的评价,让国外真实买家更加明确,便捷的…...
Java类和对象超详细整理,适合新手入门
目录 一、驼峰命名法 二、Java注释 三、转义符 四、Java程序它的基本结构是什么? 五、Java中的类 六、创建类 七、定义main方法 八、执行代码输出语句 九、Java中的对象 十、创建对象 十一、类与对象的关系 一、驼峰命名法 包名:多单词组成所…...
MySQL:连explain的type类型都没搞清楚,怎敢说精通SQL优化?
我们在使用SQL语句查询表数据时,提前用explain进行语句分析是一个非常好的习惯。通过explain输出sql的详细执行信息,就可以针对性的进行sql优化。 今天我们来分析一下,在explain中11种不同type代表的含义以及其应用场景。 1,sys…...
6.11 极分解
文章目录计算方法代码实现计算方法 一个复数可以写成极坐标形式:zreiθzre^{i\theta}zreiθ.这种分解,左边代表长度,右边代表角度。由此为灵感来源,前人对矩阵也有类似的分解。就是猜想一个线性变换对矩阵的作用,是不是可以分解为…...
Spring、SpringMVC、Shiro、Maven
一、SpringSpring是一个为了解决企业应用程序开发复杂性而创建的开源框架,其核心是IOC–控制反转、AOP–面向切面编程。框架的主要优势之一就是其分层架构(WEB层(springMvc)、业务层(Ioc)、持久层ÿ…...
element-plus 使用笔记
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 …...
《蓝桥杯每日一题》 前缀和·Acwing 3956. 截断数组
1.题目https://www.acwing.com/problem/content/3959/给定一个长度为 n 的数组a1,a2,…,an。现在,要将该数组从中间截断,得到三个非空子数组。要求,三个子数组内各元素之和都相等。请问,共有多少种不同的截断方法?输入…...
促进关键软件高层次人才培养:平凯星辰与华东师范大学签订联合博士培养合作协议
2022 年年初,平凯星辰入选首批工信部教育部支持联合培养国家关键软件高层次人才计划。该计划旨在探索关键软件产教融合育人模式,超常规加快培养一批急需高层次人才,以及探索关键软件联合技术攻关新模式。2022 年年底,在该计划下 平…...
Java程序员的日常——经验贴
关于文件的解压和压缩 如果你的系统不支持tar -z命令 前往讨论 如果是古老的Unix系统,可能并不认识tar -z命令,因此如果你想要压缩或者解压tar.gz的文件,就需要使用gzip或者gunzip以及tar命令了。 关于tar.gz可以这么理解,tar结…...
电商API社区,商品数据,关键词搜索等
1. 需要做的事情 l 商品详情页实现 1、商品查询服务事项 2、商品详情展示 3、添加缓存 2. 实现商品详情页功能 2.1. 功能分析 1、Taotao-portal接收页面请求,接收到商品id。 2、调用taotao-rest提供的商品详情的服务,把商品id作为参数传递给服务。接…...
LEADTOOLS 22.0.6 UPDATE-Crack
OCR SDK 库 许多 OCR 增强功能 LEAD 行业领先的人工智能 OCR SDK 在以下方面获得了显着的识别优化:斜体、大写和小写字母、文本行组装和单词构建、列检测、基线检测和文本行分割。 LEADTOOLS为.NET 6、. NET Framework、Xamarin、UWP、C#、VB、C/C、Java、Objective…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作: 1)、切换集群 2)、切换节点 3)、切换到 apparmor 的目录 4)、执行 apparmor 策略模块 5)、修改 pod 文件 6)、…...
React Native 导航系统实战(React Navigation)
导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...
Cesium1.95中高性能加载1500个点
一、基本方式: 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
visual studio 2022更改主题为深色
visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中,选择 环境 -> 常规 ,将其中的颜色主题改成深色 点击确定,更改完成...
FastAPI 教程:从入门到实践
FastAPI 是一个现代、快速(高性能)的 Web 框架,用于构建 API,支持 Python 3.6。它基于标准 Python 类型提示,易于学习且功能强大。以下是一个完整的 FastAPI 入门教程,涵盖从环境搭建到创建并运行一个简单的…...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域,高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表,以及基于它们实现的 Reactor 模式,为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果
今天再学项目的过程中遇到使用gitflow模式管理代码,因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存,无论是github还是gittee,都是一种基于git去保存代码的形式,这样保存代码…...
