vue3入门特性

Vue 3 是一个用于构建用户界面的渐进式 JavaScript 框架:核心思想是通过声明式的方式来描述 UI 组件,并通过响应式系统来自动更新 UI。Vue 3 引入了许多新特性和改进,包括组合式 API(Composition API)、更好的性能和 TypeScript 支持。

Vue 3 使用原理

  1. 声明式渲染

    • Vue 允许你通过声明式的方式来描述 UI。你只需要定义数据和模板,Vue 会自动将数据渲染到模板中。
  2. 响应式系统

    • Vue 的响应式系统会自动追踪数据的变化,并在数据变化时更新 UI。Vue 3 使用 Proxy 对象来实现响应式系统,相比 Vue 2 的 Object.defineProperty,性能更好,功能更强大。
  3. 组件化

    • Vue 允许你将 UI 分解成独立的、可复用的组件。每个组件包含自己的模板、数据和逻辑。
  4. 组合式 API

    • Vue 3 引入了组合式 API,允许你通过函数来组织组件的逻辑。这种方式更灵活,更易于复用和测试。

代码实例

1. 安装 Vue 3

使用 Vue CLI 或 Vite 来创建一个 Vue 3 项目。这里我使用 Vite。

npm init vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev
2. 创建一个简单的 Vue 3 组件

src 目录下创建一个新的组件文件 HelloWorld.vue

<template><div><h1>{{ message }}</h1><button @click="updateMessage">Click me</button></div>
</template><script setup>
import { ref } from 'vue';const message = ref('Hello, Vue 3!');function updateMessage() {message.value = 'You clicked the button!';
}
</script><style scoped>
h1 {color: #42b983;
}
</style>
3. 使用组件

src/App.vue 中使用 HelloWorld 组件:

<template><div id="app"><HelloWorld /></div>
</template><script setup>
import HelloWorld from './components/HelloWorld.vue';
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
4. 运行项目

在终端中运行以下命令来启动开发服务器:

npm run dev

打开浏览器访问 http://localhost:3000

详细说明

  1. 声明式渲染

    • HelloWorld.vue 中,我们使用模板语法 {{ message }} 来绑定数据 message。Vue 会自动将 message 的值渲染到模板中。
  2. 响应式系统

    • 我们使用 ref 函数创建了一个响应式数据 message。当 message 的值发生变化时,Vue 会自动更新 UI。
  3. 组件化

    • 我们将 UI 分解成独立的组件 HelloWorld,并在 App.vue 中使用它。每个组件包含自己的模板、数据和逻辑。
  4. 组合式 API

    • 我们使用组合式 API(refsetup)来组织组件的逻辑。ref 创建了一个响应式数据,setup 函数是组件的入口点,用于初始化数据和定义方法。
      在使用 Vue 3 创建项目时,通常会有一个标准的目录结构。这个结构有助于组织代码,使项目更易于维护和扩展。以下是一个典型的 Vue 3 项目目录结构及其各个部分的作用:

典型的 Vue 3 项目目录结构

my-vue-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── views/
│   │   └── Home.vue
│   ├── App.vue
│   ├── main.js
│   └── router.js
├── .gitignore
├── index.html
├── package.json
├── README.md
├── vite.config.js
└── yarn.lock / package-lock.json

各个目录和文件的作用

  1. node_modules/

    • 作用:存放项目的所有依赖包。这个目录由包管理器(如 npm 或 yarn)自动生成和管理。
  2. public/

    • 作用:存放静态资源,这些资源不会被 Webpack 处理,直接复制到最终的构建目录。
    • favicon.ico:网站的图标。
    • index.html:项目的入口 HTML 文件。Vue CLI 会在构建时自动注入生成的 JavaScript 和 CSS 文件。
  3. src/

    • 作用:存放项目的源代码。
    • assets/:存放静态资源,如图片、字体等。这些资源会被 Webpack 处理。
      • logo.png:示例图片文件。
    • components/:存放 Vue 组件。
      • HelloWorld.vue:示例组件文件。
    • views/:存放视图组件,通常用于路由。
      • Home.vue:示例视图文件。
    • App.vue:根组件,所有其他组件都是这个组件的子组件。
    • main.js:项目的入口文件,创建 Vue 实例并挂载到 DOM。
    • router.js:路由配置文件(如果使用 Vue Router)。
  4. .gitignore

    • 作用:指定哪些文件和目录不应该被 Git 版本控制系统追踪。
  5. index.html

    • 作用:项目的入口 HTML 文件。与 public/index.html 类似,但通常用于开发环境。
  6. package.json

    • 作用:项目的配置文件,包含项目的基本信息、依赖包、脚本等。
  7. README.md

    • 作用:项目的说明文件,通常用于描述项目的用途、安装和使用方法。
  8. vite.config.js

    • 作用:Vite 的配置文件,用于配置项目的构建和开发环境。
  9. yarn.lock / package-lock.json

    • 作用:锁定依赖包的版本,确保在不同环境中安装的依赖包版本一致。

代码示例

以下是一些关键文件的示例代码:

src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';createApp(App).use(router).mount('#app');
src/App.vue
<template><div id="app"><router-view></router-view></div>
</template><script>
export default {name: 'App',
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
src/router.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';const routes = [{path: '/',name: 'Home',component: Home,},
];const router = createRouter

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

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

相关文章

NSSCTF中24网安培训day2中web题目

[SWPUCTF 2021 新生赛]ez_unserialize 这道题目考察php反序列化的知识点 打开题目&#xff0c;发现没有提示&#xff0c;我们试着用御剑扫描目录文件&#xff0c;发现存在robots.txt的文件 接着访问这个文件&#xff0c;发现是一段php反序列化代码&#xff0c;我们需要进行序…

论文翻译:通过云计算对联网多智能体系统进行预测控制

通过云计算对联网多智能体系统进行预测控制 文章目录 通过云计算对联网多智能体系统进行预测控制摘要前言通过云计算实现联网的多智能体控制系统网络化多智能体系统的云预测控制器设计云预测控制系统的稳定性和一致性分析例子结论 摘要 本文研究了基于云计算的网络化多智能体预…

【常见开源库的二次开发】基于openssl的加密与解密——Base58比特币钱包地址——算法分析(三)

目录&#xff1a; 目录&#xff1a; 一、base58(58进制) 1.1 什么是base58&#xff1f; 1.2 辗转相除法 1.3 base58输出字节数&#xff1a; 二、源码分析&#xff1a; 2.1源代码&#xff1a; 2.2 算法思路介绍&#xff1a; 2.2.1 Base58编码过程&#xff1a; 2.1.2 Base58解码过…

Leetcode—146. LRU 缓存【中等】(shared_ptr、unordered_map、list)

2024每日刷题&#xff08;143&#xff09; Leetcode—146. LRU 缓存 先验知识 list & unordered_map 实现代码 struct Node{int key;int value;Node(int key, int value): key(key), value(value) {} };class LRUCache { public:LRUCache(int capacity): m_capacity(capa…

实战案例:用百度千帆大模型API开发智能五子棋

前随着人工智能技术的迅猛发展&#xff0c;各种智能应用层出不穷。五子棋作为一款经典的棋类游戏&#xff0c;拥有广泛的爱好者。将人工智能技术与五子棋结合&#xff0c;不仅能提升游戏的趣味性和挑战性&#xff0c;还能展现AI在复杂决策问题上的强大能力。在本篇文章中&#…

Elasticsearch:将Logstash日志存到elasticsearch中

配置Logstash # cat syslog02.conf #filename:syslog02.conf #注意这个是要用#号注释掉 input{file{path > ["/var/log/*.log"]} } output{elasticsearch {#建议将搜索引擎不要和应用部署到一台服务器&#xff0c;我们介绍就同台服务器hosts > ["192.168…

habase集群安装

解压到/opt/softs目录 tar -zxvf hbase-2.4.11-bin.tar.gz -C /opt/softs/ 改名 mv hbase-2.4.11/ hbase2.4.11 配置环境变量 修改/etc/profile vim /etc/profile 添加 #HBASE_HOME export HBASE_HOME/opt/softs/hbase2.4.11 export PATH$PATH:$HBASE_HOME/bin 修改其中的…

怎么把自己写的组件发布到npm官方仓库??

一.注册npm账号 npm官网 1.注册npm 账号 2.登陆 3.登陆成功 二.搭建一个vue 项目 具体步骤参考liu.z Z 博客 或者初始化一个vue项目 vue create XXX &#xff08;工程名字&#xff09;运行代码 npm run serve三.组件封装 1.在src文件下建一个package文件&#xff0…

深度学习计算机视觉中, 多尺度特征和上下文特征的区别是?

在深度学习和计算机视觉中&#xff0c;多尺度特征和上下文特征都是用来捕捉和理解图像中复杂模式和关系的重要概念&#xff0c;但它们的侧重点有所不同。 多尺度特征 (Multi-scale Features) 多尺度特征是指在不同尺度上对图像进行特征提取&#xff0c;以捕捉不同尺度的物体特…

借助 Aspose.Words,在 C# 中将 Word 转换为 JPG

有时我们需要将 Word 文档转换为图片&#xff0c;因为 DOC 或 DOCX 文件在不同设备上的显示可能会有所不同&#xff0c;但图像&#xff08;例如 JPG 格式&#xff09;在任何地方看起来都一样。 Aspose.Words 是一种高级Word文档处理API&#xff0c;用于执行各种文档管理和操作…

基于深度学习的语音识别

基于深度学习的语音识别技术利用深度学习模型将语音信号转换为文本。这项技术在智能助理、自动字幕生成、电话客服系统、语音翻译等领域有着广泛的应用。以下是对这一领域的系统介绍&#xff1a; 1. 任务和目标 语音识别的主要任务和目标包括&#xff1a; 语音转文本&#x…

【OrangePi AIpro】: 探索AI加成的开源硬件魅力

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 Orange Pi: 探索开源硬件的魅力引言Orange Pi概述OrangePi AIPro产品介绍试用体…

UDP传输文件和FTP传输文件

目录 UDP&#xff08;用户数据报协议&#xff09;: 实例代码&#xff1a; DatagramSocket&#xff1a; DatagramPacket&#xff1a; FTP&#xff08;File Transfer Protocol&#xff0c;文件传输协议&#xff09; 实例代码&#xff1a; UDP&#xff08;用户数据报协议&…

—张pdf怎么分割成多页,怎么把一个pdf分割

在数字化时代&#xff0c;pdf文件已经成为我们工作和生活中不可或缺的一部分。然而&#xff0c;有时候我们可能会遇到需要将一张pdf文件分割成多页的情况。无论是为了便于分享&#xff0c;还是为了满足特定的文档格式要求&#xff0c;这个任务都可能变得相当棘手。但别担心&…

zookeeper+kafka消息队列群集部署

一、消息队列 1.消息队列 消息是应用间传送的数据 消息队列是应用见的通信方式&#xff0c;消息发送后立即返回&#xff0c;由消息系统确保消息可靠传递。消息发布者只管把消息发布到 MQ 中而不用管谁来取&#xff0c;消息使用者只管从 MQ 中取消息而不管是谁发布的。这样发…

设计模式学习(二)工厂模式——抽象工厂模式+注册表

设计模式学习&#xff08;二&#xff09;工厂模式——抽象工厂模式注册表 前言使用简单工厂改进使用注册表改进参考文章 前言 在上一篇文章中我们提到了抽象工厂模式初版代码的一些缺点&#xff1a;①客户端违反开闭原则②提供方违反开闭原则。本文将针对这两点进行讨论 使用…

快速安装miniconda3和熟悉conda基本的操作

快速安装miniconda3和熟悉conda基本的操作 一、安装miniconda3 参考miniconda3官方网站 https://docs.anaconda.com/miniconda/安装环境 mkdir -p ~/miniconda3 wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh -O ~/miniconda3/miniconda.sh…

CSS-0_3 CSS和单位

文章目录 CSS的值和单位属性值长度单位CSS和绝对单位CSS和相对单位百分比em & rem视口 颜色单位 碎碎念 CSS的值和单位 我们知道&#xff0c;CSS是由属性和属性值所组成的表 随着CSS的发展&#xff0c;属性不说几千也有几百&#xff0c;我从来不支持去背诵所有的可能性。…

昇思25天学习打卡营第22天|基于MindSpore的红酒分类实验

基于MindSpore的红酒分类实验 K近邻算法实现红酒聚类 1、实验目的 了解KNN的基本概念&#xff1b;了解如何使用MindSpore进行KNN实验。 2、K近邻算法原理介绍 K近邻算法&#xff08;K-Nearest-Neighbor, KNN&#xff09;是一种用于分类和回归的非参数统计方法&#xff0c;…

WPF 手撸插件 一

1、本文主要使不适用第三方工具&#xff0c;纯手工的WPF主项目加载另一个WPF的项目&#xff0c;这里我们加载的是*.exe。 2、项目结构如下图。AbstractionLayer用于创建插件的接口。WPFIPluginDemo是主程序。WpfPlugin3是要加载的插件程序。 3、 AbstractionLayer中添加接口IP…