Vue 框架完全指南：渐进式前端框架的优雅之道

<!-- 方式一：直接用 CDN，像 jQuery 一样简单 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- 方式二：使用构建工具，专业开发 -->
npm create vue@latest

const { createApp, ref } = Vue;

createApp({
  setup() {
    const message = ref('Hello Vue!');
    const changeMessage = () => {
      message.value = 'Hello World!';  // 修改数据，视图自动更新
    };
    return { message, changeMessage };
  }
}).mount('#app');

<div id="app">
  <!-- 文本插值 -->
  <h1>{{ message }}</h1>

  <!-- 绑定属性 -->
  <img :src="imageUrl" :alt="description">

  <!-- 绑定事件 -->
  <button @click="handleClick">点击</button>

  <!-- 条件渲染 -->
  <p v-if="show">显示这段文字</p>

  <!-- 列表渲染 -->
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

import { ref, computed, onMounted } from 'vue';

export default {
  setup() {
    // 响应式状态
    const count = ref(0);
    const doubled = computed(() => count.value * 2);

    // 方法
    const increment = () => count.value++;

    // 生命周期钩子
    onMounted(() => {
      console.log('组件挂载完成');
    });

    return { count, doubled, increment };
  }
};

// Options API（Vue 2 风格）
export default {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}

// Composition API（Vue 3 风格）
export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
}

<template>
  <div class="greeting">
    <h1>{{ message }}</h1>
    <button @click="greet">打招呼</button>
  </div>
</template>

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

const message = ref('你好，Vue！');
const greet = () => alert(message.value);
</script>

<style scoped>
.greeting h1 {
  color: #42b883;
}
</style>