Vue.js 框架基础知识1

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：用于定义原始数据类型的响应式状态。

  import { ref } from 'vue';
  
  const message = ref('Hello, Vue!');
  

• reactive：用于定义复杂对象的响应式状态。

  import { reactive } from 'vue';
  const state = reactive({
    count: 0,
    user: {
      name: 'John',
      age: 30
    }
  });
  

1.3 计算属性

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

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来动态更新。

• 类绑定：

  <div :class="{ active: isActive }"></div>
  

  import { ref } from 'vue';
  
  const isActive = ref(false);
  

• 样式绑定：

  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  

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

2. 实践

2.1 模板语法实践

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

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

<script>
import { ref } from 'vue';
const message = ref('Hello, Vue!');
const isVisible = ref(true);
const items = ref(['Item 1', 'Item 2', 'Item 3']);
</script>

2.2 响应式基础实践

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

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

<script>
import { ref } from 'vue';
const inputValue = ref('');
</script>

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

2.3 计算属性实践

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

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

<script>
import { ref, computed } from 'vue';

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

</script>

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

2.4 类与样式绑定实践

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

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

<script>
import { ref } from 'vue';
const isActive = ref(false);
const textColor = ref('blue');
const fontSize = ref(16);

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

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

• 视频最终代码

<script setup>
import { ref,computed  } from 'vue';




// 插值：在组合式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>
.redDiv{
  background-color: red;
}

</style>

3. 参考

• Vue 3 官方文档
• Vue.js 组合式API指南
• 计算属性和侦听器
• 类与样式绑定