Vue 基础

什么是 Vue

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。

核心概念

响应式数据

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

// ref - 基本类型的响应式
const count = ref(0)

// reactive - 对象的响应式
const state = reactive({
  name: 'Vue',
  version: '3.x'
})

function increment() {
  count.value++
}
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

指令

• v-bind / : - 绑定属性
• v-model - 双向绑定
• v-if / v-else - 条件渲染
• v-for - 列表渲染
• v-on / @ - 事件监听