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…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案: 语义化标签: <header>:页头<nav>:导航<main>:主要内容<article>&#x…...
Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
探索Selenium:自动化测试的神奇钥匙
目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...
MySQL的pymysql操作
本章是MySQL的最后一章,MySQL到此完结,下一站Hadoop!!! 这章很简单,完整代码在最后,详细讲解之前python课程里面也有,感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...
[拓扑优化] 1.概述
常见的拓扑优化方法有:均匀化法、变密度法、渐进结构优化法、水平集法、移动可变形组件法等。 常见的数值计算方法有:有限元法、有限差分法、边界元法、离散元法、无网格法、扩展有限元法、等几何分析等。 将上述数值计算方法与拓扑优化方法结合&#…...
GeoServer发布PostgreSQL图层后WFS查询无主键字段
在使用 GeoServer(版本 2.22.2) 发布 PostgreSQL(PostGIS)中的表为地图服务时,常常会遇到一个小问题: WFS 查询中,主键字段(如 id)莫名其妙地消失了! 即使你在…...
用js实现常见排序算法
以下是几种常见排序算法的 JS实现,包括选择排序、冒泡排序、插入排序、快速排序和归并排序,以及每种算法的特点和复杂度分析 1. 选择排序(Selection Sort) 核心思想:每次从未排序部分选择最小元素,与未排…...
Element-Plus:popconfirm与tooltip一起使用不生效?
你们好,我是金金金。 场景 我正在使用Element-plus组件库当中的el-popconfirm和el-tooltip,产品要求是两个需要结合一起使用,也就是鼠标悬浮上去有提示文字,并且点击之后需要出现气泡确认框 代码 <el-popconfirm title"是…...
Python 解释器安装全攻略(适用于 Linux / Windows / macOS)
目录 一、Windows安装Python解释器1.1 下载并安装Python解释1.2 测试安装是否成功1.3 设置pip的国内镜像------永久配置 二、macOS安装Python解释器三、Linux下安装Python解释器3.1 Rocky8.10/Rocky9.5安装Python解释器3.2 Ubuntu2204/Ubuntu2404安装Python解释器3.3 设置pip的…...
