当前位置: 首页 > 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&…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...