2025年4月24日学习笔记

## 一、Vue 核心概念

Vue 是一个用于构建用户界面的渐进式框架，它允许我们通过声明式渲染来创建复杂的单页应用，让前端开发变得更加高效和简洁。

## 二、基础模板语法

  1. **找载点** ：Vue 实例需要挂载到一个 HTML 元素上，这个 HTML 元素就是载点，通常在模板中用一个独特的 id 来标识这个元素，如`<div id="app"></div>`，然后在 Vue 实例中通过`el`属性指定挂载点`el:'#app'`。
  2. **data 语句** ：data 是一个函数，它返回一个对象，这个对象包含了 Vue 实例中所有的数据属性。在模板中，我们可以通过双花括号语法{{}}来访问这些数据，例如，如果 data 中定义了`message:'Hello Vue!'`，那么在模板中`<p>{{message}}</p>`就会显示为`<p>Hello Vue!</p>`。

## 三、常用指令

指令是 Vue 中带有特殊意义的属性，它们以`v-`开头，用于实现各种动态功能。

指令| 作用| 代码示例
---|---|---
v-bind| 动态地绑定一个或多个属性到元素上| `<img v-bind:src="imageUrl">`，其中`imageUrl`是 data 中定义的图片链接，当`imageUrl`的值变化时，图片的 src 属性会相应更新
v-model| 实现表单输入和应用状态之间的双向数据绑定| `<input v-model="inputValue">`，当用户在输入框中输入内容时，`inputValue`的值会自动更新，反之，如果`inputValue`在代码中被修改，输入框中的内容也会同步改变
v-if/v-show| 根据表达式的值来控制元素的显示与隐藏| `<div v-if="isVisible">显示内容</div>`，当`isVisible`为 true 时，div 元素显示；当`isVisible`为 false 时，v-if 会直接移除该元素，而 v-show 则只是通过 CSS 的 display 属性将其隐藏
v-for| 基于一个数组来渲染列表元素| `<ul><li v-for="(item, index) in items" :key="index">{{item}}</li></ul>`，其中`items`是 data 中定义的数组，会根据数组的长度循环创建 li 元素，`key`是为每个循环项提供一个唯一标识，有助于 Vue 正确地渲染列表

## 四、事件处理（v-on）

v-on 指令用于监听 DOM 事件，我们可以使用它来触发一些方法，实现用户交互功能，例如：

```html
<button v-on:click="handleClick">点击我</button>
```

在 Vue 实例中定义`handleClick`方法：

```javascript
methods:{
  handleClick:function(){
    alert('按钮被点击了！');
  }
}
```

当用户点击按钮时，就会弹出一个提示框显示 “按钮被点击了！”