【2024最新】vue3的基本使用(超详细)

Vue 3是一个非常流行的JavaScript框架，用于构建用户界面和单页面应用。它引入了一些新的特性和改进，使得开发更加高效和灵活。本文将对Vue 3的基本使用进行详细介绍，并为读者提供示例代码。

一、Vue 3的安装

要开始使用Vue 3，首先需要安装Vue CLI。打开终端并运行以下命令：

npm install -g @vue/cli

安装完成后，您可以使用以下命令创建一个新的Vue 3项目：

vue create my-vue3-app

在创建过程中，选择"Vue 3"版本。

二、基础结构

创建好项目后，您可以进入项目目录并启动开发服务器：

cd my-vue3-app
npm run serve

接下来，打开浏览器访问http://localhost:8080/，您将看到默认的Vue 3欢迎页面。

三、组件的创建与使用

在Vue 3中，组件是构建应用的核心。我们可以通过.vue文件来定义组件。以下是一个简单的组件示例：

<!-- src/components/HelloWorld.vue -->
<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

在src/App.vue中引入并使用这个组件：

<template>
  <div id="app">
    <HelloWorld msg="欢迎使用 Vue 3!" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

四、响应式数据

Vue 3 引入的Composition API使得我们可以预测式地定义响应式数据。我们可以在setup函数中使用ref和reactive来创建响应式数据。示例代码如下：

<template>
  <div>
    <input v-model="message" placeholder="请输入消息" />
    <p>你输入的消息是: {{ message }}</p>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('')

    return {
      message
    }
  }
}
</script>

五、计算属性与侦听属性

在Vue 3中，我们可以使用computed来创建计算属性，使用watch来侦听数据变化。示例代码如下：

<template>
  <div>
    <input v-model="number" placeholder="输入一个数字" />
    <p>平方: {{ squaredNumber }}</p>
  </div>
</template>

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

export default {
  setup() {
    const number = ref(0)
    const squaredNumber = computed(() => number.value * number.value)

    watch(number, (newValue) => {
      console.log(`输入的数字是: ${newValue}`)
    })

    return {
      number,
      squaredNumber
    }
  }
}
</script>

六、生命周期钩子

Vue 3 也支持生命周期钩子。例如，onMounted用于组件挂载后执行逻辑：

<template>
  <div>
    <p>当前时间: {{ currentTime }}</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const currentTime = ref('')

    onMounted(() => {
      currentTime.value = new Date().toLocaleTimeString()
    })

    return {
      currentTime
    }
  }
}
</script>

总结

Vue 3带来了更为灵活的API和高效的性能，组件化的思想使得代码可重用性和维护性更高。通过上述示例，读者应该对Vue 3的基本用法有了初步的了解。欢迎大家深入学习和使用Vue 3，构建更出色的应用！