Vue3 学习教程，从入门到精通，Vue 3 安装指南及语法知识点详解（2）

Vue 3 安装指南及语法知识点详解

本文将详细介绍 Vue 3 的所有安装方式，并深入讲解 Vue 3 的语法知识点。此外，还将提供一些综合性案例，展示如何综合运用 Vue 3 的各项功能。

一、安装 Vue 3 的所有方式

Vue 3 提供了多种安装方式，以适应不同的项目需求和开发环境。以下是主要的安装方式：

1. 通过 CDN 引入

这是最简单的方式，适用于快速原型开发或学习。

步骤：

  1. 在 HTML 文件中通过 <script> 标签引入 Vue 3 的 CDN 链接。
  2. 使用 Vue 全局变量进行开发。

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Vue 3 CDN 示例</title><!-- 引入 Vue 3 CDN --><script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body><div id="app"><p>{{ message }}</p><button @click="updateMessage">点击更新消息</button></div><script>const { createApp } = Vue;createApp({data() {return {message: 'Hello Vue 3!'}},methods: {updateMessage() {this.message = '消息已更新！';}}}).mount('#app');</script>
</body>
</html>

2. 使用 NPM 安装

适用于基于模块化打包工具（如 Webpack, Vite）的项目开发。

步骤：

  1. 初始化项目：

    npm init -y

  2. 安装 Vue 3：

    npm install vue@next

  3. 安装构建工具（如 Vite）：

    npm install vite --save-dev

  4. 配置项目结构：

    • 创建 index.html, src/main.js, src/App.vue 等文件。

  5. 运行项目：

    npx vite

示例项目结构：

my-vue-app/
├── index.html
├── package.json
├── vite.config.js
└── src/├── main.js└── App.vue

3. 使用 Vue CLI

Vue CLI 是 Vue 官方的脚手架工具，适用于需要复杂配置的项目。

步骤：

  1. 全局安装 Vue CLI：

    npm install -g @vue/cli

  2. 创建新项目：

    vue create my-vue-app

  3. 选择配置选项（默认或自定义）。

  4. 进入项目目录并运行：

    cd my-vue-app
npm run serve

4. 使用 Vite 创建 Vue 3 项目

Vite 是一个更快的构建工具，官方推荐用于 Vue 3 项目。

步骤：

  1. 使用 Vite 创建 Vue 3 项目：

    npm init vite@latest my-vue-app -- --template vue

  2. 进入项目目录并安装依赖：

    cd my-vue-app
npm install

  3. 运行项目：

    npm run dev

5. 官方脚手架 create-vue

npm init vue@latest
# 按照提示操作

二、Vue 3 语法知识点及使用方法

1. 创建 Vue 应用

语法：

import { createApp } from 'vue';
import App from './App.vue';const app = createApp(App);
app.mount('#app');

说明：

  • createApp 用于创建 Vue 应用实例。
  • mount 方法将应用挂载到指定的 DOM 元素上。

案例代码：

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Vue 3 创建应用示例</title><script type="module" src="./src/main.js"></script>
</head>
<body><div id="app"></div>
</body>
</html>

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';createApp(App).mount('#app');

<!-- src/App.vue -->
<template><div><h1>{{ title }}</h1><p>{{ message }}</p></div>
</template><script>
export default {data() {return {title: '欢迎使用 Vue 3!',message: '这是一个 Vue 3 应用。'}}
}
</script>

2. 组件基础

语法：

<!-- MyComponent.vue -->
<template><div><h2>{{ heading }}</h2><p>{{ content }}</p></div>
</template><script>
export default {props: {heading: {type: String,required: true}},data() {return {content: '这是组件的内容。'}}
}
</script>

说明：

  • 使用 props 接收父组件传递的数据。
  • data 函数返回组件的响应式数据。

案例代码：

<!-- src/components/Greeting.vue -->
<template><div><h2>{{ greeting }}</h2><p>{{ message }}</p></div>
</template><script>
export default {props: {greeting: {type: String,required: true}},data() {return {message: '这是一个组件。'}}
}
</script>

<!-- src/App.vue -->
<template><div><Greeting greeting="你好，Vue 3!" /></div>
</template><script>
import Greeting from './components/Greeting.vue';export default {components: {Greeting}
}
</script>

3. 响应式数据

语法：

import { reactive, ref } from 'vue';const state = reactive({count: 0
});const counter = ref(0);

说明：

  • reactive 用于创建响应式对象。
  • ref 用于创建响应式引用（适用于基本类型和对象）。

案例代码：

<!-- src/components/Counter.vue -->
<template><div><h2>计数器</h2><p>当前计数: {{ count }}</p><button @click="increment">增加</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);const increment = () => {count.value++;};return {count,increment};}
}
</script>

<!-- src/App.vue -->
<template><div><Counter /></div>
</template><script>
import Counter from './components/Counter.vue';export default {components: {Counter}
}
</script>

4. 计算属性与侦听器

语法：

import { computed, watch } from 'vue';const fullName = computed(() => `${firstName.value} ${lastName.value}`);watch(fullName, (newVal, oldVal) => {console.log(`姓名从 ${oldVal} 变为 ${newVal}`);
});

说明：

  • computed 用于定义计算属性，基于依赖进行缓存。
  • watch 用于侦听数据变化，执行副作用。

案例代码：

<!-- src/components/FullName.vue -->
<template><div><h2>姓名</h2><input v-model="firstName" placeholder="名" /><input v-model="lastName" placeholder="姓" /><p>全名: {{ fullName }}</p></div>
</template><script>
import { ref, computed, watch } from 'vue';export default {setup() {const firstName = ref('');const lastName = ref('');const fullName = computed(() => `${firstName.value} ${lastName.value}`);watch(fullName, (newVal, oldVal) => {console.log(`姓名从 ${oldVal} 变为 ${newVal}`);});return {firstName,lastName,fullName};}
}
</script>

5. 生命周期钩子

语法：

import { onMounted, onUnmounted } from 'vue';export default {setup() {onMounted(() => {console.log('组件已挂载');});onUnmounted(() => {console.log('组件已卸载');});}
}

说明：

  • onMounted 在组件挂载后调用。
  • onUnmounted 在组件卸载前调用。

案例代码：

<!-- src/components/Lifecycle.vue -->
<template><div><h2>生命周期示例</h2><p>打开控制台查看生命周期钩子输出。</p></div>
</template><script>
import { onMounted, onUnmounted } from 'vue';export default {setup() {onMounted(() => {console.log('组件已挂载');});onUnmounted(() => {console.log('组件已卸载');});return {};}
}
</script>

三、综合性案例

案例 1：Todo List 应用

功能：

  • 添加待办事项
  • 删除待办事项
  • 显示待办事项列表

代码：

<!-- src/components/TodoList.vue -->
<template><div><h2>Todo List</h2><input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加待办事项" /><ul><li v-for="(todo, index) in todos" :key="index">{{ todo }}<button @click="removeTodo(index)">删除</button></li></ul></div>
</template><script>
import { ref } from 'vue';export default {setup() {const todos = ref([]);const newTodo = ref('');const addTodo = () => {if (newTodo.value.trim() !== '') {todos.value.push(newTodo.value.trim());newTodo.value = '';}};const removeTodo = (index) => {todos.value.splice(index, 1);};return {todos,newTodo,addTodo,removeTodo};}
}
</script>

<!-- src/App.vue -->
<template><div><h1>Vue 3 Todo List</h1><TodoList /></div>
</template><script>
import TodoList from './components/TodoList.vue';export default {components: {TodoList}
}
</script>

案例 2：动态表单

功能：

  • 动态添加表单字段
  • 表单验证
  • 显示提交数据

代码：

<!-- src/components/DynamicForm.vue -->
<template><div><h2>动态表单</h2><form @submit.prevent="submitForm"><div v-for="(field, index) in fields" :key="index"><input v-model="field.value" :placeholder="field.label" /><button type="button" @click="removeField(index)">删除</button></div><button type="button" @click="addField">添加字段</button><button type="submit">提交</button></form><div v-if="submittedData"><h3>提交的数据:</h3><pre>{{ submittedData }}</pre></div></div>
</template><script>
import { ref } from 'vue';export default {setup() {const fields = ref([{ label: '姓名', value: '' },{ label: '邮箱', value: '' }]);const addField = () => {fields.value.push({ label: '新字段', value: '' });};const removeField = (index) => {fields.value.splice(index, 1);};const submitForm = () => {// 简单验证const data = {};fields.value.forEach(field => {if (field.value.trim() !== '') {data[field.label] = field.value.trim();}});alert(JSON.stringify(data));submittedData.value = data;};const submittedData = ref(null);return {fields,addField,removeField,submitForm,submittedData};}
}
</script>

<!-- src/App.vue -->
<template><div><DynamicForm /></div>
</template><script>
import DynamicForm from './components/DynamicForm.vue';export default {components: {DynamicForm}
}
</script>

案例 3：天气预报应用

功能：

  • 输入城市名称获取天气信息
  • 显示当前天气状况
  • 显示未来几天的天气预报

代码：

<!-- src/components/Weather.vue -->
<template><div><h2>天气预报</h2><input v-model="city" @keyup.enter="fetchWeather" placeholder="输入城市名称" /><button @click="fetchWeather">查询</button><div v-if="weather"><h3>当前天气</h3><p>城市: {{ weather.name }}</p><p>温度: {{ weather.main.temp }}°C</p><p>天气状况: {{ weather.weather[0].description }}</p></div><div v-if="forecast"><h3>天气预报</h3><ul><li v-for="(day, index) in forecast.list" :key="index">{{ formatDate(day.dt) }}: {{ day.weather[0].description }}, {{ day.main.temp }}°C</li></ul></div></div>
</template><script>
import { ref } from 'vue';
import axios from 'axios';export default {setup() {const city = ref('');const weather = ref(null);const forecast = ref(null);const fetchWeather = async () => {if (city.value.trim() === '') return;try {const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city.value}&appid=YOUR_API_KEY&units=metric`);weather.value = response.data;const forecastResponse = await axios.get(`https://api.openweathermap.org/data/2.5/forecast?q=${city.value}&appid=YOUR_API_KEY&units=metric`);forecast.value = forecastResponse.data;} catch (error) {console.error(error);alert('获取天气信息失败');}};const formatDate = (timestamp) => {const date = new Date(timestamp * 1000);return date.toLocaleDateString();};return {city,weather,forecast,fetchWeather,formatDate};}
}
</script>

<!-- src/App.vue -->
<template><div><Weather /></div>
</template><script>
import Weather from './components/Weather.vue';export default {components: {Weather}
}
</script>

注意： 请将 YOUR_API_KEY 替换为实际的 OpenWeatherMap API 密钥。

四、总结

本文详细介绍了 Vue 3 的安装方式、语法知识点及其使用方法，并通过具体的案例代码展示了如何应用这些知识。通过学习这些内容，读者可以快速掌握 Vue 3 的基础和进阶功能，进而构建功能丰富的现代 Web 应用。

以下是一些关键点：

  • 安装方式：根据项目需求选择合适的安装方式，如 CDN, NPM, Vue CLI 或 Vite。
  • 组件化开发：理解组件的概念，掌握组件的创建和使用。
  • 响应式数据：利用 reactive 和 ref 实现数据的响应式更新。
  • 计算属性与侦听器：使用 computed 和 watch 处理复杂的逻辑和数据变化。
  • 生命周期钩子：理解组件的生命周期，合理使用生命周期钩子处理副作用。
  • 综合应用：通过综合性案例，理解如何将各项功能组合在一起，构建完整的应用。

通过不断实践和深入学习，读者可以进一步掌握 Vue 3 的高级特性，如 Vue Router, Vuex 或 Pinia 等状态管理工具，以及 Vue 3 的组合式 API 等。

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

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

相关文章

C++基础复习笔记

C++基础复习笔记

一、数组定义 在C中&#xff0c;数组初始化有多种方式&#xff0c;以下是常见的几种方法&#xff1a; 默认初始化 数组元素未显式初始化时&#xff0c;内置类型&#xff08;如int、float&#xff09;的元素值未定义&#xff08;垃圾值&#xff09;&#xff0c;类类型调用默认构…
阅读更多...
手机和PC远控安全深度测评：TeamViewer/ToDesk/向日葵安全防线对比

手机和PC远控安全深度测评：TeamViewer/ToDesk/向日葵安全防线对比

声明&#xff1a;本测试报告系作者基于个人兴趣及使用场景开展的非专业测评&#xff0c;测试过程中所涉及的方法、数据及结论均为个人观点&#xff0c;不代表任何官方立场或行业标准。 一、引言 当下远程控制技术已深度融入大众的工作与生活&#xff0c;无论是上班族在家操…
阅读更多...
Windows 11的开始菜单调整为左下角布局

Windows 11的开始菜单调整为左下角布局

1.桌面右键个性化 2.个性化中任务栏 3.任务栏选择任务栏行为 4.任务栏行为中 任务栏对齐方式选择靠左即可
阅读更多...
Go语言项目工程化 — 常见开发工具与 CI/CD 支持

Go语言项目工程化 — 常见开发工具与 CI/CD 支持

在Go语言的项目工程化实践中&#xff0c;常见开发工具与 CI/CD 支持是保障团队协作、高效交付与项目质量的关键。以下是第 68 章的详细内容。一、开发辅助工具Go语言生态为开发者提供了丰富的工具&#xff0c;以提高代码质量与开发效率。1. 格式化与静态检查工具说明gofmt标准格…
阅读更多...
OpenCV人脸分析------绘制面部关键点函数drawFacemarks()

OpenCV人脸分析------绘制面部关键点函数drawFacemarks()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 该函数用于在图像上绘制面部关键点&#xff08;facial landmarks&#xff09;&#xff0c;例如使用 FacemarkLBF, FacemarkKazemi 等算法检测到的…
阅读更多...
Linux内核ext4 extent：解决大文件存储难题的关键

Linux内核ext4 extent：解决大文件存储难题的关键

在Linux 操作系统的庞大生态中&#xff0c;文件系统犹如一座城市的基础设施&#xff0c;支撑着数据的有序存储与高效访问。而 ext4 文件系统&#xff0c;作为 Linux 文件系统家族中的重要一员&#xff0c;自诞生起便凭借诸多先进特性备受瞩目。其中&#xff0c;extent 机制堪称…
阅读更多...
reactnative页面适配UI设计尺寸px转dp的完美解决方案px2dp精要篇

reactnative页面适配UI设计尺寸px转dp的完美解决方案px2dp精要篇

你的 px2dp 函数基本思路是正确的&#xff0c;但可以进一步优化以确保更精确的适配。以下是改进后的完美精确方案&#xff1a; 完美精确的适配方案 import { Dimensions, PixelRatio, Platform, ScaledSize } from react-native;// 获取屏幕尺寸&#xff08;考虑横竖屏&#…
阅读更多...
【世纪龙科技】汽车钣金虚拟仿真教学实训软件

【世纪龙科技】汽车钣金虚拟仿真教学实训软件

在汽车后市场人才紧缺的当下&#xff0c;职业院校汽车钣金教学却长期面临“三难困境”&#xff1a;实训设备昂贵且损耗快、学生实操机会稀缺、教学评价依赖主观经验。江苏世纪龙科技公司以十余年汽车教育数字化积淀为基石&#xff0c;推出《汽车钣金教学软件》&#xff0c;通过…
阅读更多...
Fiddler中文版抓包工具在后端API调试与Mock中的巧用

Fiddler中文版抓包工具在后端API调试与Mock中的巧用

在现代开发中&#xff0c;前后端往往分属不同小组甚至不同公司&#xff0c;接口联调变得至关重要。尤其是在多团队合作、后端接口尚未完成或频繁变动的项目中&#xff0c;前端开发进度容易被阻碍。此时&#xff0c;通过灵活运用 Fiddler抓包工具&#xff0c;前端可以在后端接口…
阅读更多...
基于 Flask框架开发的轻量级招聘网站

基于 Flask框架开发的轻量级招聘网站

简单的招聘网站示例 这是一个基于 Flask 框架开发的轻量级招聘网站示例&#xff0c;采用 Jinja2 模板引擎和 Bootstrap 前端框架&#xff0c;模仿 拉勾网 风格&#xff0c;实现了招聘平台的核心功能。系统支持 个人用户 和 企业用户 两种角色&#xff0c;个人用户可以浏览职位、…
阅读更多...
2025 年使用大模型进行软件工程：现实检验

2025 年使用大模型进行软件工程：现实检验

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
如何使用单例模式保证全局唯一实例（复杂版本）

如何使用单例模式保证全局唯一实例（复杂版本）

/// <summary> /// 登录管理类&#xff08;单例模式&#xff09;&#xff0c;负责用户登录、注销及用户信息管理 /// </summary> public class LoginMananger {// 用于线程同步的锁对象static object _lockObj new object();// 单例实例&#xff08;延迟初始化&am…
阅读更多...
瑞斯拜考研词汇课笔记

瑞斯拜考研词汇课笔记

学习视频链接&#xff1a;瑞斯拜考研词汇系统课-外刊50篇- 第一讲_哔哩哔哩_bilibili Text 1 1.气候危机让普通人经历了额外六周的高温天气。 The climate crisis caused the average person to experience six extra weeks of hot days. 2.碳排放是全球变暖的重要原因之一。 C…
阅读更多...
SqlServer安装后JDBC连接失败——TCP/IP

SqlServer安装后JDBC连接失败——TCP/IP

朋友公司接了个项目&#xff0c;甲方BaBa用的数据库是SqlServer 2022的Express版本&#xff0c;朋友让我帮忙验证下环境有没有什么问题&#xff0c;软件开发用的框架还是比较老的&#xff0c;spring的xml方式配置&#xff0c;用的c3p0的数据库连接池&#xff0c;启动项目连接池…
阅读更多...
如何解决pip安装报错ModuleNotFoundError: No module named ‘datetime’问题

如何解决pip安装报错ModuleNotFoundError: No module named ‘datetime’问题

【Python系列Bug修复PyCharm控制台pip install报错】如何解决pip安装报错ModuleNotFoundError: No module named ‘datetime’问题 摘要 在日常Python开发中&#xff0c;我们常常需要通过pip install来安装第三方包&#xff0c;但有时会在PyCharm的控制台里遇到奇怪的ModuleN…
阅读更多...
Windows 10 2016 长期服务版

Windows 10 2016 长期服务版

系统介绍 Windows 10 2016 长期服务版。专为需要高度稳定性和最小功能变更的环境设计。它不仅适合专业领域&#xff0c;也是办公环境的理想选择。 系统特点 一、极致的稳定性 精简的系统组件&#xff1a;移除许多现代应用&#xff0c;只保留基础功能。 无强制功能更新&…
阅读更多...
基于springboot的文件上传系统：重新定义大文件传输的可靠性边界

基于springboot的文件上传系统：重新定义大文件传输的可靠性边界

一、文件分块上传解析1、为什么传统文件上传已经无法满足现代需求&#xff1f;在云原生时代&#xff0c;文件上传不再是简单的"选择文件-点击上传"的过程。随着视频、设计图、数据集等大文件的普及&#xff0c;传统的单文件上传方式面临着诸多挑战&#xff1a;网络不…
阅读更多...
系统学习Python——并发模型和异步编程：进程、线程和GIL

系统学习Python——并发模型和异步编程：进程、线程和GIL

分类目录&#xff1a;《系统学习Python》总目录 在文章《并发模型和异步编程&#xff1a;基础知识》我们简单介绍了Python中的进程、线程和协程。本文就着重介绍Python中的进程、线程和GIL的关系。 Python解释器的每个实例都是一个进程。使用multiprocessing或concurrent.futu…
阅读更多...
【playwright篇】教程(十七)[html元素知识]

【playwright篇】教程(十七)[html元素知识]

1 html中&#xff0c;button元素中的aria-describedby"tooltip-r1k"属性&#xff0c;主要用来做什么&#xff1f;在 HTML 中&#xff0c;button 元素中的 aria-describedby"tooltip-r1k" 属性主要用于提升网页的可访问性&#xff08;Accessibility&#xf…
阅读更多...
Python： 正则表达式

Python： 正则表达式

正则表达式是处理文本数据的强大工具&#xff0c;Python通过re模块提供了完整的正则表达式功能。本文将详细介绍Python正则表达式的使用方法&#xff0c;包括基础语法、高级技巧和re模块API的详细解析。一、正则表达式基础1.1 什么是正则表达式正则表达式(Regular Expression)是…
阅读更多...
最新文章

Copyright @ 2022~2023