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

Vue｜初识Vue

news 2025/7/8 14:24:12

Vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。

    • 初识Vue
      • 1. Vue简介
      • 2. 开发准备
      • 3. 模板语法
        • 3.1 差值语法
        • 3.2 指令语法
      • 4. 数据绑定
        • 4.1 单向数据绑定
        • 4.2 双向数据绑定
      • 5. MVVM模型
        • 5.1 Model
        • 5.2 View
        • 5.3 ViewModel（vm）

初识Vue

1. Vue简介

Vue官网

1. 英文官网: https://vuejs.org/
2. 中文官网: https://cn.vuejs.org/

Vue介绍

动态构建用户界面的渐进式 JavaScript 框架

Vue特点

1. 遵循 MVVM 模式
2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
3. 它本身只关注 UI, 也可以引入其它第三方库开发项目

2. 开发准备

开发前的准备，环境配置以及开发工具网上教程都很多

1. Visual Studio Code开发工具
2. 下载安装Node.js
3. 准备Vue.js以及Vue.min.js

在我的电脑新建一个文件夹，通过VsCode选择并打开

在这里插入图片描述
在这里插入图片描述

点击左侧的扩展图标，打开侧边栏，在文本框输入Chiness，点击install安装中文简体插件

在这里插入图片描述
在这里插入图片描述

在项目目录新建文件夹并将下载好的Vue.js以及Vue.min.js放进去

1. vue.js是开发环境版本，包含完整的警告和调试模式，vue.js是完整的未压缩的版本，文件比较大。
2. vue.min.js是生产环境版本，删除了警告，而vue.min.js是经过压缩的版本，减小了文件体积。

在这里插入图片描述

3. 模板语法

在project目录新建一个文件夹并创建一个html文件，同时引入vue.js

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>模板语法</title><script src="../js/vue.js" type="text/javascript"></script>
</head>
<body></body>
</html>

模板的理解

html 中包含了一些 JS 语法代码，语法分为两种，分别为：
1. 插值语法(双大括号表达式)
2. 指令语法(以 v-开头)

3.1 差值语法

差值语法效果如下图所示

1. 插值语法功能: 用于解析标签体内容效果。
2. 语法: {{xxx}} ，xxxx 会作为 js 表达式解析

在这里插入图片描述

    <div id="root"><h1>{{name}}</h1><hr /></div>

3.2 指令语法

1. 功能: 解析标签属性、解析标签体内容、绑定事件
2. 例子：<a v-bind:href="href">点我</a> ，href会作为 js 表达式被解

在这里插入图片描述

4. 数据绑定

4.1 单向数据绑定

通过以下演示单向数据绑定，可以很直观的看到虽然文本框的值被改变，但是data中的name还是原来的值

1. 在data中定义name字段并赋值
2. 在html中增加一个input标签并通过指令语法绑定(v-bind:value="xxxx")
3. 修改文本框中的值并在控制台输出打印vm.name
特点： 数据只能从 data 流向页面；语法：v-bind:href ="xxx" 或简写为 :href

在这里插入图片描述

<div id="root"><input :value="name"/><hr />
</div>

4.2 双向数据绑定

通过以下案例演示双向数据绑定，可以看到当我们在input进行编辑时，data中的name也同步被修改；双向数据绑定一般都应用在表单类（输入类）元素上 （如：input、select等）

1. 在data中定义name字段并赋值
2. 在html中增加一个input标签并通过指令语法绑定(v-model:value="xxxx")
3. 修改文本框中的值并在控制台输出打印vm.name
特点： 数据不仅能从 data 流向页面，还能从页面流向 data；语法：v-mode:value="xxx" 或简写为 v-model="xxx

在这里插入图片描述

<div id="root"><input v-model:value="name" /><hr />
</div>

5. MVVM模型

后端同学如果没有前端开发经验的可能会有点疑问，不是MVC模型吗，怎么变成MVVM模型了，是不是说错了，这里也顺带提一下MVC模型，俩模型长的挺像

在这里插入图片描述

经典MVC模式中，M是指模型，V是视图，C则是控制器，使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。其中，View的定义比较清晰，就是用户界面。
1. 模型：主要包含业务数据和业务逻辑。在模型层，还会涉及到用户发布的服务，在服务中会根据不同的业务需求，更新业务模型中的数据。
2. 视图：呈现给用户的部分，是用户和程序交互的接口，用户会根据具体的业务需求，在View视图层输入自己特定的业务数据，并通过界面的事件交互，将对应的输入参数提交给后台控制器进行处理。
3. 控制器：用来处理用户输入数据，已经更新业务模型的部分。控制器中接收了用户与界面交互时传递过来的数据，并根据数据业务逻辑来执行服务的调用和更新业务模型的数据和状态。

在这里插入图片描述

那什么是MVVM模型呢？
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

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

在这里插入图片描述

5.1 Model

可以将Model称之为数据层，因为它仅仅只关注数据本身，不关注其他的任何行为，可以理解为一个数据对象仓库，只是用于存储用于展示在界面上的数据，它主要表达的就是Vue框架里的data数据对象

data:function(){return{name:'摔跤猫子',};
},

5.2 View

JavaScript里的DOM对象，我们所看到的页面也就是我们的DOM，通过一个标签进行声明容器范围

在这里插入图片描述

    <!-- 准备好一个容器 --><div id="root"><input v-model:value="name" /><hr /></div>

5.3 ViewModel（vm）

vm是mvvm模式的核心，亦是连接View和Model的桥梁，通过数据绑定以达到承上启下的效果，监听数据变化的同时对数据进行绑定。

在这里插入图片描述

    <!-- 准备好一个容器 --><div id="root"><input v-model:value="name" /><hr /></div><script type="text/javascript">//Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。// 创建vue实例const vm = new Vue({el:'#root',//函数式data:function(){return{name:'摔跤猫子',};},});</script>

相关文章：

Vue｜初识Vue

Vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建&#xff0c;并提供了一套声明式的、组件化的编程模型&#xff0c;帮助开发者高效地开发用户界面。 初识Vue1. Vue简介2. 开发准备3. 模板语法3.1 差值语法3.2 指令语法4. 数据绑定4.1 单向数据…...

编程日记 2023/5/30 10:22:01

在职阿里6年，一个29岁女软件测试工程师的心声

简单的先说一下&#xff0c;坐标杭州&#xff0c;14届本科毕业&#xff0c;算上年前在阿里巴巴的面试&#xff0c;一共有面试了有6家公司&#xff08;因为不想请假&#xff0c;因此只是每个晚上去其他公司面试&#xff0c;所以面试的公司比较少&#xff09;其中成功的有4家&…...

编程日记 2023/5/17 2:04:53

(C语言)自定义类型，枚举与联合

问&#xff1a;1. 结构体在自引用的时候不能怎么样&#xff1f;可以怎么样&#xff1f;2. Solve the problems&#xff1a;自定义一个学生结构体类型&#xff0c;要包含姓名&#xff0c;性别&#xff0c;年龄&#xff0c;六科成绩&#xff0c;家乡&#xff08;也为结构体&#…...

编程日记 2023/4/15 11:48:45

node.js服务端笔记文档学会写接口，学习分类：path、包、模块化、fs、express、中间件、jwt、开发模式、cors。

node.js 学习笔记 node.js服务端笔记文档学会写接口&#xff0c;path、包、模块化、fs、express、中间件、JWT、开发模式、cors。 gitee&#xff1a;代码接口笔记 1什么是node.js nodejs 是基于ChromeV8&#xff0c;引擎的一个javaScript 运行环境。node.js 无法使用DOM和BO…...

编程日记 2023/5/13 3:36:35

初始C++(三)：引用

文章目录一.引用的概念二.引用的使用1.引用作为输出型参数2. 引用作为函数返回值3.const引用三.引用的一些小问题四.引用和指针五.引用和指针的区别一.引用的概念 引用的作用是给一个已经存在的变量取别名&#xff0c;编译器不会为引用变量开空间&#xff0c;引用变量和被他引…...

编程日记 2023/5/12 2:15:18

【前端】参考C站动态发红包界面，高度还原布局和交互

最近有些小伙伴咨询博主说前端布局好难&#xff0c;其实都是熟能生巧&#xff01; 模仿C站动态发红包界面&#xff0c;cssdiv实现布局&#xff0c;纯javascript实现交互效果 目录 1、界面效果 2、界面分析 2.1、整体结构 2.2、标题 2.3、表单 2.4、按钮 3、代码实现 3.…...

编程日记 2023/5/16 16:59:12

VR全景带你浪漫“狂飙”情人节，见证甜蜜心动

当情人节遇上VR&#xff0c;足以让情侣过一个难忘的情人节。马上情人节就要到了&#xff0c;大家是不是还在绞尽脑汁的想着&#xff0c;如何和另一半过一个浪漫的情人节呢&#xff1f;老套的剧情已经不能吸引人了&#xff0c;让我们看看VR全景给情人节带来了哪些不同的体验吧&a…...

编程日记 2023/5/23 1:03:19

Linux系统安全之iptables防火墙

目录 一.iptables防火墙基本介绍 二.iptables的四表五链 三.iptables的配置 1.iptables的安装 2.iptables防火墙的配置方法 四.添加、查看、删除规则 1.查看(fliter)表中的所有链 iptables -L 2.使用数字形式(fliter)表所有链 查看输出结果 iptables -nL 3.清空表中所…...

编程日记 2023/5/13 3:37:52

【C#基础】C# 变量与常量的使用

序号系列文章1【C#基础】C# 程序通用结构2【C#基础】C# 基础语法解析3【C#基础】C# 数据类型总结文章目录前言一. 变量&#xff08;variable&#xff09;1&#xff0c;变量定义及初始化2&#xff0c;变量的类别3&#xff0c;接收输出变量二. 常量&#xff08;constant&#xff…...

编程日记 2023/5/27 6:23:46

[ 常用工具篇 ] CobaltStrike(CS神器)基础(一) -- 安装及设置监听器详解

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…...

编程日记 2023/5/17 11:12:31

Redis集群

Redis集群 本章是基于CentOS7下的Redis集群教程&#xff0c;包括&#xff1a; 单机安装RedisRedis主从Redis分片集群 1.单机安装Redis 首先需要安装Redis所需要的依赖&#xff1a; yum install -y gcc tcl然后将课前资料提供的Redis安装包上传到虚拟机的任意目录&#xff…...

编程日记 2023/5/13 4:34:58

00---C++入门

1. C关键字(C98) C总计63个关键字&#xff0c;C语言32个关键字 2. 命名空间 在C/C中&#xff0c;变量、函数和后面要学到的类都是大量存在的&#xff0c;这些变量、函数和类的名称将都存在于全局作用域中&#xff0c;可能会导致很多冲突。使用命名空间的目的是对标识符的名称进…...

编程日记 2023/5/23 1:05:59

Spring-事务2

文章目录前言一、事务的特性&#xff08;ACID&#xff09;二、事务的隔离级别三、spring中的事务平台事务管理器.事务定义ISOLation_XXX&#xff1a;**事务隔离级别.**PROPAGATION_XXX&#xff1a;**事务的传播行为**.事务状态关系&#xff1a;四、使用XML文件配置事务1、 搭建…...

编程日记 2023/5/25 6:54:04

Windows Git Bash 配置

Windows Git Bash 配置 本文参考的文章&#xff1a; 在 Windows 的 Git Bash 中使用包管理器 - iris (ginshio.org)Git bash 安装 pacman & Windows 解压 zst 文件 | 伪斜杠青年 (lckiss.com) 一、Git的安装 Git 的安装应该是都会的&#xff0c;但还是应该说以下&#…...

编程日记 2023/5/23 1:05:35

java代码整合kettle9.3实现读取表中的数据，生成excel文件

java代码整合kettle9.3实现读取表中的数据&#xff0c;生成excel文件 1.简介 本次使用java代码整合kettle9.3版本&#xff0c;数据库使用mysql。 2.jar包导入 项目需要依赖部分kettle中的jar包&#xff0c;请将这部分jar包自行导入maven仓库。 <dependency><groupId…...

编程日记 2023/5/24 2:28:12

分享微信点餐小程序搭建步骤_微信点餐功能怎么做

线下餐饮实体店都开始摸索发展网上订餐服务。最多人选择的是入驻外卖平台&#xff0c;但抽成高&#xff0c;推广还要另买流量等问题&#xff0c;也让不少商家入不敷出。在这种情况下&#xff0c;建立自己的微信订餐小程序&#xff0c;做自己的私域流量是另一种捷径。那么&#…...

编程日记 2023/5/24 14:14:13

4、数组、切片、map、channel

目录一、数组二、切片三、map四、channel五、引用类型一、数组 数组&#xff1a; 数组是块连续的内存空间&#xff0c;在声明的时候必须指定长度&#xff0c;且长度不能改变所以数组在声明的时候就可以把内存空间分配好&#xff0c;并赋上默认值&#xff0c;即完成了初始化数组…...

编程日记 2023/5/12 2:19:30

270 uuid

270 uuid 用途 For the creation of RFC4122 UUIDs 可靠性 10000 星星 适应于浏览器或者服务器 官网链接 https://www.npmjs.com/package/uuid https://github.com/uuidjs/uuid 基本使用 import { v4 as uuidv4 } from uuid; uuidv4(); // ⇨ 9b1deb4d-3b7d-4bad-9bdd-2b0d7b3d…...

编程日记 2023/4/17 10:30:06

2023最新简历模板免费下载

下面分享5个简历模板网站&#xff0c;免费下载&#xff0c;建议收藏&#xff01; 2023用最漂亮的简历模板&#xff0c;让面试官眼前一亮。 1、菜鸟图库 个人简历模板|WORD文档模板免费下载 - 菜鸟图库 菜鸟图库除了有超多设计类素材之外&#xff0c;还有很多办公类素材&#…...

编程日记 2023/5/23 1:06:41

【CSS】元素居中总结-水平居中、垂直居中、水平垂直居中

【CSS】元素居中一、 水平居中1.行内元素水平居中&#xff08;1&#xff09;text-align2.块级元素水平居中2.1 margin&#xff08;1&#xff09;margin2.2布局&#xff08;1&#xff09;flex justify-content&#xff08;推荐&#xff09;&#xff08;2&#xff09; flexmargin…...

编程日记 2023/5/17 2:06:40

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/6/26 3:44:44

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2025/7/7 22:24:46

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2025/7/8 7:55:31

视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

编程新知 2025/7/7 8:22:46

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

编程新知 2025/6/11 3:05:02

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2025/7/7 16:28:01

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/6/21 16:18:00

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

编程新知 2025/7/4 22:31:47

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

编程新知 2025/7/8 1:32:45

C++_哈希表

本篇文章是对C学习的哈希表部分的学习分享 相信一定会对你有所帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、基础概念 1. 哈希核心思想&#xff1a; 哈希函数的作用&#xff1a;通过此函数建立一个Key与存储位置之间的映射关系。理想目标&#xff1a;实现…...

编程新知 2025/7/8 2:51:11