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

后端必备之VUE基础【黑马程序员】

news 文章来源：https://blog.csdn.net/weixin_45488428/article/details/129370982 2025/1/16 3:43:47

黑马程序员4小时入门VUE传送门

1. 简介

Vue是一个操作JavaScript的框架，类似于jQuery，但比jQuery好用，是现在的主流

2. 测试例子

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documents</title></head><body><div id="app">{{message}}</div><script src="../Resources/vue.js"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> --><script>var app = new Vue({el: "#app",data: {message: "sss "},});</script></body>
</html>

3. `el`挂载点

<div id="app" class="app">{{message}}</div>
<script>var app = new Vue({// .app对应的是class选择器，div对应的是标签选择器，el都可以挂载el: "#app",			// 此处是el挂载点，#对应的是id选择器，因此data会出现在id为app的组件中data: {message: "sss ",}});</script>

1. Vue实例的作用范围是什么呢？

Vue会管理el选项命中的元素及其内部的后代元素【即可以嵌套发挥作用】

2. 是否可以使用其他的选择器？

可以使用其他的选择器，但是建议使用ID选择器

3. 是否可以设置其他的dom元素呢？

可以使用其他的双标签，不能使用HTML和BODY

4. `data`数据对象

<div id="app"><!-- 字符串直接访问 --><h1>{{message}}</h1><!-- 键值对通过.key的方式访问 --><h1>{{people.name}}</h1><!-- 数组通过下标访问 --><h1>{{children[0]}}</h1>
</div>
<script>var app = new Vue({el: "#app",// data内部可以放字符串，键值对，数组等data: {message: "Hello，World！",people:{name:"Melon",mobile:"123"},children:["a","b","c"]},});</script>

Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js的语法即可

5. `Vue`指令

5.1 `v-text`指令

v-text指令的作用是设置标签的内容，使用此标签会覆盖标签内原本的内容

<div id="app"><!-- 使用插值表达式{{}}读取data元素的内容，用+的方式拼接 --><h1>{{message+'哈哈'}}</h1><!-- Hello,World！不显示，其内容被v-text覆盖 --><h1 v-text="message">Hello，World！</h1><!-- v-text内也可用+进行拼接 --><h1 v-text="message+'呀'"></h1>
</div>
<script>var app = new Vue({el: "#app",data: {message: "你好！"},});
</script>

5.2 `v-html`指令

其大致与v-text一致，不过在引用部分有html语法时会被解析

<div id="app"><h1 v-text="message"></h1><!-- 此时html语句会被渲染 --><h1 v-html="message"></h1>
</div>
<script>var app = new Vue({el: "#app",data: {message: "<a href=www.baidu.com>百度</a>"},});
</script>

5.3 `v-on`指令

v-on指令用于操作事件，@符号等价于v-on:

<div id="app"><input type="button" value="核武发射1" v-on:click="FBIWarnning" /><input type="button" value="核武发射2" @click="FBIWarnning" /><!-- dbl是double的意思即双击事件 --><input type="button" value="双击发射" @dblclick="FBIWarnning" /><h1 @click="changeFood">{{food}}</h1>
</div>
<script>var app = new Vue({el: "#app",data: {food: "黯然销魂饭",},// method和data一样是关键字，内放函数methods: {FBIWarnning: function () {alert("一级戒备！！！！");},changeFood: function () {this.food += "不咋地";},},});
</script>

多次点击“黯然销魂饭”会进行字符串的拼接

传入参数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documents</title></head><body><div id="app"><!-- 为点击事件绑定两个参数，字符串参数需要用单引号 --><input type="button" value="点击" @click="doIt('哎呀','妈呀！')"><!-- 锁定回车键按下时响应 --><input type="text" @keyup.enter="sayHi"></div><script src="../Resources/vue.js"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> --><script>var app = new Vue({el: "#app",methods:{// 传入的两个参数doIt:function(p1,p2){alert(p1)alert(p2)},sayHi:function(){alert("吃了没")}}});</script></body>
</html>

5.4 计数器实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documents</title></head><body><div id="app"><!-- 计数器区域 --><div class="input-num"><button @click="sub">-</button><span>{{num}}</span><button @click="add">+</button></div></div><script src="../Resources/vue.js"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> --><script>var app = new Vue({el: "#app",data: {num: 1,},methods:{add:function(){if(this.num<10){this.num++;}else{alert('最大啦！')}},sub:function(){if(this.num>0){this.num--}else{alert('最小啦！')}}}});</script></body>
</html>

5.5 `v-show`指令

为true时当前组件显示，为false时当前组件隐藏

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documents</title></head><body><div id="app"> <input type="button" value="切换显示状态" @click="changeIsShow"><input type="button" value="累加年龄" @click="addAge"><!-- isShow()函数每次对布尔值取反，因此可以实现状态切换的功能 --><img v-show="isShow" src="../Resources/good.jpg"><!-- 此处直接传入逻辑判断表达式也行 --><img v-show="age>=18" src="../Resources/good.jpg"></div><script src="../Resources/vue.js"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> --><script>var app = new Vue({el: "#app",data: {isShow:false,age:17},methods:{changeIsShow:function(){// 每次取反this.isShow=!this.isShow;},addAge:function(){this.age++;}}});</script></body>
</html>

5.6 `v-if`指令

用法与v-show类似，不过其是直接操作DOM元素【即为false时，整体预计都会消失而不是只修改display样式】

5.7 `v-bind`指令

v-bind指令的作用是：为元素绑定属性
完整写法是v-bind：属性名
简写的话可以直接省略v-bind，只保留：属性名

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documents</title><style>/* 自定义样式，.开头是类样式 */.active {border: 1px solid red;}</style></head><body><div id="app"><!-- src属性是地址，vue中可以使用v-bind进行如下绑定操作 --><img v-bind:src="imgSrc" alt="" width="150" height="150" /><br /><!-- v-bind关键字可以省略 --><img :src="imgSrc" alt="" width="150" height="150" /><br /><!-- title属性是鼠标放到图片后会显示的内容，可用+拼接:class中的语法意思为active这个自定义样式是否发挥作用取决于isActive属性--><img:src="imgSrc"alt="":title="imgTitle+'123'":class="{active:isActive}"@click="toggleActive"width="150"height="150"/></div><script src="../Resources/vue.js"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> --><script>var app = new Vue({el: "#app",data: {imgSrc: "../Resources/good.jpg",imgTitle: "v-bind测试",isActive: false,},methods: {toggleActive: function () {this.isActive = !this.isActive;},},});</script></body>
</html>

5.8 `v-for`指令

v-for指令的作用是：根据数据生成列表结构
数组经常和v-for结合使用
语法是( item,index ) in数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documents</title></head><body><div id="app"><ul><!-- arr是存放在data中的列表，it对于其中具体元素，index对于索引 --><!-- v-for会复制一整个组件，此处为复制 li 结构 --><li v-for="(it,index) in arr">一线城市{{index+1}}：{{it}}</li></ul><!-- v-for 也可以配合其他语法进行使用，可操作到具体元素 --><h2 v-for="item in meat" :title="item.name"><!-- map结构可以访问value -->{{item.name}}</h2></div><script src="../Resources/vue.js"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> --><script>var app = new Vue({el: "#app",data: {arr: ["北京", "上海", "广州", "深圳"],meat: [{ name: "牛肉" }, { name: "猪肉" }],},});</script></body>
</html>

5.9 v-model指令

v-model指令的作用是便捷的设置s和获取表单元素的值
绑定的数据会和表单元素值相关联

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documents</title></head><body><div id="app"><!-- text的内容与data中的message绑定 --><input type="text" v-model="message" /><h2>{{message}}</h2></div><script src="../Resources/vue.js"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> --><script>var app = new Vue({el: "#app",data: {message: "哈哈",},});</script></body>
</html>

6. Axios

axios是一个专注于网络请求的库

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Documents</title></head><body><div id="app"><input type="button" value="获取笑话" @click="getJoke" /><br><h3>{{joke}}</h3></div><script src="../Resources/vue.js"></script><script src="../Resources/axios.js"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> --><script>var app = new Vue({el: "#app",data: {joke: "很好笑的笑话",},methods: {getJoke: function () {var that = this;// 向网站发送get请求【当然也有post请求，主要看接口要求】// then之后第一个function用来处理请求成功的情况，// 第2个function用来处理请求失败的情况axios.get("https://autumnfish.cn/api/joke").then(function (response) {// 在axios中this不再指向Vue对象，因此若要使用需要提前存储变量// response.data即从网站中获取的数据，不过需要哪部分数据还是得看网页数据得组成结构【类似于json，也可在Chrom利用F12查看】that.joke=response.data},function (err) {});},},});</script></body>
</html>

后端必备之VUE基础【黑马程序员】

黑马程序员4小时入门VUE传送门 1. 简介 Vue是一个操作JavaScript的框架，类似于jQuery，但比jQuery好用，是现在的主流 2. 测试例子 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /&…...

编程日记 2023/5/5 0:53:02

现代HYUNDAI EDI需求分析

现代集团(HYUNDAI)是韩国一家以建筑、造船、汽车行业为主，兼营钢铁、机械、贸易、运输、水泥生产、冶金、金融、电子工业等几十个行业的综合性企业集团。本文主要介绍HYUNDAI 的EDI需求，带大家快速理清思路，明确EDI项目的推进流程。通信标准…...

编程日记 2023/5/5 0:53:00

1. 单行函数与多行函数 1.1 单行函数指单行数据输入,返回一个值的函数. 所以查询一个表时,对选择的每一行数据都返回一个结果.[oracleoracle-db-19c ~]$ sqlplus / as sysdbaSQL*Plus: Release 19.0.0.0.0 - Production on Tue Mar 7 07:59:44 2023 Version 19.3.0.0.0Copyri…...

编程日记 2023/5/5 0:52:56

配置主机名与ip的映射关系

本次进行简单的小实验通过在windows上配置主机名与IP地址的映射关系，达到我们在xshell或其他远程连接设备上，不用IP地址登陆，只需要用主机名就能实现登陆的效果配置首先需要查看自己虚拟机的IP地址，找到ens33或者ens160…...

编程日记 2023/5/5 0:52:53

Spring Cache简单介绍和使用

目录一、简介二、使用默认ConcurrentMapManager （一）创建数据库和表 （二）创建boot项目 （三）使用Api 1、EnableCaching 2、CachePut 3、cacheable 4、CacheEvict 三、使用redis作为cache 一、简…...

编程日记 2023/5/5 0:52:50

ECCV 2022｜面向精确的主动相机定位算法

标题：ECCV 2022,山东大学、北大、腾讯AILab、斯坦福和三维家联合提出，面向精确的主动相机定位算法项目地址：https://github.com/qhFang/AccurateACL.文章：Towards Accurate Active Camera Localization（ECCV 2022&…...

编程日记 2023/5/5 0:52:47

web实现环形旋转、圆形、弧形、querySelectorAll、querySelector、clientWidth、sin、cos、PI

文章目录1、HTML部分2、css部分3、JavaScript部分4、微信小程序演示1、HTML部分 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge">&l…...

编程日记 2023/5/4 20:48:33

PyCharm+Python+Selenium自动化测试动态验证码识别

driver.find_element(byBy.ID,valueUSERID).send_keys("admin")driver.find_element(byBy.ID,valuePASSWORD_VIEW).send_keys("123456")#ocr识别原理：先根据验证码的class dl_yzm定位到验证码图片，然后将验证码截图保存，…...

编程日记 2023/5/4 20:48:27

git版本回退简单记录

简单记录git版本回退的命令，参考的是这篇文章1 首先查看以前存档的版本： git log1. 知道要回退的版本和现在的版本差了多少代回退上一代版本（1个以前） git reset –hard HEAD^回退上上一代版本（2个以前&#xff0…...

编程日记 2023/5/4 20:48:19

QT入门Display Widgets之QLine、QLcdNumber、QTextBrowser

目录一、QLine界面相关 1、布局介绍 2、界面基本属性二、QLCDNumber的介绍 1、界面布局 2、定时器代码测试三、QTextBrowser 此文为作者原创，创作不易，转载请标明出处！ 一、QLine界面相关 1、布局介绍先看下界面中创建个Q…...

编程日记 2023/5/4 20:48:12

Spring学习笔记

目录1 IOC容器1.1 概念1.2 IOC的底层原理1.3 Spring中IOC容器的两种实现方式(两个接口)1.3.1 BeanFactory接口1.3.2 ApplicationContext接口1.3.3 为什么开发中使用ApplicationContext接口1.3.4 ApplicationContext接口的两个实现类1.4 IOC操作之bean管理1.4.0 bean是什么&…...

编程日记 2023/5/4 20:47:46

数据的标准化处理

假设各个指标之间的水平相差很大，此时直接使用原始指标进行分析时，数值较大的指标，在评价模型中的绝对作用就会显得较为突出和重要，而数值较小的指标，其作用则可能就会显得微不足道。因此，为了统一比较的标…...

编程日记 2023/5/4 7:57:10

性能优化|记一次线上OOM问题处理

概述最近线上监控发现 OOM 涨幅较大，因此去尝试定位和修复这个问题，在修复了一些内存泄漏和大对象占用问题后, OOM 依旧未达到正常标准，在这些新上报的 hprof 文件中，发现几乎所有 case 中都有个叫 FinalizerReference 的对象&…...

编程日记 2023/5/4 20:47:23

Vue动态粒子特效插件（背景线条吸附动画）

目录效果图： 一、安装： 二、引入 main.js 文件： 三、使用： 四、属性说明： 效果图： 一、安装： npm install vue-particles --save 二、引入 main.js 文件： import VueParticles…...

编程日记 2023/5/4 20:47:17

【Java 类】002-类、属性、方法、代码块

【Java 类】002-类、属性、方法、代码块文章目录【Java 类】002-类、属性、方法、代码块一、类1、类与对象2、类的作用3、创建与使用类类结构创建类调用类运行结果4、Java 类的执行过程5、封装、继承、多态、抽象类、内部类、接口、枚举、记录、注解等二、属性1、概述2、类型3…...

编程日记 2023/5/4 20:47:08

Ubuntu Linux 编译安装的基本步骤

文章目录1 基本步骤若报错： No such file or directory2 解压 tar.bz2文件参考：1 基本步骤解压： tar -zxvf file.tar.gz 进入解压后的文件夹： cd file 源码编译安装 ./configure # ./configmakesudo make install 若报错&…...

编程日记 2023/5/4 20:46:59

day59反刍笔记

1.本地环境安装vue后，没有vue.js文件，只有vue.cjs.js文件， 引用后也无法正常使用，看npm install vue后的文件夹中没有vue.js文件_找不到vue.js_一枝风的博客-CSDN博客老哥的博客后得到启发，将原本的命令由&#xff1…...

编程日记 2023/5/4 20:46:52

【阅读笔记】你不知道的Javascript--强制类型转换4

目录强制类型转换基本概念JSONboolean强转归纳其他知识点被诟病的安全使用隐式强转法则抽象关系比较语法表达式变动强制类型转换基本概念类型转换发生在静态类型语言的编译阶段； 强制类型转换则发生在动态类型语言的运行时（runtime） JSON…...

编程日记 2023/5/4 4:07:27

华为OD机试真题Python实现【有效子字符串】真题+解题思路+代码（20222023）

有效子字符串题目输入两个字符串S和L，都只包含小写字母， S长度 <= 100,L长度 <= 500000，判断S是否是L的有效子字符串，判定规则：S中的每个字符在L中都能找到（可以不连续）且S在L中字符的前后顺序与S中顺序要保持一致例如： S="ace"是L="abcd…...

编程日记 2023/5/3 21:31:19

上门按摩预约APP源码-东郊到家源码(开发，PHP，平台搭建)

一、什么是上门按摩预约APP源码？ 上门按摩预约APP源码是一款家政服务类型的APP，可以帮忙用户在家就能享受按摩的服务。APP源码分两端，一端是用户端，另外一端是技师端。采用的技术，前端是安卓IOS，后端是PHP&…...

编程日记 2023/5/4 20:46:45

STL讲解——模拟实现vector

STL讲解——模拟实现vector vector深度剖析在STL源码中，发现vector定义的并不是 start、size、capacity，而是start、finish、end_of_storage. 这样就可以得到size()和capacity()。 sizefinish-start capacityend_of_storage-start 扩容可能是本地扩容也…...

编程日记 2023/5/4 20:46:31

各种经典排序算法介绍及实现源码

一，冒泡排序（Bubble Sort）排序算法是程序员必须了解和熟悉的一类算法，排序算法有很多种，基础的如：冒泡、插入、选择、快速、归并、计数、基数和桶排序等。冒泡排序只会操作相邻的两个数据。每次冒泡操作都会对相邻的两个元素进行比较，看是否满足大小关系要求，如果不…...

编程日记 2023/5/4 20:46:16

历史大讲堂：这是真·图形化苹果系统历史回顾（上）

众所周知，米国有个非常牛掰的公司叫苹果，想必大家对这个logo不陌生吧。目前已发布的苹果产品有iPhone、iPad、iPod等等，简直花样繁多，而且各种功能很好用，我的手机就是一部苹果iPhone X。等一下，似乎扯远…...

编程日记 2023/5/4 20:46:06

今天女神节，用python画个贺卡送给母亲吧

今天女神节，你给女神妈妈准备了什么祝福呢？如果还没有，那么画个贺卡送给她吧，在你眼里，她是一个什么样的人呢？ 是"可爱"，“温柔”，“美丽”，“漂亮”&#xf…...

编程日记 2023/5/4 20:46:00

【编程基础之Python】11、Python中的表达式

【编程基础之Python】11、Python中的表达式Python中的表达式表达式与运算符算术表达式赋值表达式比较表达式逻辑表达式位运算表达式总结Python中的表达式在Python中，表达式是由操作数、运算符和函数调用等组成的语法结构，可以进行各种数学运算、逻辑判…...

编程日记 2023/5/4 20:45:50

华为OD机试真题Python实现【乱序整数序列两数之和绝对值最小】真题+解题思路+代码（20222023）

乱序整数序列两数之和绝对值最小题目给定一个随机的整数数组(可能存在正整数和负整数)nums, 请你在该数组中找出两个数，其和的绝对值(|nums[x]+nums[y]|)为最小值并返回这两个数(按从小到大返回)以及绝对值。每种输入只会对应一个答案。但是，数组中同一个元素不能使用两…...

编程日记 2023/5/4 20:45:46

字符串转换整数 (atoi)（python）

链接： https://leetcode.cn/problems/string-to-integer-atoi 题目描述： 请你来实现一个 myAtoi(string s) 函数，使其能将字符串转换成一个 32 位有符号整数（类似 C/C 中的 atoi 函数）。函数 myAtoi(string s) 的算法…...

编程日记 2023/5/4 20:45:40

洛谷 P1115 最大子段和

题目链接：P1115 最大子段和 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题目描述给出一个长度为 n 的序列 a，选出其中连续且非空的一段使得这段和最大。输入格式第一行是一个整数，表示序列的长度 n。第二行有 n 个整数&#xff…...

编程日记 2023/5/4 20:45:34

【Linux】-- 权限和Shell运行原理

目录 Shell的运行原理用户切换 su - / su sudo 权限 chmod chown chgrp 八进制方法修改文件属性目录权限粘滞位 umask 自定义默认权限 Shell的运行原理广义上，Linux发行版 Linux内核外壳程序 Linux 从广义上来理解它是一个操作系统而从狭义上…...

编程日记 2023/5/4 20:45:27

C++各类设计模式及实现详解

软件领域中的设计模式为开发人员提供了一种使用专家设计经验的有效途径。设计模式中运用了面向对象编程语言的重要特性：封装、继承、多态，真正领悟设计模式的精髓是可能一个漫长的过程，需要大量实践经验的积累。最近看设计模式的书&#xff0…...

编程日记 2023/5/4 20:45:13

天津港电子商务网/佛山做seo推广公司

要在Unicode字符集环境下把CString转化为char* 方法: CString str _T("D://校内项目//QQ.bmp");//leo这个NB 可以降在Unicode下的CString转化为char* //声明标识符 USES_CONVERSION; //调用函数，T2A和W2A均支持ATL和MFC中的字符转换 char *…...

编程日记 2025/1/16 2:06:44