JavaWeb 24.Vue3的简介和快速体验
目录
一、Vue3介绍
Vue的两个核心功能
① 声明式渲染：
② 响应性:
什么是声明式响应
什么是编程式响应
什么是渐进式框架
特点：
二、Vue3快速体验
三、关于JavaScript和TypeScript的选择问题
春风若有怜花意，可否许我再少年
—— 24.10.19
一、Vue3介绍
Vue是一款用于构建用户界面的渐进式 JavaScript 框架。它基于标准 HTML、CSS和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
Vue的两个核心功能
建立标签元素与js代码之间的关系
① 声明式渲染：
Vue 基于标准 HTML拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML和 Javascript 状态之间的关系。
② 响应性:
Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新DOM
什么是声明式响应
声明式响应是一种编程范式，在这种范式中，开发者主要描述应用的期望状态，而框架或系统负责处理如何达到这个状态以及对状态变化的响应
例如，在一些前端框架（如 Vue.js）中，当您声明式地绑定数据到视图时，您只需要描述数据和视图之间的关系，框架会自动处理数据变化时视图的更新。
什么是编程式响应
编程式响应是相对于声明式响应而言的。
在编程式响应中，开发者需要通过编写具体的代码来明确地执行操作以实现对状态变化的响应。这意味着开发者需要手动管理状态的更新以及与之相关的副作用。
例如，在某些前端框架中，如果要实现数据变化时的响应，可能需要手动调用特定的方法或执行一系列的操作来更新界面或处理相关逻辑。
什么是渐进式框架
渐进式框架是一种具有逐步扩展和增强功能特性的框架。
特点：
① 可以从一个简单的基础应用开始，随着项目需求的增长和复杂度的提高，逐步添加更多的功能和特性。
② 对开发者的技术水平和项目的规模具有较好的适应性，无论是小型项目还是大型复杂的应用，都能在这个框架下找到合适的开发方式。
二、Vue3快速体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=初识Vue, initial-scale=1.0">
<title>Document</title>
<!-- 引入Vue的核心依赖，核心的vue3.js文件 -->
<script src="./js/vue.js"></script>
<!-- <script src="https://unpkg.com/vue 3/dist/vue.global. s"></script>，等价于上面的那行，只是点击网页将js代码复制在VScode本地了 -->
</head>
<body>
<div id="app">
<!-- 绑定数据到HTML元素 -->
<!-- v-text指令用于将数据绑定到HTML元素的文本内容 -->
<h1 v-text="message" v-bind:style="colorStyle">Hello Vue 3</h1>
<h1>{{message}}</h1>
<!-- 单击事件后出现一个弹窗 -->
<button @click="func1">change</button>
</div>
<script>
// 建立关联关系：创建一个Vue实例
const app = Vue.createApp({
// 声明数据 必须要有一个vue对象中函数setup
setup(){
// 定义数据 以变量或对象的形式
let message = "一切都会好的"
let headline = "Vue3 快速体验"
let colorStyle = {"background-color": "pink"}
function func1(){
alert("按钮被点击了")
}
// 在return中返回的变量/方法，才能够和HTML元素关联
return{
message,
headline,
colorStyle,
func1
}
}
})
// 将app对象挂载到指定的元素上，被挂载的元素内部可以通过Vue框架实现数据的渲染
app.mount('#app')
</script>
</body>
</html>
Ps：警告是环境的开发版本问题，不用关注
三、关于JavaScript和TypeScript的选择问题
TypeScript 是 JavaScript 的超集，为 JavaScript 添加了静态类型检查和其他一些现代编程语言的特性
TypeScript 的一些特性包括：
- 静态类型系统：可以在开发过程中更早地发现类型错误，提高代码的可靠性和可维护性。
- 面向对象编程特性：如类、接口、继承等。
- 模块系统：更好地组织和管理代码。
TypeScript 和 JavaScript 有哪些主要区别
1.类型系统:
JavaScript 是动态类型语言，变量的类型在运行时确定。
TypeScript 是静态类型语言，在编译阶段就会进行类型检查，有助于提前发现类型错误，增强代码的健壮性和可维护性。2.语法增强：
TypeScript 支持类、接口、枚举、泛型等高级特性，使代码结构更清晰，更易于组织和理解
3.工具支持:
由于 TypeScript 的静态类型，开发工具能够提供更智能的代码提示、自动补全和重构支持
4.代码可读性和可维护性:
通过明确的类型定义，TypeScript 代码更易于理解，特别是对于大型项目和团队协作
Ps：TS不是非学不可，不用TS仍然可以正常开发工程化的前端项目: