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

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对象

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/207049.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于SpringBoot+Vue学生成绩管理系统前后端分离(源码+数据库)

一、项目简介 本项目是一套基于SpringBootVue学生成绩管理系统&#xff0c;主要针对计算机相关专业的正在做bishe的学生和需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目可以直接作为bishe使用。 项目都经过严格调试&#xff0c;确…

ElasticSearch中的分析器是什么?

在Elasticsearch中&#xff0c;分析器&#xff08;Analyzer&#xff09;是一个用于文本分析的重要组件。它定义了如何将文本分解成单词和子词&#xff0c;这对于索引和搜索是非常重要的。 在Elasticsearch中&#xff0c;分析器定义了如何将文本转换为可以被索引和搜索的形式。…

虚幻学习笔记10—C++函数与蓝图的通信

一、前言 除了上一章C变量与蓝图通信讲的变量能与蓝图通信外&#xff0c;还有函数和枚举也可以和蓝图通信。函数的关键字为”UFUNCTION“、枚举的关键字为”UENUM“。 二、实现 2.1、BlueprintCallable蓝图中调用 该函数时带执行的&#xff0c;带入如下。编译成功后在蓝图中输…

macOS 获取文件夹大小

macOS 获取文件夹大小 获取文件夹大小的扩展如下&#xff1a; extension URL {var fileSize: Int? { // in bytesdo {let val try self.resourceValues(forKeys: [.totalFileAllocatedSizeKey, .fileAllocatedSizeKey])return val.totalFileAllocatedSize ?? val.fileAll…

来自Sui的温馨建议:保护您的Web3私钥

当您安装一个钱包并创建Sui账户时&#xff0c;钱包包含一个公钥和一个私钥。保护好私钥的安全非常重要&#xff0c;从而可以保护您的Sui资产&#xff0c;包括钱包中的任何tokens。 公钥加密技术是几十年前开发的&#xff0c;是当今互联网上大多数安全交易的基础&#xff0c;包…

Navicat Premium 16 for Mac/Windows:高效的数据库开发工具

Navicat Premium 16是一款功能强大的数据库开发工具&#xff0c;为开发人员提供了全面的工具和功能&#xff0c;帮助他们更高效地进行数据库开发和管理。不论是初学者还是专业开发人员&#xff0c;Navicat Premium 16都能满足他们的需求&#xff0c;并提供直观、易用的界面。 …

【深度学习】AlexNet网络实现猫狗分类

【深度学习】AlexNet网络实现猫狗分类 AlexNet简介 AlexNet是一种卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;模型&#xff0c;它在2012年的ImageNet图像分类挑战赛中取得了重大突破&#xff0c;引发了深度学习在计算机视觉领域的热潮…

为“异常”努力是值得的

异常是OO语言处理错误的方式,在C中&#xff0c;鼓励使用异常。侯捷再书中谈起异常&#xff0c;“十年前撰写“未将异常考虑在内的”函数是为一种美好实践&#xff0c;而今我们致力于写出“异常安全码”。”可见异常安全的重要。 说起异常安全&#xff0c;首先就要是异常的出现…

Leetcode—213.打家劫舍II【中等】

2023每日刷题&#xff08;五十二&#xff09; Leetcode—213.打家劫舍II 算法思路 实现代码 class Solution { public:// 左闭右开int rob1(vector<int>& nums, int start, int end) {int n nums.size();int f0 0, f1 0, new_f 0;for(int i start; i < end…

pytorch学习入门之 Variable(变量)

Variable(变量) autograd.Variable 是包的核心类. 它包装了张量, 并且支持几乎所有的操作. 一旦你完成了你的计算, 你就可以调用 .backward() 方法, 然后所有的梯度计算会自动进行. 你还可以通过 .data 属性来访问原始的张量, 而关于该 variable(变量)的梯度会被累计到 .…

初识 OpenCV

初识 OpenCV 简介 OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个涵盖了数百种计算机视觉算法的开源算法库。 OpenCV 具有模块化结构&#xff0c;这意味着该软件包包含多个共享或静态库。其中包含以下模块&#xff1a; Core functionality (core…

机器学习硬件十年:性能变迁与趋势

本文分析了机器学习硬件性能的最新趋势&#xff0c;重点关注不同GPU和加速器的计算性能、内存、互连带宽、性价比和能效等指标。这篇分析旨在提供关于ML硬件能力及其瓶颈的全面视图。本文作者来自调研机构Epoch&#xff0c;致力于研究AI发展轨迹与治理的关键问题和趋势。 &…

【送书活动四期】被GitHub 要求强制开启 2FA 双重身份验证,我该怎么办?

记得是因为fork了OpenZeppelin/openzeppelin-contracts的项目&#xff0c;之后就被GitHub 要求强制开启 2FA 双重身份验证了&#xff0c;一拖再拖&#xff0c;再过几天帐户操作将受到限制了&#xff0c;只能去搞一下了 目录 2FA是什么为什么要开启 2FA 验证GitHub 欲在整个平台…

消息队列 - RabbitMQ

消息队列 - RabbitMQ 1. 初识 MQ1.1 同步调用1.2 异步调用1.3.技术选型 2. RabbitMQ2.1 安装2.2 收发信息2.2.1 交换机(Exchange)2.2.2 队列2.2.3 绑定关系2.2.4 发送消息 2.3 数据隔离 1. 初识 MQ 微服务一旦拆分&#xff0c;必然涉及到服务之间的相互调用&#xff0c;之前讲…

MySQL六 | 存储引擎

目录 存储引擎 存储引擎特点 存储引擎选择 Innodb与MyISAM区别 存储引擎 默认存储引擎:InnoDB show engines;#展示当前数据库支持的存储引擎 存储引擎特点 特点InnoDBMyISAMMemory存储限制64TB有有事务安全支持--锁机制行锁表锁表锁Btree锁支持支持 支持 Hash索引--支…

编译 Android gradle-4.6-all.zip 报错问题记录

编译 Android gradle-4.6-all.zip 报错问题记录 方法一&#xff1a;替换资源&#xff1a;方法二&#xff1a;修改源方法三&#xff1a;修改版本 编译时候无法下载 gradle-4.6-all Downloading https://services.gradle.org/distributions/gradle-4.6-all.zip 方法一&#xf…

《一念关山》热度破万,爱奇艺古装赛道出尽风头

​刘诗诗重回古装剧、新式武侠公路片、质感细腻的镜头美学......看点满满的《一念关山》频频登上热搜&#xff0c;俘获了大批观众的心。 开播首日热度就刷新了爱奇艺2023年站内纪录&#xff0c;《一念关山》作为2023年爱奇艺在古装赛道的收官之作&#xff0c;口碑和热度兼收。…

Linux内核-标准IO和系统IO的区别

概念 标准IO&#xff1a;指的是C语言实现的文件操作的函数 系统IO&#xff08;文件IO&#xff09;&#xff1a;指的是linux或windows或unix&#xff0c;实现文件操作的函数。 为什么要有两种IO C语言要实现跨平台&#xff0c;所以C语言在不同操作系统中实现文件操作方式是不一…

一文详解Java反射

文章目录 反射是什么&#xff1f;反射的作用所有方法汇总一、加载Class对象二、加载类的构造器对象三、加载类的成员变量四、加载类的成员方法 反射是什么&#xff1f; 反射就是&#xff1a;加载类&#xff0c;并允许以编程的方式解剖类中的某个成分&#xff08;成员变量&#…

实战:Docker Compose 下 Nginx、Java、Mysql 和 Redis 服务协同部署(包含解决浏览器访问Linux部署服务器本地资源问题)

1. 背景 在该实战中&#xff0c;我们将探讨如何使用Docker Compose协同部署Nginx、Java、Mysql和Redis服务&#xff0c;实现一个视频上传与展示的应用。具体需求如下&#xff1a; Java应用负责上传视频和图片资源到Nginx目录下&#xff0c;作为资源服务器。Nginx服务作为静态…