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

Vue的介绍与使用

news 2026/2/8 15:08:18

1.Vue的介绍

内容讲解

【1】Vue介绍

1.vue属于一个前端框架，底层使用原生js编写的。主要用来进行前端和后台服务器之间的一个交互。

2.Vue是一套构建用户界面的渐进式前端框架。

“渐进式框架”简单的来说你可以将Vue作为你的应用一部分嵌入其中，代理更丰富的交互体验。就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。Vue不强求你一次性接受并使用它的全部功能特性。

【2】Vue好处

大部分时间关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。

MVC:

​ model, 模型层

​ view, 视图层 在vue中视图就是我们之前学习的html标签

​ controller 控制层

【3】Vue特点

特点
易用：在有HTML,CSS, JavaScript的基础上，快速上手。
灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能：20kb运行大小、超快虚拟DOM、最省心的优化。

内容小结

1.Vue好处：我们只需要关注视图。操作的代码都是在基于视图来操作。

2.Vue特点：易用 灵活 性能高

3.大部分关注视图：html标签。

4.vue中还具有脚本，就是创建的vue对象，在vue对象中书写一些关于vue的js代码

2.Vue的快速入门

1.基础入门案例1

内容讲解

【1】需求：快速搭建Vue的运行环境，在div视图中获取Vue中的数据

【2】实现步骤：

1.导入vue.js脚本

2.书写代码：

​ 视图：我们主要关注视图。html+css

​ 脚本：vue的代码，书写数据。

3.将课下资料中的素材导入工程中

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title>
</head>
<body><!--需求：快速搭建Vue的运行环境，在div视图中获取Vue中的数据--><!--在vue中html标签称为视图--><div id="myDiv">div1{{msg}}</div>
</body>
<!--导入的vue的js库-->
<script src="js/vue.js"></script>
<script>//创建vue对象let ve = new Vue({//表示vue作用的视图是div标签，根据id选择器来控制视图el:"#myDiv",//vue中书写的数据data:{msg:"黑马程序员"}});
</script>
</html>

内容小结

1.Vue使用的基本步骤

1.导入vue的js库

2.编写视图即html标签

3.在script标签内部创建Vue对象即脚本

2.Vue的基本结构

1.视图：html标签，我们可以在视图中通过插值表达式😗*{{vue中data中的key}}**获取vue的数据

2.脚本：

let 对象名 = new Vue({//表示vue作用的视图是div标签，根据id选择器来控制视图//el是element的缩写，表示作用的视图，通过选择器来获取要作用哪个视图，选择器和之前学习的css选择器一致//id选择器：#id属性名   class类选择器：.class类的属性值 el:"#myDiv",//vue中书写的数据//在data中以key:value形式来书写数据，然后在视图中可以通过插值表达式{{key}}获取---{{msg}}data:{msg:"黑马程序员"}});

2.基础入门案例2

内容讲解

【1】需求：点击按钮标签执行vue中的函数输出vue中data的数据

【2】实现步骤：

​ 1.导入vue.js脚本

​ 2.书写代码：

​ 视图：我们主要关注视图。html+css

​ 脚本：vue的代码，书写数据，定义函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门升级</title>
</head>
<body>
<!-- 视图 -->
<div id="div"><div>姓名：{{name}}</div><div>班级：{{classRoom}}</div><button onclick="hi()">打招呼</button><button onclick="update()">修改班级</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>//脚本let ve = new Vue({//1.vue作用的视图el:"#div",//2.vue的数据data:{name:"锁哥",classRoom:"黑马136"},//3.定义vue中的函数methods:{//如下是vue中定义函数的写法，如果在vue中(脚本和视图)调用vue中的函数：直接函数名//但是如果在vue外部调用必须加vue对象名：vue对象名.函数名(实参)vueHi:function () {//这里的this表示整个vue对象相当于ve//this.name就是获取data中的name值//必须书写thisconsole.log('姓名:' +this.name);},//在定义函数,省略了function关键字vueUpdate(){//修改classRoom的值this.classRoom = '312教室';}}});///下面的两个js函数和vue没有任何关系，就是普通的js函数/////在vue外部创建hi函数function hi() {// console.log('hi....');//调用vue中的ve.vueHi();}//在vue外部创建update函数function update() {// console.log('update....');ve.vueUpdate();}</script>
</html>

内容小结

1.vue的整体格式：

let 对象名 = new Vue({//作用的视图el:"视图的选择器",//数据data:{key:value,key:value,....},//函数methods:{//定义函数函数名:function(){},//简写格式函数名(){}}
});

2.如果我们在其他地方调用vue中的函数格式：

vue对象名.函数名();

3.vue中的注意事项：this

this在vue表示当前vue对象。建议加this

相关文章：

Vue的介绍与使用

1.Vue的介绍 内容讲解 【1】Vue介绍 1.vue属于一个前端框架&#xff0c;底层使用原生js编写的。主要用来进行前端和后台服务器之间的一个交互。 2.Vue是一套构建用户界面的渐进式前端框架。 “渐进式框架”简单的来说你可以将Vue作为你的应用一部分嵌入其中&#xff0c;代理…...

编程日记 2024/7/4 15:06:20

MYSQL双主双从，使用Keepalived双机热备+LVS高可用群集

MYSQL双主双从&#xff0c;使用Keepalived双机热备LVS高可用群集 ​ 文档只记录KeepalivedLVSmysql主从&#xff0c;不包含检验&#xff0c;如需检验&#xff0c;请自行添加web服务器 一、IP规划 服务器IP备注master1192.168.100.131master2的从master2192.168.100.132maste…...

编程日记 2024/7/4 15:04:18

9.计算机视觉—目标检测

目录 1.物体检测边缘框目标检测数据集总结边缘框代码实现2.锚框：目标检测的一种方法IoU—交并比赋予锚框标号使用非极大值抑制（NMS）输出总结代码实现1.物体检测 边缘框 一个边缘框可以通过四个数字定义 (左上x，左上y）,(右下x，右下y)(左上x，左上y，宽，高)(中间x，中间y…...

编程日记 2024/7/4 15:03:17

构造函数深入理解

目录 构造函数构造函数体赋值初始化列表初始化列表格式初始化列表的意义以及注意点const修饰的成员变量初始化对象成员具体初始化的地方缺省值存在的意义例子1例子2 初始化与赋值引用成员变量的初始化注意点1注意点2我的疑惑 自定义类型成员初始化例子1例子2例子3例子4 初始化列…...

编程日记 2024/7/4 15:02:15

Rocky Linux 9 快速安装docker 教程

前述 CentOS 7系统将于2024年06月30日停止维护服务。CentOS官方不再提供CentOS 及后续版本&#xff0c;不再支持新的软件和补丁更新。CentOS用户现有业务随时面临宕机和安全风险&#xff0c;并无法确保及时恢复。由于 CentOS Stream 相对不稳定&#xff0c;刚好在寻找平替系统…...

编程日记 2024/7/4 15:01:14

go语言并发编程1-Gouroutine

参考文档&#xff1a;www.topgoer.com 使用方法 直接包装成函数&#xff0c;go关键字触发即可 注意事项 1 main方法结束后&#xff0c;main方法内启动的子协程会立即结束&#xff0c;无论是否执行完毕&#xff1b; 启动多个groutine 使用sync包的WaitGroup来控制&#xf…...

编程日记 2024/7/4 15:00:13

Sylar服务器框架——Http模块

1、http.h 定义了HttpMethod和HttpStatus /* Request Methods */ #define HTTP_METHOD_MAP(XX) \XX(0, DELETE, DELETE) \XX(1, GET, GET) \XX(2, HEAD, HEAD) \XX(3, POST, POST) \XX(4, PUT, …...

编程日记 2024/7/4 14:58:11

7km远距离WiFi实时图传模块，无人机海上无线传输方案，飞睿智能WiFi MESH自组网技术

在浩瀚无垠的海洋上&#xff0c;无人机正在开启一场前所未有的技术创新。它们不再只是天空的舞者&#xff0c;更是海洋的守望者&#xff0c;为我们带来前所未有的视野和数据。而这一切的背后&#xff0c;都离不开一项创新性的技术——飞睿智能远距离WiFi实时图传模块与无线Mesh…...

编程日记 2024/7/4 14:56:08

2024年上半年网络工程师下午真题及答案解析

试题一(20分) 某高校网络拓扑如下图所示&#xff0c;两校区核心&#xff08;CORE-1、CORE-2&#xff09;&#xff0c;出口防火墙&#xff08;NGFW-1、NGFW-2&#xff09;通过校区间光缆互联&#xff0c;配置OSPF实现全校路由收敛&#xff0c;两校区相距40km。两校区默认由本地…...

编程日记 2024/7/4 14:55:07

Jmeter下载、安装及配置

1 Jmeter介绍 Jmeter是进行负载测试的工具&#xff0c;可以在任何支持Java虚拟机环境的平台上运行&#xff0c;比如Windows、Linux、Mac。 Jmeter模拟一组用户向目标服务器发送请求&#xff0c;并统计目标服务器的性能信息&#xff0c;比如CPU、memory usage。 2 Jmeter下载 …...

编程日记 2024/7/4 14:53:05

掌握高效实用的VS调试技巧

&#x1f525; 个人主页&#xff1a;大耳朵土土垚 1.编程常见的错误 1.1编译型错误 编程编译型错误是指在编译代码时发现的错误。编译器在编译过程中会检查代码是否符合语法规范和语义要求&#xff0c;如果发现错误会产生编译错误。 直接看错误提示信息&#xff08;双击&#…...

编程日记 2024/7/4 14:52:04

实验2 字符及字符串输入输出与分支程序设计实验

字符及字符串输入输出 从键盘输入两个一位十进制数&#xff0c;计算这两个数之和&#xff0c;并将结果在屏幕上显示出来。 分支程序设计 从键盘输入一字符&#xff0c;判断该字符是小写字母、大写字母、数字或者其他字符。若输入为小写字母&#xff0c;显示“You Input a Lo…...

编程日记 2024/7/4 14:50:01

docker容器间网络仿真工具-pumba

docker-tc&pumba docker-tc:docker-tc项目仓库 pumba:pumba项目仓库 这两个项目理论上都可以实现对容器间的网络环境进行各种模拟干预&#xff0c;包括延迟&#xff0c;丢包&#xff0c;带宽限制等。 但是我在实际使用时&#xff0c;发现docker-tc这个工具在进行网络进行模…...

编程日记 2024/7/4 14:47:57

A36 STM32_HAL库函数 之PCD通用驱动 -- B -- 所有函数的介绍及使用

A36 STM32_HAL库函数 之PCD通用驱动 -- B -- 所有函数的介绍及使用 1 该驱动函数预览1.11 HAL_PCD_SOFCallback1.12 HAL_PCD_ResetCallback1.13 HAL_PCD_SuspendCallback1.14 HAL_PCD_ResumeCallback1.15 HAL_PCD_ISOOUTIncompleteCallback1.16 HAL_PCD_ISOINIncompleteCallbac…...

编程日记 2024/7/4 14:45:55

vue2 + element三级菜单实现模板

需求&#xff1a; 需要一个含有三级菜单的结构模板&#xff0c;用于业务快速开发。 解决&#xff1a; sidebar.vue <template><el-menu :default-active"defaultActive" class"el-menu-vertical-demo" active-text-color"#ffd04b"&…...

编程日记 2024/7/4 14:44:54

vue H5页面video 视频流自动播放， 解决ios不能自动播放问题

视频组件 <videostyle"width: 100%; height: 100%;object-fit: fill"class"player"refplayer_big_boxcontrolspreloadautoplay //自动播放muted //是否静音playsinline"true"x5-playsinline""webkit-playsinline"tru…...

编程日记 2024/7/4 14:42:52

自闭症儿童：探索症状背后的多彩内心世界

在星启帆自闭症康复中心&#xff0c;我们每天与一群独特而珍贵的孩子相遇——他们&#xff0c;是自闭症谱系障碍的患儿。自闭症&#xff0c;这一复杂的神经发育障碍&#xff0c;以其多样化的症状表现&#xff0c;为每个孩子的生活轨迹绘上了不同的色彩。 自闭症孩子的症状各异…...

编程日记 2024/7/4 14:41:51

在Centos7上安装PostgreSQL16的详细步骤

文章目录 环境一、准备二、postgresql下载方法一&#xff1a;wget下载方法二&#xff1a;下载压缩包解压 三、创建用户组、用户四、创建数据主目录五、配置环境变量六、initdb初使化数据库七、配置服务八、设置开机自启动九、设置防火墙十、启动数据库服务 环境 CPU: 4 核心或以…...

编程日记 2024/7/4 14:39:49

MySQL 图形化界面

填完信息之后&#xff0c;圆圈处可以验证是否可以连接数据库 展示所有数据库&#xff08;因为有的可能连上&#xff0c;却没有数据库显示&#xff09;...

编程日记 2024/7/4 14:37:47

【人工智能】GPT-5的即将到来：从高中生进化到,,,博士生？

GPT-5的即将到来&#xff1a;从高中生进化到,博士生&#xff1f; 随着近月GPT-4o的出世&#xff0c;OpenAI也在进行一系列的采访和介绍接下来的展望和目标。 在6月22日的采访中&#xff0c;美国达特茅斯工程学院公布了OpenAI首席技术官米拉穆拉蒂的访谈内容。穆拉蒂确认&#…...

编程日记 2024/7/4 14:35:45

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2026/2/8 6:37:38

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2026/2/4 4:25:40

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2026/2/5 14:15:13

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2026/1/31 5:09:27

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2026/2/2 2:47:37

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2026/2/4 19:47:03

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

WebRTC从入门到实践 - 零基础教程

WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC&#xff1f; WebRTC&#xff08;Web Real-Time Communication&#xff09;是一个支持网页浏览器进行实时语音…...

编程新知 2026/1/5 0:33:43

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

编程新知 2025/12/31 17:08:10