Vue入门简介（带你打开Vue的大门）

目录

前言

一、Vue简介

1. 什么是Vue

2.  Vue的应用场景

3. Vue的作用（重要性）

4. 什么是MVVM模式

5.  开源库网址

二、Vue入门使用

1. 基础使用步骤

1.1 引入Vue.js

1.2 创建Vue实例

1.3 编写Vue模板

1.4 数据绑定与指令

1.5 调用Vue方法和生命周期钩子

2. Vue的优势

2.1 原生

代码

效果

2.2 Vue编写

代码1

效果1

3. 注意：

三、Vue的生命周期

1. 什么是Vue的生命周期

 2.  Vue生命周期图解

3. 案例演示

代码

效果

前言

        前面几期博客和各位老铁分享的都是有关SpringMVC的知识，今天给大家带来一点不一样的东西与大家分享，今天由我带领大家一起来打开Vue的大门，一起来领略这扇门后的精彩吧。

一、Vue简介

1. 什么是Vue

        Vue（读作"view"）是一种流行的前端 JavaScript 框架。它被用于构建用户界面，特别是单页面应用程序（SPA）。Vue 的目标是通过简单的 API 和响应式数据绑定，使开发者能够轻松地构建交互性强、灵活性大的 Web 应用。

        Vue 与其他框架（如Angular和React）相比，具有更小巧、易学易用的特点。它采用了组件化的方式，使得开发者可以将页面拆分为独立、可复用的组件，从而提高开发效率。Vue 还提供了强大的指令系统、条件渲染、列表渲染、事件处理等功能，使得开发者可以更轻松地处理用户交互和渲染逻辑。

        

官网：https://cn.vuejs.org/

Vue作者：尤雨溪/中国无锡

  

  前后端分离 React

2.  Vue的应用场景

Vue的应用场景
应用场景说明
单页面应用（SPA）Vue 提供了构建单页面应用程序的工具和技术，通过使用 vue-router 实现前端路由管理，可以方便地创建流畅的页面切换效果，以及根据不同的路由加载相应的组件。这使得 Vue 成为开发单页面应用的理想选择。
前端组件库Vue 的组件化开发模式使其非常适合构建前端组件库或 UI 库。开发者可以将通用的 UI 组件封装为 Vue 组件，并提供给其他开发者使用，实现代码的复用和简化，同时提供统一的样式和特性。
快速原型开发Vue 提供了简单易用的语法和开发工具，使得在短时间内快速创建原型成为可能。通过 Vue 的模板语法、数据绑定和组件化开发，开发者可以迅速搭建出具有交互性的原型，并进行迭代和验证。
多页应用程序虽然 Vue 在单页应用方面非常出色，但它同样适用于多页应用程序。Vue 可以轻松地与现有的后端渲染应用程序集成，仅在需要增加交互性的部分使用 Vue 来提升用户体验。
移动应用开发Vue 可以与其他移动开发框架（如Cordova、React Native）结合使用，用于构建跨平台的移动应用。由于 Vue 的轻量特性和便捷的开发方式，使它成为在移动应用中构建用户界面的良好选择。

3. Vue的作用（重要性）

  1. 简洁易学：Vue 的设计理念是简单、易学易用，它提供了直观且简洁的 API 和清晰的文档，使开发者可以快速上手。Vue 的语法和概念都相对容易理解，降低了学习曲线和开发门槛。

  2. 组件化开发：Vue 的核心是组件化开发模式，它可以将页面拆分成独立的组件，每个组件有自己的模板、逻辑和样式。这种模块化的开发方式提高了代码的可维护性、可重用性和可测试性。

  3. 响应式数据绑定：Vue 采用了双向数据绑定的机制，当数据发生变化时，视图会自动更新；反之，用户的操作也会同步到数据中。这种响应式的数据绑定减少了手动DOM操作的繁琐工作，提高了开发效率。

  4. 极致性能：Vue 在性能方面进行了优化，通过虚拟DOM和diff算法，有效减少了不必要的DOM操作，提升了应用程序的渲染性能和响应性能。Vue 还提供了异步渲染、惰性更新等特性，进一步优化应用的性能。

  5. 生态系统和社区支持：Vue 拥有庞大的生态系统和广泛的社区支持，有许多第三方库和插件可供选择，涵盖各种开发需求和场景。这些工具和资源的丰富性为开发者提供了更多的选择和扩展性。

4. 什么是MVVM模式

         MVVM是一种软件架构模式，它是"Model-View-ViewModel"的缩写。它是一种用于开发用户界面的模式，常用于桌面应用程序和移动应用程序开发。

        在MVVM模式中，应用程序的结构分为三个主要部分：

  1. Model（模型）: 模型代表应用程序的数据和业务逻辑。它负责处理数据的获取、存储和处理。

  2. View（视图）: 视图是用户界面的可视化表示。它负责展示数据给用户，并接收用户的输入。

  3. ViewModel（视图模型）: 视图模型是视图和模型之间的连接器。它的主要职责是提供数据和命令给视图，并处理视图的交互操作。它通过数据绑定机制，将视图展示的数据与模型的数据进行绑定。

        MVVM的关键思想是将应用程序的状态和行为从视图中抽离出来，将其封装到视图模型中。这种分离使得视图和模型可以独立进行开发和测试，并且可以更好地实现逻辑复用。

5.  开源库网址

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

示例

二、Vue入门使用

1. 基础使用步骤

1.1 引入Vue.js

在HTML文件中，通过使用CDN链接或本地下载，将Vue.js库引入到项目中。例如：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

1.2 创建Vue实例

在JavaScript文件中，创建一个Vue实例，通过传入选项对象来配置Vue的行为和数据。例如：

var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}
});

1.3 编写Vue模板

在HTML文件中，使用Vue的模板语法编写UI界面，并通过数据绑定将数据展示在页面上。例如：

<div id="app"><p>{{ message }}</p>
</div>

1.4 数据绑定与指令

可以使用双花括号（{{ }}）进行数据插值，也可以使用v-bind指令将数据绑定到HTML属性上，还可以使用v-on指令绑定事件监听器。例如：

<div id="app"><p>{{ message }}</p><input v-bind:value="message" v-on:input="message = $event.target.value">
</div>

1.5 调用Vue方法和生命周期钩子

可以在Vue实例中定义方法，并使用v-on指令调用它们，也可以使用生命周期钩子来执行特定的操作。例如：

var app = new Vue({el: '#app',data: {message: 'Hello Vue!'},methods: {changeMessage: function() {this.message = 'New message!';}},created: function() {console.log('Vue instance created');}
});

2. Vue的优势

2.1 原生

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><title>vue入门</title></head><body><div id="app">{{msg}}<span id="show"></span><input id="content"/><button type="button" onclick="tan()">弹屏</button></div><script type="text/javascript">new Vue({el:"#app",data(){return {msg:'hello vue 你好啊'}}})function tan(){// 获取输入框的值var content=$("#content").val();// 将输入框的值赋值给span标签$("#show").text(content);}</script></body>
</html>

效果

2.2 Vue编写

代码1

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><title>vue入门</title></head><body><div id="app">{{msg}}<input v-model="msg" /></div><script type="text/javascript">new Vue({el:"#app",data(){return {msg:'hello vue 你好啊'}}})</script></body>
</html>

效果1

这是运用Vue模拟的数据绑定效果，当我们的输入框输入什么是则显示什么，在我们后续的项目中我们可以将它运用到项目中达到数据库一发生变动则页面显示也随之改变，反之一样。

3. 注意：

v-model：数据双向绑定，边界中的变量，再vue实例中的定义变量。

:value/V-bind:value：从vue实例中的定义变量取出，用到边界中。

三、Vue的生命周期

1. 什么是Vue的生命周期

        Vue的生命周期是指在Vue实例创建、挂载、更新和销毁过程中，Vue提供的一系列钩子函数的执行顺序和时机。Vue的生命周期可以分为创建阶段、挂载阶段、更新阶段和销毁阶段。

  1. 创建阶段：

    • beforeCreate：在Vue实例被创建之前调用，此时实例的data和methods还未初始化。
    • created：在Vue实例创建完成后调用，此时实例的data和methods已经初始化，但DOM还未生成。

  2. 挂载阶段：

    • beforeMount：在Vue实例挂载到DOM之前调用，此时编译模板生成了虚拟DOM。
    • mounted：在Vue实例挂载到DOM后调用，此时实例的模板已经渲染成实际的DOM元素。

  3. 更新阶段：

    • beforeUpdate：在数据更新之前调用，此时虚拟DOM已经重新渲染但还未应用到实际的DOM上。
    • updated：在数据更新并将更改应用到DOM后调用，此时DOM已经更新完成。

  4. 销毁阶段：

    • beforeDestroy：在Vue实例销毁之前调用，此时实例还完全可用。
    • destroyed：在Vue实例销毁之后调用，此时实例及其相关的事件监听器和定时器都已被移除。

总之，在每个阶段，你可以在对应的生命周期钩子函数中执行一些特定的操作，比如数据的初始化、异步请求的发送和取消、DOM的操作等。了解Vue的生命周期可以帮助你更好地控制和管理Vue实例的行为。

 2.  Vue生命周期图解

3. 案例演示

代码


<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script></head><body><div id="d1"><div>number:{{number}}</div><div>{{detail()}}</div><input type="text" v-model="number" /></div><script>var data = {number:999,msg:null};var vm = new Vue({el:'#d1',data:data,methods:{detail:function(){return "使用方法来插值："+this.msg;}},beforeCreate:function(){console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')           console.log(this.msg)//undefinedconsole.log(document.getElementsByClassName("myp")[0])//undefined},created:function(){console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')this.msg+='!!!'console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')},beforeMount:function(){console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')this.msg+='@@@'console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')console.log(document.getElementsByClassName("myp")[0])//undefinedconsole.log('接下来开始render，渲染出真实dom')},// render:function(createElement){//     console.log('render')//     return createElement('div','hahaha')// },mounted:function(){ console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')console.log(document.getElementsByClassName("myp")[0])console.log('可以在这里操作真实dom等事情...')//    this.$options.timer = setInterval(function () {//        console.log('setInterval')//         this.msg+='!'  //    }.bind(this),500)},beforeUpdate:function(){//这里不能更改数据，否则会陷入死循环console.log('beforeUpdate:重新渲染之前触发')console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')         },updated:function(){//这里不能更改数据，否则会陷入死循环console.log('updated:数据已经更改完成，dom也重新render完成')},beforeDestroy:function(){console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')// clearInterval(this.$options.timer)},destroyed:function(){console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')}});</script></body>
</html>

效果

在输入框改编前

在输入框改编后

本期关于Vue的博客分享就到此结束，希望老铁们能三连加关注支持一波

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/134952.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

flutter聊天界面-TextField输入框buildTextSpan实现@功能展示高亮功能

flutter聊天界面-TextField输入框buildTextSpan实现@功能展示高亮功能

flutter聊天界面-TextField输入框buildTextSpan实现功能展示高亮功能 最近有位朋友讨论的时候&#xff0c;提到了输入框的高亮展示。在flutter TextField中需要插入特殊样式的标签&#xff0c;比如&#xff1a;“请 张三 回答一下”&#xff0c;这一串字符在TextField中输入&a…
阅读更多...
群辉 Synology NAS Docker 安装 RustDesk-server 自建服务器只要一个容器

群辉 Synology NAS Docker 安装 RustDesk-server 自建服务器只要一个容器

from https://blog.zhjh.top/archives/M8nBI5tjcxQe31DhiXqxy 简介 之前按照网上的教程&#xff0c;rustdesk-server 需要安装两个容器&#xff0c;最近想升级下版本&#xff0c;发现有一个新镜像 rustdesk-server-s6 可以只安装一个容器。 The S6-overlay acts as a supervi…
阅读更多...
NSS [HNCTF 2022 WEEK2]ohmywordpress（CVE-2022-0760）

NSS [HNCTF 2022 WEEK2]ohmywordpress（CVE-2022-0760）

NSS [HNCTF 2022 WEEK2]ohmywordpress&#xff08;CVE-2022-0760&#xff09; 题目描述&#xff1a;flag在数据库里面。 开题&#xff1a; 顺着按钮一直点下去会发现出现一个按钮叫安装WordPress 安装完之后的界面&#xff0c;有一个搜索框。 F12看看network。 又出现了这个…
阅读更多...
day22集合01

day22集合01

1.Collection集合 1.1数组和集合的区别【理解】 相同点 都是容器,可以存储多个数据 不同点 数组的长度是不可变的,集合的长度是可变的 数组可以存基本数据类型和引用数据类型 集合只能存引用数据类型,如果要存基本数据类型,需要存对应的包装类 1.2集合类体系结构【理解】…
阅读更多...
【Axure原型素材】扫一扫

【Axure原型素材】扫一扫

今天和粉丝们免费分享扫一扫的原型素材&#xff0c;"扫一扫"是一项常见的移动应用功能&#xff0c;通常通过手机或平板电脑上的摄像头来扫描二维码或条形码以实现各种功能。下面是和大家分享扫一扫的常用素材~~~ 【原型效果】 【Axure原型素材】扫一扫 【原型预览】…
阅读更多...
【环境配置】基于Docker配置Chisel-Bootcamp环境

【环境配置】基于Docker配置Chisel-Bootcamp环境

文章目录 Chisel是什么Chisel-Bootcamp是什么基于Docker配置Chisel-Bootcamp官网下载Docker安装包Docker换源启动Bootcamp镜像常用docker命令 可能产生的问题 Chisel是什么 Chisel是Scala语言的一个库&#xff0c;可以由Scala语言通过import引入。 Chisel编程可以生成Verilog代…
阅读更多...
IDEA创建完Maven工程后，右下角一直显示正在下载Maven插件

IDEA创建完Maven工程后，右下角一直显示正在下载Maven插件

原因&#xff1a; 这是由于新建的Maven工程&#xff0c;IDEA会用它内置的默认的Maven版本&#xff0c;使用国外的网站下载Maven所需的插件&#xff0c;速度很慢 。 解决方式&#xff1a; 每次创建 Project 后都需要设置 Maven 家目录位置&#xff08;就是我们自己下载的Mav…
阅读更多...
嵌入式：驱动开发 Day2

嵌入式：驱动开发 Day2

作业&#xff1a;字符设备驱动&#xff0c;完成三盏LED灯的控制 驱动代码&#xff1a; mychrdev.c #include <linux/init.h> #include <linux/module.h> #include <linux/fs.h> #include <linux/uaccess.h> #include <linux/io.h> #include &q…
阅读更多...
Windows/Linux(命令、安装包和源码安装)平台各个版本QT详细安装教程

Windows/Linux(命令、安装包和源码安装)平台各个版本QT详细安装教程

前言 本文章主要介绍了Windows/Linux平台下&#xff0c;QT4&#xff0c;QT5&#xff0c;QT6的安装步骤。为什么要把QT版本分开介绍呢&#xff0c;因为这三个版本&#xff0c;安装步骤都不一样。Windows平台&#xff0c;QT4的Qt Creator&#xff0c;QT库和编译器是分开的&#…
阅读更多...
Android Studio 报错问题记录

Android Studio 报错问题记录

工具地址 由于之前手贱不知道点了一个什么东西更新&#xff0c;导致一个code1报错&#xff0c;后来又一通瞎比操作直接吧Android Studio弄得打不开模拟器了&#xff0c;所以我后面就全部卸载重新安装了一下&#xff0c;并把之前遇到的问题做下记录&#xff0c;可能并不适用于每…
阅读更多...
笔记1.5：计算机网络体系结构

笔记1.5：计算机网络体系结构

从功能上描述计算机网络结构 分层结构 每层遵循某个网络协议完成本层功能 基本概念 实体&#xff1a;表示任何可发送或接收信息的硬件或软件进程。 协议是控制两个对等实体进行通信的规则的集合&#xff0c;协议是水平的。 任一层实体需要使用下层服务&#xff0c;遵循本层…
阅读更多...
自定义实现简易版ArrayList

自定义实现简易版ArrayList

文章目录 1.了解什么是顺序表2.实现哪些功能3.初始化ArrayList4.实现功能接口遍历顺序表判断顺序表是否已满添加元素指定下标添加元素自定义下标不合法异常判断顺序表是否为空查找指定元素是否存在查找指定元素返回下标获取指定下标的元素顺序表为空异常修改指定下标元素的值删…
阅读更多...
Stable DIffusion 炫酷应用 | AI嵌入艺术字+光影光效

Stable DIffusion 炫酷应用 | AI嵌入艺术字+光影光效

目录 1 生成AI艺术字基本流程 1.1 生成黑白图 1.2 启用ControlNet 参数设置 1.3 选择大模型 写提示词 2 不同效果组合 2.1 更改提示词 2.2 更改ControlNet 2.2.1 更改模型或者预处理器 2.2.2 更改参数 3. 其他应用 3.1 AI光影字 本节需要用到ControlNet&#xff0c;可…
阅读更多...
手摸手系列之前端Vue实现PDF预览及打印的终极解决方案

手摸手系列之前端Vue实现PDF预览及打印的终极解决方案

前言 近期我正在开发一个前后端分离项目&#xff0c;使用了Spring Boot 和 Vue2&#xff0c;借助了国内优秀的框架 jeecg&#xff0c;前端UI库则选择了 ant-design-vue。在项目中&#xff0c;需要实现文件上传功能&#xff0c;同时还要能够在线预览和下载图片和PDF文件&#x…
阅读更多...
[golang 流媒体在线直播系统] 4.真实RTMP推流摄像头把摄像头拍摄的信息发送到腾讯云流媒体服务器实现直播

[golang 流媒体在线直播系统] 4.真实RTMP推流摄像头把摄像头拍摄的信息发送到腾讯云流媒体服务器实现直播

用RTMP推流摄像头把摄像头拍摄的信息发送到腾讯云流媒体服务器实现直播,该功能适用范围广,比如:幼儿园直播、农场视频直播, 一.准备工作 要实现上面的功能,需要准备如下设备: 推流摄像机&#xff08;监控&#xff09; 流媒体直播服务器(腾讯云流媒体服务器,自己搭建的流媒体服务…
阅读更多...
MySQL 面试题——MySQL 基础

MySQL 面试题——MySQL 基础

目录 1.什么是 MySQL&#xff1f;有什么优点&#xff1f;2.MySQL 中的 DDL 与 DML 是分别指什么&#xff1f;3.✨数据类型 varchar 与 char 有什么区别&#xff1f;4.数据类型 BLOB 与 TEXT 有什么区别&#xff1f;5.DATETIME 和 TIMESTAMP 的异同&#xff1f;6.✨MySQL 中 IN …
阅读更多...
Json-Jackson和FastJson

Json-Jackson和FastJson

狂神&#xff1a; 测试Jackson 纯Java解决日期格式化 设置ObjectMapper FastJson&#xff1a; 知乎&#xff1a;Jackson使用指南 1、常见配置 方式一&#xff1a;yml配置 spring.jackson.date-format指定日期格式&#xff0c;比如yyyy-MM-dd HH:mm:ss&#xff0c;或者具体的…
阅读更多...
线程池(重点)

线程池(重点)

1.线程池的三大方法 package com.kuang.pool;import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; //Executors工具类 三大方法 //使用线程池&#xff0c;创建线程 public class Demo01 {public static void main(String[] args) { // …
阅读更多...
Python + Jmeter 实现自动化性能压测

Python + Jmeter 实现自动化性能压测

Step01: Python脚本开发 文件路径&#xff1a;D://wl//testproject//Fone-grpc//project1//test_client.py Python 脚本作用&#xff1a; 通过 grpc 调用底层 c 的接口&#xff0c;做数据库的数据插入与查询操作&#xff0c;然后将返回的结果进行拼接与输出。 2.代码里面将…
阅读更多...
LeNet-5

LeNet-5

目录 一、知识点 二、代码 三、查看卷积层的feature map 1. 查看每层信息 ​2. show_featureMap.py 背景&#xff1a;LeNet-5是一个经典的CNN&#xff0c;由Yann LeCun在1998年提出&#xff0c;旨在解决手写数字识别问题。 一、知识点 1. iter()next() iter()&#xff1a;…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023