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

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开发经验&#xff0c;样例采用vue中的单文件组件&#xff0c;也是我的个人笔记&#xff0c;欢迎一起进步 必须有根元素 这是一个最简单的vue单文件组件&#xff0c;<template></template>被称为模板&#xff0c;模板中必须有一个根元素…...

时钟使能、

时钟使能 如果正确使用&#xff0c;时钟使能能够显著地降低系统功耗&#xff0c;同时对面积或性能的影响极小。但是如果不正确地使用时钟使能&#xff0c; 可能会造成下列后果&#xff1a; • 面积增大 • 密度减小 • 功耗上升 • 性能下降 在许多使用大量控制集的…...

1. Autogen官网教程 (Introduction to AutoGen)

why autogen The whole is greater than the sum of its parts.(整体的功能或价值往往超过单独部分简单相加的总和。) -Aristotle autogen 例子 1. 导入必要的库 首先&#xff0c;导入os库和autogen库中的ConversableAgent类。 import os from autogen import Conversable…...

开源账目和账单

开源竞争&#xff1a; 开源竞争&#xff08;当你无法彻底掌握技术的时候&#xff0c;你就开源这个技术&#xff0c;让更多的人了解这个技术&#xff0c;形成更多的技术依赖&#xff0c;你会说这不就是在砸罐子吗&#xff1f;一个行业里面总会有人砸罐子&#xff0c;你不如先砸…...

vue2面试题10|[2024-11-24]

问题1&#xff1a;vue设置代理 如果你的前端应用和后端API服务器没有运行在同一个主机上&#xff0c;你需要在开发环境下将API请求代理到API服务器。这个问题可以通过vue.config.js中的devServer.proxy选项来配置。 1.devServer.proxy可以是一个指向开发环境API服务器的字符串&…...

c语言与c++到底有什么区别?

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///C爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于c语言与c区别的相关内容&#xff01; 关…...

云计算-华为HCIA-学习笔记

笔者今年7月底考取了华为云计算方向的HCIE认证&#xff0c;回顾从IA到IE的学习和项目实战&#xff0c;想整合和分享自己的学习历程&#xff0c;欢迎志同道合的朋友们一起讨论&#xff01; 第二章&#xff1a;服务器基础 服务器是什么&#xff1f; 服务器本质上就是个性能超强的…...

优先算法 —— 双指针系列 - 复写零

目录 1. 复写零 2. 算法原理 一般情况下 改为就地操作&#xff1a;从左到右&#xff08;错误&#xff09; 从右到左 总结一下解决方法&#xff1a; 如何找到最后一个复写的数 特殊情况 完整步骤&#xff1a; 3. 代码 1. 复写零 题目链接&#xff1a;1089. 复写零 - 力…...

初识Linux—— 基本指令(下)

前言&#xff1a; 本篇继续来学习Linux的基础指令&#xff0c;继续加油&#xff01;&#xff01;&#xff01; 本篇文章对于图片即内容详解&#xff0c;已同步到本人gitee&#xff1a;Linux学习: Linux学习与知识讲解 Linux指令 1、查看文件内容的指令 cat ​ cat 查看文件…...

esayexcel进行模板下载,数据导入,验证不通过,错误信息标注在excel上进行返回下载

场景&#xff1a;普普通通模板下载&#xff0c;加数据导入&#xff0c;分全量和增量&#xff0c;预计20w数据&#xff0c;每一条数据校验&#xff0c;前后端代码贴上&#xff08;代码有删改&#xff0c;关键代码都有&#xff0c;好朋友们自己取舍&#xff0c;代码一股脑贴上了&…...

服务器数据恢复—raid5阵列热备盘上线失败导致EXT3文件系统不可用的数据恢复案例

服务器数据恢复环境&#xff1a; 两组分别由4块SAS硬盘组建的raid5阵列&#xff0c;两组阵列划分的LUN组成LVM架构&#xff0c;格式化为EXT3文件系统。 服务器故障&#xff1a; 一组raid5阵列中的一块硬盘离线。热备盘自动上线替换离线硬盘&#xff0c;但在热备盘上线同步数据…...

《Qt Creator:人工智能时代的跨平台开发利器》

《Qt Creator&#xff1a;人工智能时代的跨平台开发利器》 一、Qt Creator 简介&#xff08;一&#xff09;功能和优势&#xff08;二&#xff09;快捷键与效率提升&#xff08;三&#xff09;跨平台支持&#xff08;四&#xff09;工具介绍与使用主要特性&#xff1a;使用步骤…...

AG32既可以做MCU,也可以仅当CPLD使用

Question: AHB总线上的所有外设都需要像ADC一样&#xff0c;通过cpld处理之后才能使用? Reply: 不用。 除了ADC外&#xff0c;其他都是 mcu可以直接配置使用的。 Question: DMA和CMP也不用? Reply: DMA不用。 ADC/DAC/CMP 用。 CMP 其实配置好后&#xff0c;可以直…...

51c自动驾驶~合集31

我自己的原文哦~ https://blog.51cto.com/whaosoft/12121357 #大语言模型会成为自动驾驶的灵丹妙药吗 人工智能&#xff08;AI&#xff09;在自动驾驶&#xff08;AD&#xff09;研究中起着至关重要的作用&#xff0c;推动其向智能化和高效化发展。目前AD技术的发展主要遵循…...

2023年3月GESPC++一级真题解析

一、单选题&#xff08;每题2分&#xff0c;共30分&#xff09; 题目123456789101112131415答案BAACBDDAADBCDBC 1.以下不属于计算机输入设备的有&#xff08; &#xff09;。 A &#xff0e;键盘 B &#xff0e;音箱 C &#xff0e;鼠标 D &#xff0e;传感器 【答案】 …...

linux NFS

什么是NFS NFS是Network File System的缩写&#xff0c;即网络文件系统。一种使用于分散式 文件协议通过网络让不同的机器、不同的操作系统能够分享个人数据&#xff0c;让应用 程序通过网络可以访问位于服务器磁盘中的数据。NFS在文件传送或信息传送 的过程中&#xff0c;依赖…...

查看浏览器的请求头

爬虫时用到了请求头&#xff0c;虽然可以用网上公开的&#xff0c;但是还是想了解一下本机浏览器的。以 Edge 为例&#xff0c;其余浏览器通用。 打开浏览器任一网页&#xff0c;按F12打开DevTools&#xff1b;或鼠标右键&#xff0c;选择“检查”。首次打开界面应该显示在网页…...

【JavaEE进阶】 JavaScript

本节⽬标 了解什么是JavaScript, 学习JavaScript的常⻅操作, 以及使⽤JQuery完成简单的⻚⾯元素操作. 一. 初识 JavaScript 1.JavaScript 是什么 JavaScript (简称 JS), 是⼀个脚本语⾔, 解释型或即时编译型的编程语⾔. 虽然它是作为开发Web⻚⾯的脚本语⾔⽽出名&#xff0c;…...

后端接受大写参数(亲测能用)

重要点引入包别引用错了 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 --- 实现局部透明

首先准备一张局部透明度的贴图 实现局部透明原理&#xff1a; 采样准备好的贴图&#xff0c;在片元着色中&#xff0c;将返回颜色的a值乘上采样后的a值 代码&#xff1a; fixed4 frag (v2f i) : SV_Target{fixed4 col i.color;col.a * tex2D(_MainTex, i.texcoord).a;return…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...