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;确…

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

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

来自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…

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

本文分析了机器学习硬件性能的最新趋势&#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;之前讲…

编译 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;口碑和热度兼收。…

一文详解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服务作为静态…

Numpy数组常用属性汇总(第5讲)

Numpy数组常用属性汇总 (第5讲)         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ…

【JavaEE进阶】 Spring使用注解存储对象

文章目录 &#x1f334;序言&#x1f340;前置⼯作&#xff1a;配置扫描路径&#x1f384;添加注解存储 Bean 对象&#x1f333;类注解&#x1f6a9;为什么要这么多类注解&#x1f6a9;注解之间的联系 &#x1f38b;⽅法注解 Bean&#x1f6a9;⽅法注解需要配合类注解使⽤ ⭕总…

探索AIGC未来:CPU源码优化、多GPU编程与中国算力瓶颈与发展

★人工智能&#xff1b;大数据技术;AIGC;Turbo;DALLE 3;多模态大模型&#xff1b;MLLM&#xff1b;LLM&#xff1b;Agent&#xff1b;Llama2&#xff1b;国产GPU芯片&#xff1b;GPU;CPU&#xff1b;高性能计算机&#xff1b;边缘计算&#xff1b;大模型显存占用&#xff1b;5G…

中国特供阉割版 RTX 4090 曝光,老黄这操作绝了

到了现在大伙儿应该发现&#xff1a;国内禁售 NVIDIA RTX 4090 显卡这事儿基本实锤了。 实际上根据老美规定&#xff0c;从上个月 17 号开始&#xff0c;凡是公司主体在中国的显卡品牌&#xff0c;就已经不能生产和销售 RTX 4090。 以后厂商想要卖 4090 只能以整机形式出售&am…

艺术画廊展厅网站制作的效果如何

艺术展厅往往有很多人前往&#xff0c;在主要城市有不少画廊&#xff0c;对经营者来说&#xff0c;不同于销售行业&#xff0c;其更多的是打造品牌吸引用户前来或合作等形式&#xff0c;而由于行业特殊性&#xff0c;需要准属性用户才会前往。 因此在品牌打造及信息承载宣传方…

防止企业敏感数据泄露

敏感数据泄露是指意外或故意泄露关键信息&#xff0c;例如个人身份信息&#xff08;PII&#xff09;、支付卡信息&#xff08;PCI&#xff09;、受保护的电子健康信息&#xff08;ePHI&#xff09;和知识产权&#xff08;IP&#xff09;&#xff0c;数据保护措施不足的组织会在…