Vue学习笔记-S1

1 什么是Vue

Vue是一款用于构建用户界面的渐进式JavaScripte框架,可基于数据渲染用户页面.

1.1 Vue的知识架构

  • Vue核心包:声明式渲染、组件系统
  • Vue构建:客户端路由、状态管理、构建工具
  • 局部使用Vue:快速入门、常用指令、生命周期
  • 整站使用Vue:Vue项目构建工具、目录结构、开发流程、Element-Plus
  • 大前端项目:客户端路由、状态管理

2 Vue快速入门

2.1 准备

  • 准备html页面,并引入Vue模块(官方提供)
  • 创建Vue程序的应用实例
  • 准备元素(div),被Vue控制

2.2 构建用户界面

  • 准备数据
  • 通过插值表达式渲染页面
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">		
	<title>Document</title>
</head>
<body>
	<div id="app">
		<h1>{{msg}}</h1>
	</div>
	<!--引入vue模块 -->
	<script type="module">
		import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
		/*创建vue的应用实例 */
		createApp({
			data(){
				return {
					//定义数据
					msg:'hello vue3'
				}
			}
		}).mount("#app");
	</script>
</body>
</html>

3 Vue中常见命令标签

v-ifv-showv-bindv-for

3.1 v-ifv-show

作用:这两类指令,都是用来控制元素的显示与隐藏的

3.1.1 v-if

语法:v-if="表达式",表达式值为 true,显示;false,隐藏其它:可以配合 v-else-if /v-else 进行链式调用条件判断原理:基于条件判断,来控制创建或移除元素节点(条件渲染)

3.1.2 v-show

语法:v-show="表达式",表达式值为 true,显示;false,隐藏原理:基于CSS样式display来控制显示与隐藏

3.2 v-bind

用于绑定属性、class,数据与组件绑定,以及内联样式(style)

详细用法可参照博主"more名奇妙"的这篇博客

4 Vue生命周期

Vue生命周期共分为8个阶段:

常用的应用场景:mounted函数,在页面加载完毕时,发起异步请求,加载数据、渲染页面。

html 复制代码
<script type="module">
import { createApp } from "https://.../vue.esm-browser.js"
const app = createApp({
data(){
	return{
		message: "Hello Vue'
		}
	},
	//生命周期-钩子函数 mounted
	mounted(){
		console.log('Vue挂载完毕发送请求获取数据');
	}
}).mount("#app");
</script>
  • setup:是一个标识,告诉Vue需要进行一些处理,让我们可以更简洁的使用组合式API。
  • ref():接收一个内部值,返回一个响应式的ref对象,此对象只有一个指向内部值的属性value
  • onMounted():在组合式API中的钩子方法,注册一个回调函数,在组件挂载完成后执行。
    在组合式API中,一般需要把数据定义为响应式数据

5 Vue3与Vue2的不同点

5.1 TypeScript支持

  • TypeScript(简称TS),号称是JavaScript(简称JS)的一个超集,支持ES6标准,设计的目的是开发大型应用。TS最大的优势是解决了JS被广为诟病的解释型和弱类型问题,改为编译型和强类型(因为TS兼容JS,所以也可以使用弱类型,但TS推出的目的就是改变JS的弱类型)。
  • Vue 3采用TS编写,提供了更好的TS集成和更严格的类型定义,增强了代码的类型安全性。

5.2 编程风格

  • Vue3更好地支持组合式API (Composition API)Fragments,且兼容选项式API。使得代码更加简洁、模块化和易于维护。然而目前Vue 2.7中也兼容了组合式API。
  • 组合式 API是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件。具体可在官方文档中详细了解
  • Fragments提供了一种更简洁的方式来组合多个子元素,而无需额外的包裹元素。Fragments 可以让我们在不引入多余 DOM 元素的情况下,组合和渲染多个子元素。

5.3 性能优势

  • Diff算法优化:Vue3采用了更高效的Diff算法来比较虚拟DOM之间的差异,并只更新有差异的部分,而不是重新渲染整个组件。这种优化可以大大减少不必要的DOM操作,提高渲染性能。
  • 静态提升:Vue3采用了静态提升技术,将静态内容预先生成成静态资源,在浏览器端直接使用这些静态资源,避免了解析和编译,进一步提高了渲染性能。
  • 事件侦听缓存:Vue3使用了事件侦听缓存,将侦听器缓存到指令实例中,减少了创建和销毁侦听器的次数,从而提高了性能。

因此,相比Vue 2,Vue 3速度更快,内存使用更少,支持大规模数据处理,具有更好的代码重用性。

相关推荐
m0_7482361125 分钟前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo61738 分钟前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_7482489440 分钟前
HTML5系列(11)-- Web 无障碍开发指南
前端·html·html5
m0_748235611 小时前
从零开始学前端之HTML(三)
前端·html
一个处女座的程序猿O(∩_∩)O3 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
hackeroink6 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者7 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-8 小时前
验证码机制
前端·后端
燃先生._.9 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js