07 Vue3框架简介

文章目录

  • 一、Vue3简介
    • 1. 简介
    • 2. 相关网站
    • 3. 前端技术对比
    • 4. JS前端框架
    • 5. Vue核心内容
    • 6. 使用方式
  • 二、基础概念
    • 1. 创建一个应用
    • 2. 变量双向绑定(v-model)
    • 3. 条件控制(v-if)
    • 4. 数组遍历(v-for)
    • 5. 绑定事件(v-on)
    • 6. 表单
  • 三、AJAX交互


一、Vue3简介

1. 简介

Vue是一个流行的JavaScript框架,适合用于构建交互式的Web界面。
Vue的核心特性是响应式数据、组件系统、模板语法和虚拟DOM。
Vue提供了许多有用的工具和库,例如路由、状态管理、指令、过滤器、过渡效果等。

Vue3相关技术栈

  • ECMAScript 6 (ES6) : 提高 JavaScript 的可读性和可维护性,引入了类(Class)的概念
  • Node.js:跨平台的 JavaScript 运行环境
  • npm:Node.js 的默认包管理器
  • vite:前端项目构建工具
  • Router:用于在 Vue 应用程序中实现页面间的导航和路由管理
  • Pinia:通过状态管理实现组件数据传递
  • Axios:在 Vue.js 应用中处理 HTTP 请求
  • Element-plus:基于 Vue 3 的开源 UI 组件库

2. 相关网站

Vue 3 官方中文文档
Vue3 教程

3. 前端技术对比

在这里插入图片描述

4. JS前端框架

  • jQuery:优点是简化了DOM操作,缺点是频繁操作DOM,影响前端性能。
  • Angular:将后台的MVC模式搬到了前端,增加了模块化开发的理念;对后台程序员友好,对前端程序员不太友好。
  • React:在内存中模拟DOM操作,有效的提升了前端渲染效率;缺点是使用复杂。
  • Vue:综合了Angular(模块化)和React(虚拟DOM)的优点。

5. Vue核心内容

在这里插入图片描述

6. 使用方式

  • 通过 Vite 的构建
    项目使用基于 Vite 的构建设置,并允许使用 Vue 的单文件组件 (SFC)。

  • 通过 CDN 使用 Vue
    通过 CDN 使用 Vue 时,不涉及“构建步骤”。这使得设置更加简单。但是无法使用单文件组件 (SFC) 语法。

二、基础概念

1. 创建一个应用

<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><meta charset="UTF-8"><link rel="icon" href="data:;base64,="><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script>
</head>
<body><!-- 在页面声明一个将要被Vue控制的DOM区域 --><div id="app"></div>
</body>
<script>// 选项式 API 风格const app = {// data() 返回的属性将会成为响应式的状态// 并且暴露在 `this` 上data() {return {count: 0}},// methods 是一些用来更改状态与触发更新的函数// 它们可以在模板中作为事件处理器绑定methods: {increment() {this.count++}},// 生命周期钩子,会在组件生命周期的各个不同阶段被调用// 例如这个函数就会在组件挂载完成后被调用mounted() {// `this` 指向当前组件实例console.log(`The initial count is ${this.count}.`)},// Vue 组件的模板template : `<button @click="increment">Count is: {{ count }}</button>`}// 通过Vue框架,使挂载的id可以使用app内定义的变量和方法Vue.createApp(app).mount('#app')
</script>
</html>

2. 变量双向绑定(v-model)

  • 使用 v-model 指令实现表单数据双向绑定
<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><meta charset="UTF-8"><link rel="icon" href="data:;base64,="><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script>
</head>
<body><div id="app"><input type="text" v-model="message"><p>{{ message }}</p></div>
</body>
<script>const app = {data() {return {message: ''}}}Vue.createApp(app).mount('#app')
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

3. 条件控制(v-if)

  • 使用 v-if 指令条件性地渲染元素
<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><meta charset="UTF-8"><link rel="icon" href="data:;base64,="><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script>
</head>
<body><div id="app"><input type="text" v-model="num"><p v-if="num>0">num 大于 0</p><p v-else-if="num==0">num 等于 0</p><p v-else>num 小于 0</p></div>
</body>
<script>const app = {data() {return {num: 0}}}Vue.createApp(app).mount('#app')
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

4. 数组遍历(v-for)

  • 使用 v-for 指令循环渲染元素
<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><meta charset="UTF-8"><link rel="icon" href="data:;base64,="><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script>
</head>
<body><div id="app"><p v-for="item in items" :key="item.id">{{ item.id }} - {{ item.text }}</p></div>
</body>
<script>const app = {data() {return {items: [{ id: 1, text: 'test 1' },{ id: 2, text: 'test 2' },]}}}Vue.createApp(app).mount('#app')
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

5. 绑定事件(v-on)

  • 使用 v-on 指令在 HTML 元素上绑定事件监听器
  • v-on 指令可以缩写为 @ 符号
<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><meta charset="UTF-8"><link rel="icon" href="data:;base64,="><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script>
</head>
<body><div id="app"><button v-on:click="count+=1">Count is: {{ count }}</button></div>
</body>
<script>const app = {data() {return {count: 0}}}Vue.createApp(app).mount('#app')
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

6. 表单

<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><meta charset="UTF-8"><link rel="icon" href="data:;base64,="><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script>
</head>
<body>
<div id="app"><p>单行文本框:</p><input v-model="data.message1" placeholder="请输入……"><p>输入内容: {{ data.message1 }}</p><p>多行文本框:</p><textarea v-model="data.message2" placeholder="请输入……"></textarea><p>输入内容: {{ data.message2 }}</p>
</div>
</body>
<script>const app = {data() {return {data : {message1: '',message2: ''}}}}Vue.createApp(app).mount('#app')
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

三、AJAX交互

推荐使⽤Axios来完成AJAX请求。

<!DOCTYPE html>
<html lang="en">
<head><title>Test</title><meta charset="UTF-8"><link rel="icon" href="data:;base64,="><script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.2/axios.js"></script>
</head>
<body>
<div id="app"><div><p>姓名: <input type="text" v-model="data.baseAccountQueryVo.accountName"></p><button @click="submitForm">查询</button></div><hr><div><div v-for="item in items" :key="item.id"><div>姓名: {{ item.accountName }}</div><div>电话: {{ item.mobileNum }}</div></div></div>
</div>
</body>
<script>const app = {data() {return {items: [],data: {"baseAccountQueryVo": {}}}},methods: {submitForm() {axios.post("http://127.0.0.1:8081/test/api/baseAccount/list",this.data).then(response => {this.items = response.data.baseAccountQueryVos;}).catch(error => {console.log(error);});}}}Vue.createApp(app).mount('#app')
</script>
</html>

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

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

相关文章

ubuntu22.04上安装charles-proxy

在 Ubuntu 22.04 上安装 .tar.gz 格式的 Charles Proxy (charles-proxy-4.6.5_amd64.tar.gz) 需要解压缩文件并运行其中的安装脚本或可执行文件。以下是具体步骤&#xff1a; 1. 下载文件 假设你已经从 Charles Proxy 官网下载了 charles-proxy-4.6.5_amd64.tar.gz 文件。 2…

182.【2023年华为OD机试真题(C卷)】敏感字段加密(字符串的分割、替换和拼接实现JavaPythonC++JS)

请到本专栏顶置查阅最新的华为OD机试宝典 点击跳转到本专栏-算法之翼:华为OD机试 🚀你的旅程将在这里启航!本专栏所有题目均包含优质解题思路,高质量解题代码,详细代码讲解,助你深入学习,深度掌握! 文章目录 【2023年华为OD机试真题(C卷)】敏感字段加密(字符串…

leetcode 38. 外观数列(medium)(优质解法)

链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 代码&#xff1a; class Solution {public String countAndSay(int n) {//要进行 n - 1 次描述才能得到结果// last 代表当前要描述的字符串String last"1";// ret 代表描述…

【Python】Python 正则表达式

正则表达式是一个特殊的字符序列&#xff0c;它能帮助你方便的检查一个字符串是否与某种模式匹配。 Python 自1.5版本起增加了re 模块&#xff0c;它提供 Perl 风格的正则表达式模式。 re 模块使 Python 语言拥有全部的正则表达式功能。 compile 函数根据一个模式字符串和可…

一、引言( C#的应用领域)

C#&#xff1a;应用领域的探索 C#&#xff0c;全名为C Sharp&#xff0c;是一种由微软开发的、面向对象的编程语言。自其2000年首次发布以来&#xff0c;C#已经成为了软件开发行业的重要一员&#xff0c;特别是在微软的技术生态系统中&#xff0c;它占据了举足轻重的地位。如今…

应用安全技术措施

目录 身份鉴别 访问控制 安全审计 剩余信息保护 通信完整性 通信保密性 抗抵赖 软件容错 身份鉴别 进阶 访问控制 进阶 安全审计 进阶 剩余信息保护 进阶 通信完整性 通信保密性 抗抵赖 软件容错 ~over~

TypeScript学习(进阶篇)

一、元组 数组合并了相同类型的对象&#xff0c;而元组&#xff08;Tuple&#xff09;合并了不同类型的对象。 元组起源于函数编程语言&#xff08;如 F#&#xff09;&#xff0c;这些语言中会频繁使用元组。 简单的例子 定义一对值分别为 string 和 number 的元组&#xf…

MES系统是什么?MES系统的功能有哪些?

在现代制造业的快速发展中&#xff0c;所有规模的企业都面临着类似的挑战&#xff1a;如何提高生产效率、确保产品质量、减少浪费、降低成本&#xff0c;同时迅速响应市场变化。而在这个过程中&#xff0c;传统企业管理往往有以下几个典型痛点&#xff1a; 纸质文件堆叠如山&a…

速盾cdn:无视cc高防

随着互联网的快速发展&#xff0c;网络攻击和安全威胁日益严重&#xff0c;高防cdn作为一种有效的防御手段&#xff0c;受到了广泛的应用。然而&#xff0c;一些攻击者常常采用CC攻击等手段来攻击目标网站&#xff0c;导致网站性能下降甚至瘫痪。为了解决这一问题&#xff0c;速…

麦肯锡产品经理问题解决流程终极指南

您是否想知道世界上最成功的产品经理如何始终如一地提供不仅满足而且超出预期的解决方案&#xff1f;秘密可能就在于世界上最负盛名的咨询公司之一麦肯锡公司所磨练的方法论。本文深入探讨了麦肯锡的问题解决流程&#xff0c;该流程专为希望提升水平的产品经理量身定制。 01. 麦…

LeetCode //C - 1004. Max Consecutive Ones III

1004. Max Consecutive Ones III Given a binary array nums and an integer k, return the maximum number of consecutive 1’s in the array if you can flip at most k 0’s. Example 1: Input: nums [1,1,1,0,0,0,1,1,1,1,0], k 2 Output: 6 Explanation: [1,1,1,0,…

五种主流数据库:基本检索功能

SQL 使用 SELECT 语句查询数据&#xff0c;本文比较五种主流数据库基本数据检索功能的实现和差异&#xff0c;包括 MySQL、Oracle、SQL Server、PostgreSQL 以及 SQLite。 &#x1f3f7;️示例表和数据初始化脚本下载。 SQL功能MySQLOracleSQL ServerPostgreSQLSQLite查询指定字…

Kafka生产环境问题总结与性能优化实践

Kafka可视化管理工具kafka-manager 安装及基本使用可参考: httos://wwwcnbloas.com/dadonaaa/o/8205302.html 线上环境规划 1. 消息丢失情况: 消

实战教学:零食百货商城小程序开发全程指导

随着移动设备的普及和互联网技术的发展&#xff0c;小程序成为越来越多人的选择&#xff0c;特别是在购物方面。开发一个零食百货商城小程序&#xff0c;可以让你在手机上随时随地购买各种零食&#xff0c;方便快捷。本文将为你提供全程指导&#xff0c;让你轻松开发一个成功的…

MySql的mvcc原理

目录 一、什么是mvcc? 二、什么是当前读,快照读? 当前读 快照读 三、mvcc实现原理 版本链 undo日志 Undo log 的用途 Read View(读视图) Read View几个属性 五、RR、RC级别下生成时机 一、什么是mvcc? mvcc全称Multi-Version Concurrency Control&#xff0c;即…

迪文屏开发保姆级教程5—表盘时钟和文本RTC显示

这篇文章要讲啥事呢&#xff1f; 本篇文章主要介绍了在DGBUS平台上使用表盘时钟和文本时钟RTC显示功能的方法。 文哥悄悄话&#xff1a; 官方开发指南PDF&#xff1a;&#xff08;不方便下载的私聊我发给你&#xff09; https://download.csdn.net/download/qq_21370051/8864…

Flowable-升级为7.0.0.M2-第一节

目录 升级jdk升级springboot到3.1.3升级数据库连接池druid-spring-boot-3-starter到1.2.20升级mybatis-plus到3.5.3.2升级flowable到7.0.0.M2 最近有些读者一直问flowable如何升级到7.0.0.M2&#xff0c;接下来我就一步步的把flowable升级到7.0.0.M2 升级jdk flowable7.x采用的…

算法导论复习(四)主方法的专题

主方法我们要记住的是什么呢&#xff1f;

浅谈矿山井下IT配电系统绝缘监测的应用

摘要&#xff1a;众所周知&#xff0c;能源作为经济发展的重要引擎&#xff0c;堪称是国民经济的命脉。采矿业一直是能源工业的重要支柱&#xff0c;我国的矿业生产主要来自井下开采&#xff0c;环境恶劣&#xff0c;就以煤矿为例&#xff0c;煤矿井下存在水、火、瓦斯、煤尘、…

C++单例模式:饿汉式、懒汉式

单例模式是什么&#xff1f; 单例模式是一种创建型的软件设计模式。通过单例模式的设计&#xff0c;使得创建的类在当前进程中只有唯一一个实例&#xff0c;并提供一个全局性的访问点&#xff0c;这样可以规避因频繁创建对象而导致的内存飙升情况。 单例模式有三个要点 私有化…