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

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

news 文章来源：https://blog.csdn.net/IOSSHAN/article/details/127634032 2025/5/10 5:01:23

该笔记是记录尚硅谷的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

scala泛型

目录 类型参数 泛型函数&#xff1a; 协变&#xff0c;逆变&#xff0c;不变 泛型上下限&#xff1a; 上下文限定&#xff1a; 泛型是一种类型参数&#xff0c;该类型参数可以用在类、接口和方法中&#xff0c;分别被称为泛型类、泛型接口、泛型方法 类型参数 调用时不指定…...

编程日记 2023/5/25 6:25:57

程序员与ChatGPT的日常问答

程序员与ChatGPT的日常问答GPT3.5与GPT4.0能力对比技术问题工具问题编解码问题其他问题本文记录下调教ChatGPT的日常。 GPT3.5与GPT4.0能力对比 Q&#xff1a;采用同一个问题提问&#xff0c;对比下GPT3.5和GPT4.0的能力区别&#xff0c;比如&#xff1a;帮我列一个小白入门音频…...

编程日记 2023/5/30 9:17:40

如何创建高效的Prompt和ChatGPT等大语言模型AI对话

大语言模型&#xff0c;如OpenAI的GPT-4&#xff0c;是一种基于深度学习技术的自然语言处理工具&#xff0c;它可以理解自然语言并为用户提供有价值的回答。然而&#xff0c;要从大语言模型中获得高质量的回答&#xff0c;你需要学会如何高效地提问。本文将从原理出发&#xff…...

编程日记 2023/5/24 2:11:16

043：cesium加载Bing地图（多种形式）

第043个 点击查看专栏目录 本示例的目的是介绍如何在vue+cesium中加载加载Bing地图。这里显示4种形式的地图，分别为：AERIAL、ROAD、CANVAS_DARK、AERIAL_WITH_LABELS。参考后面的API，还有其他几种形式。 直接复制下面的 vue+cesium源代码，操作2分钟即可运行实现效果. 文章…...

编程日记 2023/5/22 21:30:52

vscode代码片段生成

在刚学习vue的时候&#xff0c;有些代码片段是经常写的&#xff0c;在vscode中写一个代码片段可以帮助快速生成。 生成步骤&#xff1a; VSCode中的代码片段有固定的格式&#xff0c;所以我们一般会借助于一个在线工具来完成。 具体的步骤如下: 第一步&#xff0c;复制自己需…...

编程日记 2023/5/26 20:43:49

数据规整：聚合、合并和重塑

目录一、层次化索引重排与分级排序根据级别汇总统计二、合并数据集数据库风格的DataFrame合并索引上的合并轴向连接合并重叠数据三、重塑和轴向旋转重塑层次化索引将“长格式”旋转为“宽格式”将“宽格式”旋转为“长格式”一、层次化索引 层次化索引&#xff08;hierarchica…...

编程日记 2023/5/11 15:46:43

开心档之C++ 信号处理

C 信号处理 目录 C 信号处理 signal() 函数 实例 raise() 函数 实例 信号是由操作系统传给进程的中断&#xff0c;会提早终止一个程序。在 UNIX、LINUX、Mac OS X 或 Windows 系统上&#xff0c;可以通过按 CtrlC 产生中断。 有些信号不能被程序捕获&#xff0c;但是下表…...

编程日记 2023/5/11 15:47:41

ChatGPT惨遭围剿？多国封杀、近万人联名抵制……

最近&#xff0c;全世界燃起一股围剿ChatGPT的势头。由马斯克、图灵奖得主Bengio等千人联名的“暂停高级AI研发”的公开信&#xff0c;目前签名数量已上升至9000多人。除了业内大佬&#xff0c;欧盟各国和白宫也纷纷出手。 最早“动手”的是意大利&#xff0c;直接在全国上下封…...

编程日记 2023/5/29 6:08:14

SpringBoot监听器

1.寻找spring.factories配置文件对应的监听器&#xff0c;主要要写监听器的全路径名&#xff0c;不然反射会报错 SpringBoot底层是如何读取META-INF/spring.factories的配置的&#xff1f; 1.遍历所有jar下的META-INF/spring.factories配置文件 2.读取配置文件下的所有属性&a…...

编程日记 2023/5/26 20:46:04

【网络安全】SQL注入--报错注入

报错注入报错注入定义代码展示常用的报错语句1.获取数据库名称2.获取mysql账号密码3.获取表名4.获取字段名5.获取账号密码报错注入定义 报错注入&#xff1a;利用sql语句的不规范&#xff0c;获取相关sql提示信息 代码展示 常用的报错语句 select first_name, last_name FROM…...

编程日记 2023/5/17 22:22:52