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

二、Vue组件化编程

2、Vue组件化编程

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.1 非单文件组件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<div id="root"><school></school><hr><student></student>
</div>
<script type="text/javascript">//创建 school 组件const school = Vue.extend({template: `<div><h2>学校名称:{{ name }}</h2><h2>学校地址:{{ address }}</h2></div>`,data() {return {name: '学校',address: '河南'}}})//创建 student 组件const student = Vue.extend({template: `<div><h2>学生姓名:{{ name }}</h2><h2>学生年龄:{{ age }}</h2></div>`,data() {return {name: '张三',age: '18'}}})const vm = new Vue({el: "#root",//注册组件components: {school: school,student: student}})
</script>
  • Vue中使用组件的三大步骤:
    • 定义组件(创建组件)
    • 注册组件
    • 使用组件(写组件标签)
  • 如何定义一个组件?
    • 使用Vue.extend(options)创建,其中optionsnew Vue(options)时传入的那个options几乎一样,但也有点区别;
      • 区别如下:
        • el不要写,为什么? ——— 最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。
        • data必须写成函数,为什么? ———— 避免组件被复用时,数据存在引用关系。
      • 使用template可以配置组件结构。
  • 如何注册组件?
    • 局部注册:靠new Vue的时候传入components选项
    • 全局注册:靠Vue.component(‘组件名’,组件)
  • 编写组件标签:
    • <school></school>

2.1.1 组件的注意点

几个注意点:1.关于组件名:一个单词组成:第一种写法(首字母小写):school第二种写法(首字母大写):School多个单词组成:第一种写法(kebab-case命名):my-school第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)备注:(1).组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行。(2).可以使用name配置项指定组件在开发者工具中呈现的名字。2.关于组件标签:第一种写法:<school></school>第二种写法:<school/>备注:不用使用脚手架时,<school/>会导致后续组件不能渲染。3.一个简写方式:const school = Vue.extend(options) 可简写为:const school = options

2.2 组件的嵌套

<div id="root"></div>
<script type="text/javascript">//定义一个student组件const student = Vue.extend({template: `<div><h2>学生名字:{{ name }}</h2><h2>学生年龄:{{ age }}</h2></div>`,data() {return {name: '败落',age: 18}}})//定义一个school组件const school = Vue.extend({template: `<div><h2>学校名称:{{ name }}</h2><h2>学校地址:{{ address }}</h2><student></student></div>`,data() {return {name: '学校',address: '河南'}},components: {student: student}})//定义一个hello组件const hello = Vue.extend({template: `<h2>{{ msg }}</h2>`,data() {return {msg: '欢迎来学Vue'}}})//定义一个app组件const app=Vue.extend({template:`<div><hello></hello><school></school></div>`,components:{hello:hello,school:school}})const vm = new Vue({template:`<app></app>`,el: "#root",components: {app:app}})
</script>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.3 VueComonent

  • 关于VueComponent

    • school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。

    • 我们只需要写<school/><school></school>Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)

      特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!!

    • 关于this指向:

      • 组件配置中:
        • data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
      • new Vue(options)配置中:
        • data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
      • VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)。
      • Vue的实例对象,以后简称vm
<div id="root"><school></school><hello></hello>
</div>
</body><script type="text/javascript">Vue.config.productionTip = false//定义school组件const school = Vue.extend({name:'school',template:`<div><h2>学校名称:{{name}}</h2><h2>学校地址:{{address}}</h2><button @click="showName">点我提示学校名</button></div>`,data(){return {name:'学校',address:'北京'}},methods: {showName(){console.log('showName',this)}},})const test = Vue.extend({template:`<span>atguigu</span>`})//定义hello组件const hello = Vue.extend({template:`<div><h2>{{msg}}</h2><test></test></div>`,data(){return {msg:'你好啊!'}},components:{test}})// console.log('@',school)// console.log('#',hello)//创建vmconst vm = new Vue({el:'#root',components:{school,hello}})
</script>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

相关文章:

二、Vue组件化编程

2、Vue组件化编程 2.1 非单文件组件 <div id"root"><school></school><hr><student></student> </div> <script type"text/javascript">//创建 school 组件const school Vue.extend({template: <div&…...

JVM跨代引用垃圾回收

1. 跨代引用概述 在Java堆内存中&#xff0c;年轻代和老年代之间存在的对象相互引用&#xff0c;假设现在要进行一次新生代的YGC&#xff0c;但新生代中的对象可能被老年代所引用的&#xff0c;为了找到新生代中的存活对象&#xff0c;不得不遍历整个老年代。这样明显效率很低…...

AI:135-基于卷积神经网络的艺术品瑕疵检测与修复

🚀点击这里跳转到本专栏,可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航! 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带关键代码,详细讲解供大家学习,希望…...

C++标准头文件汇总及功能说明

文章目录 algorithmbitsetcctypecerrnoclocalecmathcstdioctimedequeiostreamexceptionfstreamfunctionallimitslistmapiosiosfwdsetsstreamstackstdexceptstreambufcstringutilityvectorcwcharcwctype algorithm algorithm头文件是C的标准算法库&#xff0c;它主要用在容器上。…...

glTF 添加数据属性(extras)

使用3D 模型作为可视化界面的一个关键是要能够在3D模型中添加额外的数据属性&#xff0c;利用这些数据属性能够与后台的信息模型建立对应关系&#xff0c;例如后台信息模型是opcua 信息模型的话&#xff0c;在3D模型中要能够包含OPC UA 的NodeId&#xff0c;BrowserName 等基本…...

linux系统消息中间件rabbitmq普通集群的部署

rabbitmq普通集群的部署 普通集群准备环境查询版本对应安装rabbitmq软件启动创建登录用户开启用户远程登录查看端口 部署集群创建数据存放目录和日志存放目录:拷⻉erlang.cookie将其他两台服务器作为节点加⼊节点集群中查看集群状态创建新的队列 普通集群准备环境 配置hosts⽂件…...

TextCNN:文本分类卷积神经网络

模型原理 1、前言2、模型结构3、示例3.1、词向量层3.2、卷积层3.3、最大池化层3.4、Fully Connected层 4、总结 1、前言 TextCNN 来源于《Convolutional Neural Networks for Sentence Classification》发表于2014年&#xff0c;是一个经典的模型&#xff0c;Yoon Kim将卷积神…...

欧几里得和《几何原本》

欧几里得和《几何原本》 欧几里得&#xff08;Euclid&#xff09;&#xff0c;公元前约300年生于古希腊&#xff0c;被认为是几何学的奠基人之一。他的主要成就是编写了一本名为《几何原本》&#xff08;Elements&#xff09;的著作&#xff0c;这本书成为了几何学的经典教材&a…...

linux c++ 开发 tensorrt 安装

tensorrt 官方下载地址&#xff08;需要注册账号登录&#xff09;&#xff1a;Log in | NVIDIA Developer 根据系统发行版和CUDA版本 (nvcc -V) 选择合适的安装包 EA&#xff08;early access&#xff09;版本代表抢先体验。 GA&#xff08;general availability&#xff09;代…...

Redis高并发分布锁实战

Redis高并发分布锁实战 问题场景 场景一: 没有捕获异常 // 仅仅加锁 // 读取 stock15 Boolean ret stringRedisTemplate.opsForValue().setIfAbsent("lock_key", "1"); // jedis.setnx(k,v) // TODO 业务代码 stock-- stringRedisTemplate.delete(&quo…...

Kotlin基础——DSL

DSL&#xff08;领域特定语言&#xff09; 常见的DSL就是SQL和正则表达式&#xff0c;用于操作数据库和文本字符串&#xff0c;Kotlin DSL通常为嵌套的Lambda表达式或链式方法&#xff0c;如 https://github.com/gradle/gradle-script-kotlin 用于构建Gradle脚本https://gith…...

《Docker 简易速速上手小册》第4章 Docker 容器管理(2024 最新版)

文章目录 4.1 容器生命周期管理4.1.1 重点基础知识4.1.2 重点案例&#xff1a;启动并管理 Python Flask 应用容器4.1.3 拓展案例 1&#xff1a;调试运行中的容器4.1.4 拓展案例 2&#xff1a;优雅地停止和清理容器 4.2 容器数据管理与持久化4.2.1 重点基础知识4.2.2 重点案例&a…...

【人脸朝向识别与分类预测】基于PNN神经网络

课题名称&#xff1a;基于PNN神经网络的人脸朝向识别分类 版本日期&#xff1a;2024-02-20 运行方式&#xff1a;直接运行PNN0503.m文件 代码获取方式&#xff1a;私信博主或 QQ:491052175 模型描述&#xff1a; 采集到一组人脸朝向不同角度时的图像&#xff0c;图像来自不…...

【Python笔记-设计模式】组合模式

一、说明 组合模式是一种结构型设计模式&#xff0c; 你可以使用它将对象组合成树状结构&#xff0c; 并且能像使用独立对象一样使用它们。 (一) 解决问题 处理树形结构&#xff1a;可以很好地处理树形结构的数据&#xff0c;使得用户可以统一对待单个对象和对象组合。统一接…...

51单片机学习(5)-----蜂鸣器的介绍与使用

前言&#xff1a;感谢您的关注哦&#xff0c;我会持续更新编程相关知识&#xff0c;愿您在这里有所收获。如果有任何问题&#xff0c;欢迎沟通交流&#xff01;期待与您在学习编程的道路上共同进步。 目录 一. 蜂鸣器的介绍 1.蜂鸣器介绍 2.压电式蜂鸣器 &#xff08;无源…...

-bash: /root/.ssh/authorized_keys: Read-only file system

问题背景 由于跳板机不支持 ssh-copy-id 命令&#xff0c;为了配置免密登录&#xff0c;考虑在服务器上手动使用 cat 命令写入跳板机公钥 cat <<EOL >> ~/.ssh/authorized_keys [Your public key] EOL但却出现了以下错误 -bash: /root/.ssh/authorized_keys: Re…...

3,设备无关位图显示

建立了一个类Dib Dib.h #pragma once #include “afx.h” class CDib :public CObject { public: CDib(); ~CDib(); char* GetFileName(); BOOL IsValid(); DWORD GetSize(); UINT GetWidth(); UINT GetHeight(); UINT GetNumberOfColors(); RGBQUAD* GetRGB(); BYTE* GetDat…...

转前端了!!

大家好&#xff0c;我是冰河~~ 没错&#xff0c;为了更好的设计和开发分布式IM即时通讯系统&#xff0c;也为了让大家能够直观的体验到分布式IM即时通讯系统的功能&#xff0c;冰河开始转战前端了。也就是说&#xff0c;整个项目从需求立项到产品设计&#xff0c;从架构设计到…...

RESTful API如何使用它构建 web 应用程序。

链接&#xff1a;华为机考原题 RESTful API(Representational State Transfer)是一种基于网络的软件架构风格&#xff0c;用于设计和访问网络资源。它是一种轻量级、灵活、可扩展的架构&#xff0c;常用于构建Web应用程序和服务。 使用RESTful API构建Web应用程序的步骤如下&…...

现在学Oracle是49年入国军么?

今天周末&#xff0c;不聊技术&#xff0c;聊聊大家说的最多的一个话题 先说明一下&#xff0c;防止挨喷&#x1f606; 本人并不是职业dba&#xff0c;对数据库就是爱好&#xff0c;偶尔兼职&#xff0c;以下仅个人观点分析&#xff0c;如有不同观点请轻喷&#xff0c;哈哈&…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...