docs/basic_knowledge_vue1.md · Nick/easy-monitor

# [Vue.js 框架基础知识1](https://gitee.com/nickqiu/easy-monitor/blob/master/docs/basic_knowledge_vue1.md)

## 1. 理论

在本节中，我们将介绍如何使用Vue 3中的组合式API来实现相同的基础功能。组合式API为开发者提供了更灵活的方式组织代码，特别是当应用变得更大、更复杂时，组合式API的优势会更为显著。

### 1.1 模板语法

组合式API和选项式API使用相同的模板语法。通过`setup()`函数，我们可以定义响应式数据、计算属性和方法，然后将它们暴露给模板使用。

* 插值：在组合式API中，响应式数据仍然可以通过{{}}语法进行插值。
* 指令：依然可以使用v-if、v-for、v-model等指令控制DOM结构。
* 事件绑定：通过@click="handleClick"或v-on来监听事件，方法定义在setup()中。
* 样式绑定：通过:class和:style动态绑定样式

### 1.2 响应式基础

在组合式API中，我们通过`ref`和`reactive`来创建响应式的数据。

- **`ref`**：用于定义原始数据类型的响应式状态。
  ```javascript
  import { ref } from 'vue';
  
  const message = ref('Hello, Vue!');
  ```
- **`reactive`**：用于定义复杂对象的响应式状态。
  ```javascript
  import { reactive } from 'vue';
  const state = reactive({
    count: 0,
    user: {
      name: 'John',
      age: 30
    }
  });
  ```

### 1.3 计算属性

使用组合式API时，我们可以通过`computed`函数来定义计算属性。计算属性会自动跟踪其依赖，并在依赖发生变化时重新计算。

```javascript
import { ref, computed } from 'vue';
const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => `${firstName.value} ${lastName.value}`);

```

这里的`fullName`是一个计算属性，它依赖于`firstName`和`lastName`的变化，并自动更新。

### 1.4 类与样式绑定

类与样式绑定在组合式API中依然使用模板中的`:class`和`:style`指令，结合`ref`或`reactive`来动态更新。

- **类绑定**：
  ```html
  <div :class="{ active: isActive }"></div>
  ```

```javascript
  import { ref } from 'vue';

const isActive = ref(false);
  ```

- **样式绑定**：
  ```html
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  ```

```javascript
  import { ref } from 'vue';
  const activeColor = ref('blue');
  const fontSize = ref(16);
  ```

## 2. 实践

### 2.1 模板语法实践

通过组合式API实现基础的模板语法实例，使用`ref`来创建响应式数据，并绑定到模板中。

```html
<template>
  <div>
    <h1>{{ message }}</h1>
    <p v-if="isVisible">这个段落是条件渲染的。</p>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

### 2.2 响应式基础实践

通过组合式API实现简单的响应式系统，我们将使用`v-model`双向绑定输入框的数据。

```html
<template>
  <div>
    <input v-model="inputValue" placeholder="输入点什么">
    <p>{{ inputValue }}</p>
  </div>
</template>

当用户输入时，`inputValue`的值会自动更新，并反映在`<p>`标签中。

### 2.3 计算属性实践

使用组合式API来实现一个包含计算属性的示例。

```html
<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);

</script>
```

当`firstName`或`lastName`变化时，`fullName`会自动更新。

### 2.4 类与样式绑定实践

通过组合式API实现类名与样式的动态绑定。

```html
<template>
  <div>
    <button :class="{ active: isActive }" @click="toggleActive">
      {{ isActive ? 'Active' : 'Inactive' }}
    </button>
    <div :style="{ color: textColor, fontSize: fontSize + 'px' }">
      动态样式
    </div>
  </div>
</template>

const toggleActive = () => {
  isActive.value = !isActive.value;
};
</script>
```

通过点击按钮，`isActive`的状态会发生变化，从而改变按钮的类名，同时动态样式的绑定也会根据数据的变化自动更新。

* 视频最终代码

```js

// 插值：在组合式API中，响应式数据仍然可以通过{{}}语法进行插值。
const message = ref('消息');

// 事件绑定：通过@click="handleClick"或v-on来监听事件，方法定义在setup()中。
// 指令：依然可以使用v-if、v-for、v-model等指令控制DOM结构。
const show = ref(true)
const students = ["张三","李四","李四11"]

const inputMsg = ref("")

// 样式绑定：通过:class和:style动态绑定样式
const isRed = ref(false)
const colorBlue = ref("blue")

const firstName = ref('Nick');
const lastName = ref('邱');

const fullName = computed(() => `${firstName.value} ${lastName.value}`);

function handleClick(){
  show.value = !show.value
  isRed.value = !isRed.value
}

</script>

<template>
  <div>
    <h1>第一课</h1>
    <hr>
    <div>
      插值 {{ message }}
    </div>
    <hr>
    <div style="margin-bottom: 5px;">
      指令：
      <div v-if="show">显示</div>
      <div v-else>不显示</div>
      <button @click="handleClick">按我</button>
      <div>---</div>
      <div>
        <div v-for="student in students">{{ student }}</div>
      </div>
      <div>---</div>
      <div>
        <input v-model="inputMsg">
        <p>{{ inputMsg }}</p>
      </div>
    </div>
    <hr>
    <div :class="{redDiv: isRed}" :style="{color: colorBlue}">
      样式绑定
    </div>
    <div>
      计算：{{ fullName }}
    </div>

</div>
</template>

</style>

```

## 3. 参考

- [Vue 3 官方文档](https://v3.vuejs.org/)
- [Vue.js 组合式API指南](https://v3.vuejs.org/guide/composition-api-introduction.html)
- [计算属性和侦听器](https://v3.vuejs.org/guide/computed.html)
- [类与样式绑定](https://v3.vuejs.org/guide/class-and-style.html)

Nick/easy-monitor

简介

发行版

贡献者

语言

近期动态

Nick/easy-monitor .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

语言

近期动态

搜索帮助

Nick/easy-monitor