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

web学习---Vue---笔记（1）

news 2025/11/9 0:04:04

该笔记是记录尚硅谷的Vue学习视频的笔记，视频地址为：学习视频地址

初始Vue

Vue组件化的特点

  • 组件化
  • 声明式编码
  • 虚拟DOM+Diff算法，尽量复用DOM节点
    在这里插入图片描述

H5的组件，是把某一个模块封装，里面写HTML\CSS\JS等，算是一个页面里面的某个模块。在移动端，可能算是一个单独的view
移动端的组件，指的是将某些功能类似或者业务封装为组件

脚手架，即是一种安装Vue的方法

创建Vue实例

var vueName = new Vue()

Vue创建后，需不需要传递参数？传几个参数？

只传一个参数，并且该参数是一个对象类型（对象类型，使用{}），该对象被称为配置对象
配置对象里面，是key: value的形式
key是约定好的，不能修改
value可以改，但是value的类型不能改

<div id="app"><h2>学校:{{schoolName}}</h2><p>年龄:{{age}}</p>
</div>var vueName = new Vue({el:"#app"//el用于指定当前Vue实例为哪个容器服务data:{//data中用于存储数据，数据供el所指定的容器去使用schoolName:"Vue一中",age: "18"}
})

el: '#root'
el是element的简称
#app，是一个id选择器
作用是：将Vue创建的实例，与div容器建立链接

Vue实例和容器是一一对应

模板语法

Vue模板语法有2大类：

  1. 插值语法（双大括号表示）
    功能：用于解析标签体内容
    语法：{{xxx}}，xxx是js表达式，且可以直接读取到data中所有属性。
  2. 指令语法（v-开头）
    功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
    举例：v-bind:href="xxx" 或者 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中所有属性，

<a href="url">链接地址</a>
这样，a标签的url地址仅仅就是“url”字符串

<a v-bind:href="url">链接地址</a>
使用v-bind，会将url字符串，看成表达式执行，替换为data里面的key为url的value值
在控制台可以看到，上面的代码，转换为：
<a href="https://www.baidu.com">链接地址</a>

v-bind会将原来的字符串，当做表达式去执行

Vue中有2种数据绑定的方式：
v-bind是单向绑定，数据只能从data流向页面
v-model是双向绑定

v-model只能应用在表单元素（输入类元素）上

el与data的两种写法

el

方法一：el:"#app"
方法二：vueName.$mount('#app')

data

方法一：对象式

data:{//data中用于存储数据，数据供el所指定的容器去使用schoolName:"Vue一中",age: "18",url: "https://www.baidu.com"
}

方法二：函数式

data:function(){//data中用于存储数据，数据供el所指定的容器去使用return{schoolName:"Vue一中",age: "18",url: "https://www.baidu.com"}
}

可简写为：

data(){//data中用于存储数据，数据供el所指定的容器去使用return{schoolName:"Vue一中",age: "18",url: "https://www.baidu.com"}
}

MVVM模型

M：模型（Model）：data中的数据
V：视图（View）：模板代码
VM：视图模型（ViewModel）：Vue实例

data中所有的属性，最后都出现在了vm身上
vm身上所有的属性，及Vue原型上所有属性，在Vue模板中都可以直接使用

数据代理

defineProperty动态添加一个属性：

			let person = {name: '张三',sex: '男'}//需要三个值：要加属性的对象，要加属性的名字，要加属性的值（配置项）Object.defineProperty(person, 'age', {value: 18})console.log(person);//{name: '张三', sex: '男', age: 18}

数据代理：通过一个对象代理，对另一个对象中属性的操作（读/写）

主要是通过 get、set方法实现

事件绑定

  1. 使用v-on:xxx或者@xxx 绑定事件，其中xxx是事件名；
  2. 事件的回调需要配置在methods对象中，最终会在vm上
  3. methods中配置的函数，不要使用箭头函数！否则this就不是vm了
  4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
  5. @click = "demo" 和 @click = 'demo($event)' 效果一致，但后者可以传参

传参，只需要在方法后面加()即可
如果@click后面跟的调用函数没有写()，则函数的实现里面有默认参数event
如果()有自定义参数，则没有event；想要event则 需要写上参数 $event

Vue中的事件修饰符：

  1. prevent：阻止默认事件（常用）
  2. stop：阻止事件冒泡（常用）
  3. once：事件只触发一次（常用）
  4. capture：使用事件的捕获模式
  5. self：只有event.target是当前操作的元素时，才触发事件
  6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕
<a href="https://www.baidu.com" @click.prevent="showInfo">这是链接地址</a>
<a href="https://www.baidu.com" @click.once="showInfo">这是链接地址</a>

键盘事件

@keydown 键盘按键按下
@keyup 键盘按键松手

Vue中常用的按键别名：
回车 enter
删除 delete
退出 esc
空格 space
换行 tab
上 up
下 down
左 left
右 right

计算属性

在引入计算属性之前，先看几个不用计算属性的例子，慢慢引出 计算属性

需求：
分别输入姓和名字，最后组合成姓名

插值法

即，使用{{}}

		<div id="app"><!-- v-model双向绑定 -->姓：<input type="text" v-model:value="firstName"><br><!-- v-model:value 可简写为 v-model -->姓：<input type="text" v-model="firstName"><br>名：<input type="text" v-model="lastName"><br>全名：<span>{{firstName +"-"+ lastName}}</span><br><!-- 或者 -->全名：<span>{{firstName}}-{{lastName}}</span><br><!-- 不管输入几位，姓只要前三位 -->全名：<span>{{firstName.slice(0, 3)}}-{{lastName}}</span><br></div><script type="text/javascript">var vueName = new Vue({el:"#app",data:{firstName: "张",lastName: "三"}})</script>

在firstName.slice(0, 3)里面，仅仅是截取前三位的需求，如果里面还有各种sao操作，那{{}}里面要写的代码太多了，因此，可以写到一个methods里面

使用methods方法

		<div id="app">全名：<span>4{{fullName()}}</span><br></div>var vueName = new Vue({el:"#app",data:{firstName: "张",lastName: "三"},methods:{fullName(){return this.firstName +"-"+ this.lastName;}}})

计算属性

什么是属性？
对于Vue来说，data里面的数据，都是属性

计算属性：
要用的属性不存在，要通过已有属性计算得来

拿现有的属性，去加工、计算，生成一个全新的属性

  • 计算属性不放在data里面，要放在computed里面
    里面的属性，是一个对象
    对象里面有一个get方法

get方法里面的this是vm
计算属性最终会出现在vm上，直接读取使用即可

<body><div id="app"><!-- v-model双向绑定 -->姓：<input type="text" v-model:value="firstName"><br><!-- v-model:value 可简写为 v-model -->姓：<input type="text" v-model="firstName"><br>名：<input type="text" v-model="lastName"><br><!-- 写4个调用，只被调用一次，get有缓存 -->全名：<span>计算属性: {{fullName}}</span><br>全名：<span>计算属性: {{fullName}}</span><br>全名：<span>计算属性: {{fullName}}</span><br>全名：<span>计算属性: {{fullName}}</span><br>全名：<span>计算属性: {{fullName}}</span><br></div><script type="text/javascript">var vueName = new Vue({el:"#app",data:{firstName: "张",lastName: "三"},computed:{fullName:{// get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值// get什么时候调用？1. 初次读取fullName的时候 2.所依赖的数据发生变化时get(){console.log('get被调用');return this.firstName + '-' + this.lastName;},// set什么时候被调用？当fullName被修改时set(value){console.log("set被调用", value);const array = value.split('-')this.firstName = array[0];this.lastName = array[1];}}}})</script></body>

当只读不改（只使用get不使用set），可以简写

			computed:{// 是一个函数fullName2:function(){console.log("当get使用");},fullName3(){console.log("当get使用");}}

2023年

监听属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- <script src="../js/v2.6.10/vue.js"></script> --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style type="text/css">.active{color: red;}</style></head><body><div id="app"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button></div><script type="text/javascript">var vueName = new Vue({el:"#app",data:{isHot: true},computed:{info(){return this.isHot ? "炎热" : '凉爽'}},methods:{changeWeather(){this.isHot = !this.isHot;}},watch:{//监听isHot:{immediate: true,//初始化的时候，让handler调用一次//handler什么时候调用？当isHot发生改变的时候handler(newValue, oldValue){//可以有两个参数console.log("天气被修改了");}}}})</script></body>
</html>

//监视多级结构中某个属性的变化"numbers.a":{//监视多级结构中，所有属性的变化deep:true,handler(){console.log("a被改变了")}}

相关文章：

web学习---Vue---笔记（1）

该笔记是记录尚硅谷的Vue学习视频的笔记&#xff0c;视频地址为&#xff1a;学习视频地址 初始Vue Vue组件化的特点 组件化声明式编码虚拟DOMDiff算法&#xff0c;尽量复用DOM节点 H5的组件&#xff0c;是把某一个模块封装&#xff0c;里面写HTML\CSS\JS等&#xff0c;算是一…...

编程日记 2023/5/29 6:05:34

【前端面试题——微信小程序】

目录1.请谈谈wxml与标准的html的异同&#xff1f;2.请谈谈WXSS和CSS的异同&#xff1f;3.请谈谈微信小程序主要目录和文件的作用&#xff1f;4.请谈谈小程序的双向绑定和vue的异同&#xff1f;5.简单描述下微信小程序的相关文件类型&#xff1f;6.微信小程序有哪些传值(传递数据…...

编程日记 2023/5/25 3:35:31

gpt模型训练-gpt3模型详解

训练一个GPT模型需要大量的数据集和计算资源。在这里&#xff0c;我提供一些较为通用的训练步骤以供参考&#xff1a; 获取数据集 首先需要收集一些数据集&#xff0c;数据集建议获取大型的常用文本数据集。常见的例如维基百科、各种在线文章、小说、论文等&#xff0c;数据集…...

编程日记 2023/5/24 15:52:54

vue尚品汇商城项目-day04【27.分页器静态组件（难点）】

文章目录27.分页器静态组件&#xff08;难点&#xff09;本人其他相关文章链接27.分页器静态组件&#xff08;难点&#xff09; 难点&#xff1a; 考虑点1&#xff1a;为啥需要分页呢&#xff1f; 答案&#xff1a;按需加载 考虑点2&#xff1a;分页器展示&#xff0c;需要哪…...

编程日记 2023/5/26 11:50:58

使用SeaFile搭建私有云盘并公网访问【cpolar内网穿透】

文章目录1. 前言2. SeaFile云盘设置2.1 Owncould的安装环境设置2.2 SeaFile下载安装2.3 SeaFile的配置3. cpolar内网穿透3.1 Cpolar下载安装3.2 Cpolar的注册3.3 Cpolar云端设置3.4 Cpolar本地设置4. 公网访问测试5. 结语1. 前言 现在我们身边的只能设备越来越多&#xff0c;各…...

编程日记 2023/5/24 20:36:14

蓝桥杯第26天（Python）考前挣扎

题型&#xff1a; 1.思维题/杂题&#xff1a;数学公式&#xff0c;分析题意&#xff0c;找规律 2.BFS/DFS&#xff1a;广搜&#xff08;递归实现&#xff09;&#xff0c;深搜&#xff08;deque实现&#xff09; 3.简单数论&#xff1a;模&#xff0c;素数&#xff08;只需要…...

编程日记 2023/5/24 2:07:31

WuThreat身份安全云-TVD每日漏洞情报-2023-04-04

漏洞名称:RSA NetWitness Platform 内存损坏漏洞 漏洞级别:中危 漏洞编号:CVE-2022-47529,CNNVD-202303-2419 相关涉及:RSA NetWitness Platform 12.2之前版本 漏洞状态:POC 参考链接:https://tvd.wuthreat.com/#/listDetail?TVD_IDTVD-2023-07193 漏洞名称:EyouCms <1.5.…...

编程日记 2023/5/28 3:50:52

【C++】Step by Step的格式化代码风格是这样的吗？

文章目录前言一、依赖二、配置总结前言 本节从0开始讲解如何格式化自己的代码风格&#xff0c;使用vscode插件来完成&#xff0c;本节的所有配置都会在星球同步哦~ 一、依赖 本次使用的是clang-format插件&#xff0c;具体安装比较简单&#xff1a; mac系统&#xff1a; br…...

编程日记 2023/5/15 4:00:35

aspnet030高校学生团体管理系统sqlserver

net030高校学生团体管理系统 . 1.用户基本信息管理模块&#xff1a;录入、修改、删除、查询、统计、打印等功能 2.学生成绩管理模块&#xff1a;录入、修改、删除、查询、统计、打印等功能 3.学生团体信息管理模块&#xff1a;录入、修改、删除、查询、统计、打印等功能 4.教…...

编程日记 2023/5/15 21:10:45

学习HM微博项目第10天

步骤&#xff1a;发微博12-表情键盘06-点击表情 -> 发微博13-表情键盘07-插入表情和封装textView -> 发微博14-表情键盘08-长按表情 -> 发微博15-表情键盘09-最近表情 -> 发微博16-表情键盘10-最近表情完善 发微博12-表情键盘06-点击表情 APP的演示动画&#xff…...

编程日记 2023/5/24 21:33:18

0204强连通性-有向图-数据结构和算法(Java)

文章目录1 概述2 强连通分量2.1 定义2.2 Kosaraju算法2.2.1 算法实现2.2.2算法测试2.2.3 算法理解3 强连通性结语1 概述 定义。如果2个顶点是相互可达的&#xff0c;则称它们为强连通的。如果一幅有向图中的任意两个顶点都是强连通的&#xff0c;则称这幅有向图也是强连通的。 …...

编程日记 2023/5/22 22:06:01

ElasticSearch集群

5.2 IK分词器简介 IKAnalyzer是一个开源的&#xff0c;基于java语言开发的轻量级的中文分词工具包。从2006年12月推出1.0版开始&#xff0c;IKAnalyzer已经推出 了3个大版本。最初&#xff0c;它是以开源项目Lucene为应用主体的&#xff0c;结合词典分词和文法分析算法的中文分…...

编程日记 2023/5/22 21:28:06

音视频基础概念(6)——视频基础

网上冲浪时&#xff0c;我们会接触到网络流媒体和本地视频文件。常见的视频文件格式有MP4、MKV、AVI等。在流媒体网站上看见视频常用的协议有HTTP、RTSP、RTMP、HLS等。视频技术较为复杂&#xff0c;包括视频封装、视频编解码、视频播放和视频转码等内容。1 视频基础概念当下市…...

编程日记 2023/4/12 11:24:53

【Python网络蜘蛛】基础 - 多线程和多进程的基本原理

文章目录多线程和多进程的基本原理多线程的含义并发和并行Python中的多线程和多进程多线程和多进程的基本原理 在编写爬虫程序的时候&#xff0c;为了提高爬取效率&#xff0c;我们可能会同时运行多个爬虫任务&#xff0c;其中同样涉及多进程和多线程。 多线程的含义 先了解一…...

编程日记 2023/5/15 21:12:44

linux C/C++文件路径操作

标题1、 access函数查找文件夹是否存在/文件是否有某权限 头文件&#xff1a; 在windows环境下头文件为&#xff1a; #include <io.h> 在linux环境下头文件为&#xff1a; #include <unistd.h> 函数原型&#xff1a; int access(const char* _Filename, int _Acce…...

编程日记 2023/5/30 9:14:59

Baumer工业相机堡盟相机如何使用BGAPI SDK和Opencv联动实现图像转换成视频（C#）

Baumer工业相机堡盟相机如何使用BGAPI SDK和Opencv联动实现图像转换成视频Baumer工业相机Baumer工业相机SDK技术背景代码分析第一步&#xff1a;先引用OpenCV库第二步&#xff1a;引用图像文件夹生成视频工业相机图像通过OpenCV转为视频的优点工业相机图像转为视频的行业应用​…...

编程日记 2023/5/28 19:31:29

Redis常用命令以及如何在Java中操作Redis

前言Redis是一个基于内存的key-value结构数据库&#xff0c;是互联网技术领域使用最为广泛的存储中间件。Redis基于内存存储&#xff0c;读写性能高&#xff0c;适合存储热点数据&#xff08;热点商品、资讯、新闻&#xff09;。Redis是一个开源的内存中的数据结构存储系统&…...

编程日记 2023/5/26 20:42:24

ASEMI代理AD7980BRMZRL7原装ADI（亚德诺）车规级AD7980BRMZRL7

编辑&#xff1a;ll ASEMI代理AD7980BRMZRL7原装ADI&#xff08;亚德诺&#xff09;车规级AD7980BRMZRL7 型号&#xff1a;AD7980BRMZRL7 品牌&#xff1a;ADI/亚德诺 封装&#xff1a;MSOP-10 批号&#xff1a;2023 安装类型&#xff1a;表面贴装型 AD7980BRMZRL7 汽车…...

编程日记 2023/5/30 9:15:58

leetcode141：环形链表

给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置&#xff08;…...

编程日记 2023/5/24 2:42:00

lattice diamond软件使用

1.diamond软件破解&#xff1a; lisence坚果云下载&#xff1b;或者这个博主操作环境变量设置&#xff1a; 2. 调用IP 有两种方式&#xff0c;依据芯片或者软件版本改变。 传统的IPexpress&#xff0c;每个IP单独例化。 新出的Clarity&#xff0c;多个IP在同一个顶层内调用…...

编程日记 2023/5/29 6:06:22

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/11/8 12:28:27

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/11/6 5:46:16

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2025/11/7 9:56:44

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2025/11/7 19:47:01

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2025/11/7 23:31:24

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/10/2 18:05:53

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/11/8 10:54:23

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/11/7 19:35:25

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/11/3 19:02:52