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

Vue｜初识Vue

news 文章来源：https://blog.csdn.net/weixin_42794881/article/details/129004490 2024/11/29 5:37:08

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

spring实现AOP

文章目录前言一、AOP的底层实现原理二、AOP的两种开发模式1.使用xml配置文件1.1 添加AOP依赖1.2 创建UserService1.3创建UserServiceImpl1.4创建通知类1.5 创建applicationContext.xml&#xff08;添加aop约束&#xff09;1.6 测试2.使用注解开发2.1 创建bean.xml文件配置注解方…...

编程日记 2023/5/14 8:15:07

neovim搭建cpp环境

文章目录Windowns下NeoVim搭建cpp环境NeoVim安装插件vim-plugindentLinevim-airlinectagstagbarcoc.vimWindowns下NeoVim搭建cpp环境 在开发过程中习惯在DIE环境中使用vim作为编辑器&#xff0c;在单独的编辑器也常使用gvim图形化编辑器。最近看到NeoVim的特性及兼容性方面不输…...

编程日记 2023/5/29 8:52:08

SpringBoot AES加密 PKCS7Padding 模式

AES 简介&#xff1a;DES 全称为Data Encryption Standard&#xff0c;即数据加密标准&#xff0c;是一种使用密钥加密的块算法&#xff0c;1977年被美国联邦政府的国家标准局确定为联邦资料处理标准&#xff08;FIPS&#xff09; AES 密码学中的高级加密标准&#xff08;Advan…...

编程日记 2023/4/17 10:32:37

按键输入驱动

目录 一、硬件原理 二、添加设备树 1、创建pinctrl 2、创建节点 3、检查 编译复制 三、修改工程模板​编辑 四、驱动编写 1、添加keyio函数 2、添加调用 3、驱动出口函数添加释放 4、添加原子操作 5、添加两个宏定义 6、初始化原始变量 7、打开操作 8、读操作 总体代…...

编程日记 2023/5/12 9:32:48

2023年第七周总周结 | 开学倒数第三周

为什么要做周总结&#xff1f; 1.避免跳相似的坑 2.客观了解上周学习进度并反思&#xff0c;制定可完成的下周规划 一、上周问题解决情况 晚上熬夜导致第二天学习状态不好 这周熬夜一天&#xff0c;晚上帮亲戚修手机到22:30&#xff0c;可能是晚上自己的事什么都没做&#xff…...

编程日记 2023/5/17 2:07:44

Springboot扫描注解类

Springboot扫描注解类的入口在AbstractApplicationContext的refresh中&#xff0c;对启动步骤不太了解的&#xff0c;可参考https://blog.csdn.net/leadseczgw01/article/details/128930925BeanDefinitionRegistryPostProcessor接口有多个实现类&#xff0c;扫描Controller、Se…...

编程日记 2023/5/26 22:30:38

Apache日志分析器

您的Apache HTTP服务器生成的日志数据是信息的宝库。使用这些信息&#xff0c;您可以判断您服务器的使用情况、找出漏洞所在&#xff0c;并设法改进服务器结构和整体性能。审核您的Apache日志可在以下情况派上用场&#xff0c;其中包括&#xff1a;识别和纠正频繁出现的错误以增…...

编程日记 2023/5/12 2:23:22

啪，还敢抛出异常

&#x1f649; 作者简介&#xff1a; 全栈领域新星创作者 &#xff1b;天天被业务折腾得死去活来的同时依然保有对各项技术热忱的追求&#xff0c;把分享变成一种习惯&#xff0c;再小的帆也能远航。 &#x1f3e1; 个人主页&#xff1a;xiezhr的个人主页 前言 去年又重新刷了…...

编程日记 2023/5/12 2:25:21

Apache JMeter 5.5 下载安装以及设置中文教程

Apache JMeter 5.5 下载安装以及设置中文教程JMeter下载Apache JMeter 5.5配置环境变量查看配置JDK配置JMeter环境变量运行JMeter配置中文版一次性永久设置正文JMeter 下载Apache JMeter 5.5 官方网站&#xff1a;Apache JMeter 官网 版本介绍&#xff1a; 版本中一个是Bina…...

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

string类模拟实现

了解过string常用接口后&#xff0c;接下来的任务就是模拟实现string类。 目录 VS下的string结构 默认成员函数和简单接口 string结构 c_str()、size()、capacity()、clear()、swap() 构造函数 拷贝构造函数 赋值重载 析构函数 访问及遍历 容量操作 reserve resize …...

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

萍乡企业网站制作/seo收录查询工具

performance.memory jsHeapSizeLimit js内存使用大小限制 totalJSHeapSize js总内存 usedJSHeapSize js已使用内存 复制代码 注&#xff1a; usedJSHeapSize表示所有被使用的js堆栈内存&#xff1b; totalJSHeapSize表示当前js堆栈内存总大小&#xff0c;这表示usedJSHeapSize…...

编程日记 2024/11/29 4:52:35

哈尔滨手机网站制作/泰安seo网络公司

标识符标识符是用于给java程序中的变量、类、方法、包等命名的符号。标识符需要遵守一定的规则&#xff1a;1&#xff09;标识符必须以字母&#xff08;A-Z和a-z&#xff09;、数字&#xff08;0-9&#xff09;、下划线“_”、美元符号“$”组成。 2&#xff09;标识符不能以数…...

编程日记 2024/11/29 3:26:21

临朐县哪里有做网站的/网站优化包括哪些内容

进程间的通信&#xff1a;传递一些变量来相互沟通&#xff1b; #管道 #有名管道 #信号量 #信号 #共享内存 #消息队列 #套接字 # 管道( pipe )&#xff1a;管道是一种半双工的通信方式&#xff0c;数据只能单向流动&#xff0c;而且只能在具有亲缘关系的进程间使用。进程的亲缘关…...

编程日记 2024/11/28 23:02:42

改善网站建设/如何建网站不花钱

我有一长串用户输入,并希望将它们存储在一个对象中,而不是用HTML拼写出来.我想将这些值绑定到另一个存储用户/客户数据的对象.由于其简单性和功能性,优选使用ngModel.谁知道我怎么能做到这一点&#xff1f;以下示例(不工作).Component({template: NgModel Example{{ input.labe…...

编程日记 2024/11/28 22:34:32

网站开发南城科技大厦/百度指数在线查询小程序

每个人安装路径环境可能会存在不一样&#xff0c;仅供参考12514&#xff1a;存在路径不正确&#xff0c;下面是我的路径 &#xff0c;其中 D:\hff\install\Oracle\ 是安装的路径&#xff0c;配置时 注意小括号的问题&#xff0c;下方红色部分是修改配置的路径。配置完成后&…...

编程日记 2024/11/28 20:17:37

建什么网站好/优化推广网站怎么做

程序功能&#xff1a;在图像中入椒盐噪点 程序&#xff1a; // learn_salt.cpp : 定义控制台应用程序的入口点。 //#include "stdafx.h" #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp>//椒盐噪点 void salt(cv::Mat &…...

编程日记 2024/11/28 19:18:06