vue 基础
- vue 介绍
- Vue(读作 /vjuː/,类似view)是一个用于构建用户界面的 JavaScript 框架。它建立在标准 HTML、CSS 和 JavaScript 之上,并提供了一个声明性和基于组件的编程模型,可帮助您有效地开发简单或复杂的用户界面
- vue 应用实例
- 每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的。
- 模板语法
- Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法上合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。
- 响应式基础
- reactive() 函数创建一个响应式对象或数组。ref() 函数创建一个响应式变量。
- 深入响应式系统
- 使用 Proxy 来创建响应式对象,将getter/setter用于ref
- 计算属性
- computed() 计算属性值会基于其响应式依赖被缓存。仅会在其响应式依赖更新时,才重新计算。
- 侦听器
- watch() 追踪响应式依赖。watchEffect()会立即执行一遍回调函数,如果这时函数产生了effect(副作用),Vue 会自动追踪effect的依赖关系,自动分析出响应源。
- 样式绑定
- 将 v-bind 用于 class 和 style。
- 条件渲染
- v-if 指令用于条件性地渲染一块内容。这个区块,只会在指令的表达式为真时,才被渲染。
- 列表渲染
- 用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item ini tems 形式的特殊语法,其中 items 是源数据数组,而 item 是迭代项的别名。
- 事件处理
- v-on 指令 (缩写为 @ 符号) 来监听 DOM 事件,并在触发事件时,执行一些 JavaScript。
- 表单输入绑定
- 用 v-model 指令在表单控件元素上创建双向数据绑定。
- 生命周期钩子
- 组合式 API 生命周期钩子:onMounted()、onUpdated()、onUnmounted()、onBeforeMount()、onBeforeUpdate()、onBeforeUnmount()、onErrorCaptured()、onRenderTracked()、onRenderTriggered()、onActivated()、onDeactivated()、onServerPrefetch()。
- 模板引用 ref
- ref 是一个特殊的 attribute,在一个特定的 DOM 元素或子组件实例被挂载后,获得对它的直接引用 ID。