Vue基础知识总结

1.Vue 的核心概念：

• 数据双向绑定：Vue 使用简洁的模板语法将数据和 DOM 进行绑定，当数据变化时，相关的 DOM 也会相应更新。

• 组件化开发：Vue 允许将页面拆分为可复用的组件，每个组件有自己的模板、样式和逻辑。

• 响应式系统：Vue 使用响应式系统追踪数据的变化，当数据发生改变时，相关的 DOM 会自动更新。

Vue 的响应式系统是实现数据双向绑定的重要机制之一。当 Vue 实例中的属性发生变化时，Vue 内部会自动更新这些属性对应的 DOM 元素，从而实现了数据的自动同步更新。

具体来说，当一个 Vue 实例被创建时，Vue 会递归地将这个实例的所有属性转换为 getter/setter，这样当属性被读取或设置时，就会触发 getter/setter 函数。在 getter 函数被触发时，Vue 会将这个属性和对应的 Watcher 对象关联起来，在 setter 函数被触发时，Vue 会向关联的 Watcher 对象发送通知，以便更新 DOM。

此外，Vue 还提供了 computed 和 watch 两种方式让开发者更加灵活地控制响应式系统的行为。computed 可以方便地计算属性值，并将其缓存以提高性能；watch 则可以监听某个属性的变化，并在回调函数中执行自定义逻辑，从而实现更细粒度的数据控制。

• 生命周期钩子：Vue 组件有一系列的生命周期钩子函数，用于在组件的不同阶段执行自定义逻辑。

2.Vue 的基本语法：

• 模板语法：Vue 使用类似 HTML 的模板语法，用于声明组件的结构和数据绑定。

Vue使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上，所有的Vue模板都是语法层面合法的HTML，可以被符合规范的浏览器和HTML解析器解析

最基本的数据绑定形式是文本插值

• 数据绑定：Vue 提供了多种方式实现数据绑定，包括插值表达式、指令、计算属性和监听属性等。

计算属性

监听属性

• 事件处理：Vue 使用 v-on 指令绑定事件，可以直接在模板中使用 @ 符号缩写。

v-on指令用于进行元素的事件绑定。

运行结果：可以通过点击按钮更改p标签显示的内容。

简写方式是将 v-on: 部分简化成了 @ 符号。

• 条件渲染：Vue 提供了 v-if、v-else、v-else-if 等指令实现条件渲染。

• 列表渲染：Vue 使用 v-for 指令实现列表渲染，可以对数组和对象进行遍历渲染。

• 样式绑定：Vue 支持使用 v-bind 指令绑定样式和类名。

在开发的时候，有时候我们的属性不是写死的，有可能是根据我们的一些数据动态地决定的，比如图片标签（<img>）的src属性，我们可能从后端请求了一个包含图片地址的数据，需要将地址动态的绑定到src上面，这时就不能简单的将src写死。v-bind指令主要用于属性绑定。