Vue第一篇:组件模板总结
前言
本文希望读者有一定的Vue开发经验,样例采用vue中的单文件组件,也是我的个人笔记,欢迎一起进步
必须有根元素
这是一个最简单的vue单文件组件,<template></template>被称为模板,模板中必须有一个根元素
<template>
<div>
</div>
</template>
<script>
</script>
模板中可以写什么?
1、静态内容(不变的内容称为静态内容)
html元素、vue组件
<template>
<div>
<hello-world></hello-world>
</div>
</template>
备注:组件名使用<hello-world></hello-world>或者<HelloWorld></HelloWorld>均可以
2、插值,也称mustcache语法
![]()
{{}}中写的是JS表达式,如果对JS表达式不理解的话,只需要记住能写在return语句后面的,带有返回值的语句,就是JS表达式
注意:{{}}语法不能用在元素属性上,只能用在元素内容上
模板的当前环境为组件对象(或者Vue对象)所以不用写this了,Vue框架已经帮你处理
<template>
<div>
<hello-world>
{{ baby }}
</hello-world>
</div>
</template>
3、指令
html元素或者组件上,能写一种v-开头的属性,这些属性称为指令,指令中的值也是JS表达式,当前环境也为组件对象或者Vue对象
再次强调,指令中写的也是JS表达式,如果对JS表达式不理解的话,只需要记住能写在return语句后面的,带有返回值的语句,就是JS表达式
指令只能作用在元素的属性、或者组件的属性上,这点要与{{}}区分开!
<template>
<div>
<hello-world @click="fk">
</hello-world>
</div>
</template>
4、特殊属性(Vue框架自己添加的属性)
如key、ref等属性,这些属性都是Vue框架规定好的属性。
<template>
<div>
<hello-world @click="fk" ref="first">
{{ baby }}
</hello-world>
</div>
</template>
总结一下
1、元素(组件)内容用插值语法{{}}
2、元素(组件)属性用指令,v-xxx
3、插值和指令中的值都是JS表达式
4、只需要记住能写在return语句后面的,带有返回值的语句,就是JS表达式
5、本文只介绍单文件组件中的模板基础知识
相关文章:
Vue第一篇:组件模板总结
前言 本文希望读者有一定的Vue开发经验,样例采用vue中的单文件组件,也是我的个人笔记,欢迎一起进步 必须有根元素 这是一个最简单的vue单文件组件,<template></template>被称为模板,模板中必须有一个根元素…...
时钟使能、
时钟使能 如果正确使用,时钟使能能够显著地降低系统功耗,同时对面积或性能的影响极小。但是如果不正确地使用时钟使能, 可能会造成下列后果: • 面积增大 • 密度减小 • 功耗上升 • 性能下降 在许多使用大量控制集的…...
1. Autogen官网教程 (Introduction to AutoGen)
why autogen The whole is greater than the sum of its parts.(整体的功能或价值往往超过单独部分简单相加的总和。) -Aristotle autogen 例子 1. 导入必要的库 首先,导入os库和autogen库中的ConversableAgent类。 import os from autogen import Conversable…...
开源账目和账单
开源竞争: 开源竞争(当你无法彻底掌握技术的时候,你就开源这个技术,让更多的人了解这个技术,形成更多的技术依赖,你会说这不就是在砸罐子吗?一个行业里面总会有人砸罐子,你不如先砸…...
vue2面试题10|[2024-11-24]
问题1:vue设置代理 如果你的前端应用和后端API服务器没有运行在同一个主机上,你需要在开发环境下将API请求代理到API服务器。这个问题可以通过vue.config.js中的devServer.proxy选项来配置。 1.devServer.proxy可以是一个指向开发环境API服务器的字符串&…...
c语言与c++到底有什么区别?
成长路上不孤单😊😊😊😊😊😊 【14后😊///C爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】 今日分享关于c语言与c区别的相关内容! 关…...
云计算-华为HCIA-学习笔记
笔者今年7月底考取了华为云计算方向的HCIE认证,回顾从IA到IE的学习和项目实战,想整合和分享自己的学习历程,欢迎志同道合的朋友们一起讨论! 第二章:服务器基础 服务器是什么? 服务器本质上就是个性能超强的…...
优先算法 —— 双指针系列 - 复写零
目录 1. 复写零 2. 算法原理 一般情况下 改为就地操作:从左到右(错误) 从右到左 总结一下解决方法: 如何找到最后一个复写的数 特殊情况 完整步骤: 3. 代码 1. 复写零 题目链接:1089. 复写零 - 力…...
初识Linux—— 基本指令(下)
前言: 本篇继续来学习Linux的基础指令,继续加油!!! 本篇文章对于图片即内容详解,已同步到本人gitee:Linux学习: Linux学习与知识讲解 Linux指令 1、查看文件内容的指令 cat cat 查看文件…...
esayexcel进行模板下载,数据导入,验证不通过,错误信息标注在excel上进行返回下载
场景:普普通通模板下载,加数据导入,分全量和增量,预计20w数据,每一条数据校验,前后端代码贴上(代码有删改,关键代码都有,好朋友们自己取舍,代码一股脑贴上了&…...
服务器数据恢复—raid5阵列热备盘上线失败导致EXT3文件系统不可用的数据恢复案例
服务器数据恢复环境: 两组分别由4块SAS硬盘组建的raid5阵列,两组阵列划分的LUN组成LVM架构,格式化为EXT3文件系统。 服务器故障: 一组raid5阵列中的一块硬盘离线。热备盘自动上线替换离线硬盘,但在热备盘上线同步数据…...
《Qt Creator:人工智能时代的跨平台开发利器》
《Qt Creator:人工智能时代的跨平台开发利器》 一、Qt Creator 简介(一)功能和优势(二)快捷键与效率提升(三)跨平台支持(四)工具介绍与使用主要特性:使用步骤…...
AG32既可以做MCU,也可以仅当CPLD使用
Question: AHB总线上的所有外设都需要像ADC一样,通过cpld处理之后才能使用? Reply: 不用。 除了ADC外,其他都是 mcu可以直接配置使用的。 Question: DMA和CMP也不用? Reply: DMA不用。 ADC/DAC/CMP 用。 CMP 其实配置好后,可以直…...
51c自动驾驶~合集31
我自己的原文哦~ https://blog.51cto.com/whaosoft/12121357 #大语言模型会成为自动驾驶的灵丹妙药吗 人工智能(AI)在自动驾驶(AD)研究中起着至关重要的作用,推动其向智能化和高效化发展。目前AD技术的发展主要遵循…...
2023年3月GESPC++一级真题解析
一、单选题(每题2分,共30分) 题目123456789101112131415答案BAACBDDAADBCDBC 1.以下不属于计算机输入设备的有( )。 A .键盘 B .音箱 C .鼠标 D .传感器 【答案】 …...
linux NFS
什么是NFS NFS是Network File System的缩写,即网络文件系统。一种使用于分散式 文件协议通过网络让不同的机器、不同的操作系统能够分享个人数据,让应用 程序通过网络可以访问位于服务器磁盘中的数据。NFS在文件传送或信息传送 的过程中,依赖…...
查看浏览器的请求头
爬虫时用到了请求头,虽然可以用网上公开的,但是还是想了解一下本机浏览器的。以 Edge 为例,其余浏览器通用。 打开浏览器任一网页,按F12打开DevTools;或鼠标右键,选择“检查”。首次打开界面应该显示在网页…...
【JavaEE进阶】 JavaScript
本节⽬标 了解什么是JavaScript, 学习JavaScript的常⻅操作, 以及使⽤JQuery完成简单的⻚⾯元素操作. 一. 初识 JavaScript 1.JavaScript 是什么 JavaScript (简称 JS), 是⼀个脚本语⾔, 解释型或即时编译型的编程语⾔. 虽然它是作为开发Web⻚⾯的脚本语⾔⽽出名,…...
后端接受大写参数(亲测能用)
重要点引入包别引用错了 import com.fasterxml.jackson.databind.annotation.JsonSerialize; import com.fasterxml.jackson.annotation.JsonProperty; import lombok.Data;JsonSerialize Data public class Item {JsonProperty(value "Token")private String token…...
Unity ShaderLab --- 实现局部透明
首先准备一张局部透明度的贴图 实现局部透明原理: 采样准备好的贴图,在片元着色中,将返回颜色的a值乘上采样后的a值 代码: fixed4 frag (v2f i) : SV_Target{fixed4 col i.color;col.a * tex2D(_MainTex, i.texcoord).a;return…...
JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...
NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面,避免重复抓取,以节省资源和时间。 在分布式环境下,增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路:将增量判…...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣(LeetCode) 思路 右视图是指从树的右侧看,对于每一层,只能看到该层最右边的节点。实现思路是: 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...
JS设计模式(4):观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中,我们经常会遇到这样的场景:一个对象的状态变化需要自动通知其他对象,比如: 电商平台中,商品库存变化时需要通知所有订阅该商品的用户;新闻网站中࿰…...
iview框架主题色的应用
1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题,无需引入,直接可…...
