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

2.vue学习笔记(目录结构+模板语法+属性绑定)

文章目录

        • 1.目录结构
        • 2.模板语法
          • 2.1.文本插值
          • 2.2.使用JavaScript表达式
          • 2.3.原始HTML
        • 3.属性绑定
          • 3.1.简写
          • 3.2.布尔型Attribute
          • 3.3.动态绑定多个值

1.目录结构

在这里插入图片描述

1.vscode			——VSCode工具的配置文件夹
2.node_modules 		——Vue项目的运行依赖文件夹
3.public			——资源文件夹(浏览器图标)
4.src				——源码文件夹
5..gitgnore			——git忽略文件
6.index.html		——如果html文件
7.package.json		——信息描述文件
8.README.md			——注释文件
9.vite.config.js	——Vue配置文件
2.模板语法
	Vue使用一种基于HTML的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上,
所有的Vue模板都是语法层面合法的HTML,可以被符合规范的浏览器和HTML解析器解析。以下为初始化项目(删除示例代码):1.components文件夹下所有文件删除;2.App.vue文件只留下script与template标签;3.修改main.js文件夹(删除初始化样式)4.删除assets下所有文件刷新后会得到空页面(控制台没有错误提示)

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2.1.文本插值
	最基本的数据绑定形式的是文本插值,它使用的是“Mustache”语法(即双大括号)
<template><p>{{ msg }}</p>
</template>
<script>export default {data(){return{msg:"神奇的魔法"}}}
</script>

在这里插入图片描述

2.2.使用JavaScript表达式
	每个绑定仅支持单一表达式,也就是说一段能被求值的JS代码。一个简单的判断方法是是否可以合法地写在main后面(求值,三目运算符,字符串)

在这里插入图片描述

	无效1.{{ var a = 1 }}(语句而非表达式)2.{{ if(ok){ return message } }}(条件控制也不支持)单一表达式 +return的结果才可以
2.3.原始HTML
	若想插入HTML,需要使用v-html指令

在这里插入图片描述

3.属性绑定
	双大括号不能在HTML attributes中使用,想要响应式地绑定一个attribute,应该使用v-bind指令v-bind后面可以添加动态的属性

在这里插入图片描述
在这里插入图片描述

	v-bind指令指示Vue将元素的id attribute与组件的dynamicId属性保持一致。如果绑定的值是null或者undifined,那么该attribute将会从渲染的元素上移除
3.1.简写
	因为v-bind非常常用,提供了特定的简写语法: == v-bind:
	<div :id="dynamicId" :class="dynamicClass"></div>
3.2.布尔型Attribute
	布尔型attribute依据true/false值来决定attribute是否应该存在于该元素上,disabled就是最常见的例子之一

在这里插入图片描述

3.3.动态绑定多个值
	一个包含多个attribute的JavaScript对象

在这里插入图片描述

相关文章:

2.vue学习笔记(目录结构+模板语法+属性绑定)

文章目录 1.目录结构2.模板语法2.1.文本插值2.2.使用JavaScript表达式2.3.原始HTML 3.属性绑定3.1.简写3.2.布尔型Attribute3.3.动态绑定多个值 1.目录结构 1.vscode ——VSCode工具的配置文件夹 2.node_modules ——Vue项目的运行依赖文件夹 3.public ——资源文件夹&am…...

Python基本语法及高级特性总结

1. Python基本语法 1.1 变量和数据类型 在Python中&#xff0c;变量不需要预先声明&#xff0c;可以直接赋值。Python是一种动态类型语言&#xff0c;变量的类型会根据赋值的对象自动确定。例如&#xff1a; a 10 # a是整数类型变量 b 3.14 # b是浮点数类型变量 c …...

03-详解网关的过滤器工厂和常见的网关过滤器路由过滤器,默认过滤器,全局过滤器的执行顺序

过滤器工厂 过滤器种类 GatewayFilter是网关中提供的一种过滤器,可以对进入网关的请求和微服务响应的结果做加工处理 Spring提供了31中不同的路由过滤器工厂 AddResponseHeader表示给请求添加响应头 default-filters: # 默认过滤器 - AddResponseHeaderX-Response-Default-R…...

基于SSM的小儿肺炎知识管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…...

HuffMan tree

定义 给定N个权值作为N个叶子结点&#xff0c;构造一棵二叉树&#xff0c;若该树的带权路径长度达到最小&#xff0c;称这样的二叉树为最优二叉树&#xff0c;也称为哈夫曼树(Huffman Tree)。哈夫曼树是带权路径长度最短的树&#xff0c;权值较大的结点离根较近。 基础知识 路…...

各地加速“双碳”落地,数字能源供应商怎么选?

作者 | 曾响铃 文 | 响铃说 随着我国力争2030年前实现“碳达峰”、2060年前实现“碳中和”的“双碳”目标提出&#xff0c;为各地区、各行业的低碳转型和绿色可持续发展制定“倒计时”时间表&#xff0c;一场围绕“数字能源”、“智慧能源”、“新能源”等关键词的创新探索进…...

19.java绘图

A.Graphics类 Graphics类是java.awt包中的一个类&#xff0c;它用于在图形用户界面&#xff08;GUI&#xff09;或其他图形应用程序中进行绘制。该类通常与Component的paint方法一起使用&#xff0c;以在组件上进行绘制操作。 一些Graphics类的常见用法和方法&#xff1a; 在组…...

提升工作效率,尽在Microsoft Office LTSC 2021 for Mac!

在当今的办公环境中&#xff0c;高效率的工作是每个人都追求的目标。作为全球领先的办公软件套装&#xff0c;Microsoft Office LTSC 2021 for Mac将为您提供一站式的解决方案&#xff0c;帮助您轻松应对各种工作任务。 首先&#xff0c;Microsoft Office LTSC 2021 for Mac拥…...

day24_java的反射机制

反射 一、反射的概念 反射&#xff1a;加载类&#xff0c;反射出类的各个组成部分&#xff08;类的成员&#xff1a;构造方法&#xff0c;属性&#xff0c;方法&#xff09; java反射机制&#xff1a;在运行状态中&#xff0c;对于任何一个类都能够知道这个类的所有属性和方…...

VUE学习二、创建一个前端项目

1.创建一个vue项目 使用命令 vue ui启动vue脚手架 vue ui 等待项目创建好 可以来任务栏启动项目 参数那里可以设置启动端口等参数 启动成功 成功访问 2. 用webstorm 打开项目 脚手架页面可安装基本依赖 比如路由 使用ws打开项目 启动项目 npm run serve 3.修改启动…...

「红队笔记」靶机精讲:Prime1 - 信息收集和分析能力的试炼

「红队笔记」靶机精讲&#xff1a;Prime1 - 信息收集和分析能力的试炼 本文是作者在观看 B 站《红队笔记》后做的一些笔记及相关知识的补充。学渗透特别推荐大家去看。如有侵权&#xff0c;请联系作者&#xff0c;作者看到后会第一时间删除。 靶机精讲之Prime1&#xff0c;vu…...

JVM虚拟机系统性学习-对象的创建流程及对象的访问定位

对象的创建流程与内存分配 对象创建流程如下&#xff1a; Java 中新创建的对象如何分配空间呢&#xff1f; new 的对象先放 Eden 区&#xff08;如果是大对象&#xff0c;直接放入老年代&#xff09;当 Eden 区满了之后&#xff0c;程序还需要创建对象&#xff0c;则垃圾回收…...

perf与火焰图-性能分析工具

参考链接 perf性能分析工具使用分享 如何读懂火焰图&#xff1f;-阮一峰 perf基本用法-record,report-知乎 火焰图抓取 准备&#xff1a; centos安装perf工具 dnf install perf下载火焰图解析代码 git clone https://github.com/brendangregg/FlameGraph.git抓取指定进程…...

UniGui使用CSSUniTreeMenu滚动条

有些人反应UniTreeMenu当菜单项目比较多的时候会超出但是没有出滚动条&#xff0c;只需要添加如下CSS 老规矩&#xff0c;unitreemeu的layout的componentcls里添加bbtreemenu&#xff0c;然后在css里添加 .bbtreemenu .x-box-item{ overflow-y: auto; } 然后当内容超出后就会…...

Spring框架中的五种常用设计模式

1、单例模式 Spring 的 Bean 默认是单例模式&#xff0c;通过 Spring 容器管理 Bean 的⽣命周期&#xff0c;保证每个 Bean 只被 创建⼀次&#xff0c;并在整个应⽤程序中重用。 2.工厂模式 Spring 使⽤⼯⼚模式通过 BeanFactory 和 ApplicationContext 创建并管理 Bean 对象…...

华纳云:docker启动报错的原因和解决方法

Docker 启动报错可能由多种原因引起。以下是一些建议&#xff0c;可用于解决 Docker 启动问题&#xff1a; 查看 Docker 日志&#xff1a; 查看 Docker 的日志可以提供更多的详细信息&#xff0c;有助于定位问题。 sudo journalctl -xe | grep docker 或者查看 Docker 服务的详…...

代码规范及开发工具

代码规范及开发工具&#xff1a; 前端&#xff08;vscode、idea&#xff09;: JavaScript规范&#xff1a; 1. 谷歌开源项目风格指南&#xff1a;JavaScript 、TypeScript篇 https://zh-google-styleguide.readthedocs.io/en/latest/google-typescript-…...

证件照制作小程序源代码

17638103951(同v)...

自治调优!人大金仓解放DBA双手

数据库系统的性能是确保整个应用系统高效运转的关键因素&#xff0c;因此数据库性能调优工作至关重要。KingbaseES通过将人工调优过程内化为数据库内核&#xff0c;成功实现了自治调优。这种创新的调优方案为DBA提供了更高效且准确的性能调优途径&#xff0c;同时也显著降低了数…...

深度学习环境配置------windows系统(GPU)------Pytorch

深度学习环境配置------windows系统&#xff08;GPU&#xff09;------Pytorch 准备工作明确操作系统明确显卡系列 CUDA和Cudnn下载与安装1.下载2.安装 环境配置过程1.安装Anacoda2.配置环境1&#xff09;创建一个新的虚拟环境2&#xff09;pytorch相关库的安装 2.安装VScode1&…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

Python Einops库:深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

nnUNet V2修改网络——暴力替换网络为UNet++

更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...