框架集成：08 HTML与Vue集成基础 - 详细教程与实战指南

<!-- Vue 3 开发版本 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- Vue 3 生产版本 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<!-- 使用ES Module -->
<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
</script>

<div id="app">
  <p>当前时间：{{ currentTime }}</p>
  <p>计数器：{{ count }}</p>
  <button @click="increment">+ 增加</button>
  <button @click="decrement">- 减少</button>
  <p v-if="count > 5">计数器已超过5！</p>
  <p v-else>计数器未超过5</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp, ref, onMounted, onUnmounted } = Vue;

  createApp({
    setup() {
      const count = ref(0);
      const currentTime = ref(new Date().toLocaleTimeString());
      let timer = null;

      function increment() { count.value++; }
      function decrement() { count.value--; }

      onMounted(() => {
        timer = setInterval(() => {
          currentTime.value = new Date().toLocaleTimeString();
        }, 1000);
      });

      onUnmounted(() => {
        clearInterval(timer);
      });

      return { count, currentTime, increment, decrement };
    }
  }).mount('#app');
</script>

const { createApp, ref, computed, reactive } = Vue;

const app = createApp({
  setup() {
    // 响应式状态
    const newUser = ref('');
    const users = reactive([
      { id: 1, name: '张三', role: 'admin' },
      { id: 2, name: '李四', role: 'user' },
      { id: 3, name: '王五', role: 'user' }
    ]);
    let nextId = 4;

    // 计算属性
    const adminCount = computed(() => 
      users.filter(u => u.role === 'admin').length
    );
    const userCount = computed(() => 
      users.filter(u => u.role === 'user').length
    );

    // 方法
    function addUser() {
      const name = newUser.value.trim();
      if (!name) return;
      users.push({
        id: nextId++,
        name: name,
        role: 'user'
      });
      newUser.value = '';
    }

    function removeUser(id) {
      const index = users.findIndex(u => u.id === id);
      if (index > -1) users.splice(index, 1);
    }

    return { newUser, users, adminCount, userCount, addUser, removeUser };
  },
  template: `
    <div>
      <h3>用户管理系统</h3>
      <div>
        管理员: <strong>{{ adminCount }}</strong>
        普通用户: <strong>{{ userCount }}</strong>
      </div>
      <input v-model="newUser" @keyup.enter="addUser" />
      <button @click="addUser">添加用户</button>
      <ul>
        <li v-for="user in users" :key="user.id">
          {{ user.name }} - {{ user.role }}
          <button @click="removeUser(user.id)">删除</button>
        </li>
      </ul>
    </div>
  `
});

app.mount('#app');

const { createApp, ref, computed } = Vue;

createApp({
  setup() {
    const keyword = ref('');
    const items = [
      'HTML5 语义化标签', 'CSS3 动画与过渡', 'JavaScript ES6+',
      'Vue 3 Composition API', 'React Hooks', 'Angular 依赖注入'
    ];

    const filteredItems = computed(() => {
      if (!keyword.value.trim()) return items;
      const kw = keyword.value.toLowerCase();
      return items.filter(item => item.toLowerCase().includes(kw));
    });

    function highlightText(text) {
      if (!keyword.value.trim()) return text;
      const regex = new RegExp(`(${keyword.value})`, 'gi');
      return text.replace(regex, '<span class="highlight">$1</span>');
    }

    return { keyword, items, filteredItems, highlightText };
  }
}).mount('#app');

const { createApp, ref, reactive, watchEffect, computed, watch } = Vue;

createApp({
  setup() {
    // ref: 基本类型的响应式
    const count = ref(0);
    const message = ref('Hello Vue');

    // reactive: 对象的响应式
    const user = reactive({
      name: '张三',
      age: 25,
      skills: ['HTML', 'CSS', 'JavaScript']
    });

    // computed: 计算属性
    const skillCount = computed(() => user.skills.length);
    const userInfo = computed(() => 
      `${user.name}, ${user.age}岁, ${skillCount.value}项技能`
    );

    // watchEffect: 自动追踪依赖
    watchEffect(() => {
      console.log(`count变化: ${count.value}`);
    });

    // watch: 明确指定监听
    watch(() => user.age, (newVal, oldVal) => {
      console.log(`user.age: ${oldVal} → ${newVal}`);
    });

    return { count, message, user, skillCount, userInfo };
  }
}).mount('#app');

// Vue 3 使用 Proxy 实现响应式
const state = new Proxy(target, {
  get(target, key) {
    track(target, key);  // 追踪依赖
    return target[key];
  },
  set(target, key, value) {
    target[key] = value;
    trigger(target, key);  // 触发更新
    return true;
  }
});

// ref 的实现原理
function ref(value) {
  return new Proxy({ value }, {
    get(target, key) {
      track(target, 'value');
      return target[key];
    },
    set(target, key, newVal) {
      target[key] = newVal;
      trigger(target, 'value');
      return true;
    }
  });
}

<!-- 模板写法 -->
<div class="app">
  <h1>{{ title }}</h1>
  <p v-if="show">{{ message }}</p>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
  <button @click="handleClick">点击</button>
</div>

// 编译后的渲染函数
function render(_ctx) {
  return h('div', { class: 'app' }, [
    h('h1', _ctx.title),
    _ctx.show ? h('p', _ctx.message) : null,
    h('ul', _ctx.items.map(item =>
      h('li', { key: item.id }, item.name)
    )),
    h('button', { onClick: _ctx.handleClick }, '点击')
  ])
}

// 不推荐：解构reactive丢失响应性
const user = reactive({ name: '张三', age: 25 });
const { name, age } = user; // 丢失响应性!

// 推荐：使用toRefs
import { toRefs } from 'vue';
const { name, age } = toRefs(user); // 保持响应性

// 不推荐：在模板中使用复杂表达式
// <p>{{ items.filter(i => i.active).map(i => i.name).join(', ') }}</p>

// 推荐：使用计算属性
const activeNames = computed(() =>
  items.filter(i => i.active).map(i => i.name).join(', ')
);
// <p>{{ activeNames }}</p>

// 不推荐：直接修改props
props.count++; // 不要修改!

// 推荐：通过emit通知父组件
emit('update:count', props.count + 1);