<div>
  <h3>輸入內(nèi)容：<span id="content"></span></h3>
  <input type="text" id="input" placeholder="請(qǐng)輸入...">
</div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
// 1. 找到DOM元素
const $input = $('#input');
const $content = $('#content');

// 2. 綁定事件監(jiān)聽
$input.on('input', function() {
  // 3. 獲取輸入數(shù)據(jù)
  const val = $(this).val();
  // 4. 手動(dòng)更新DOM
  $content.text(val);
});
</script>

<div id="app">
  <h3>輸入內(nèi)容：{{ content }}</h3>
  <input type="text" v-model="content" placeholder="請(qǐng)輸入...">
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
  // 聲明數(shù)據(jù)
  data() {
    return { content: '' };
  }
}).mount('#app'); // 掛載到DOM
</script>

// jQuery 手動(dòng)封裝"按鈕組件"
function createButton(text, onClick) {
  // 創(chuàng)建DOM元素
  const $btn = $(`<button style="padding: 8px 16px; border: none; border-radius: 4px;">${text}</button>`);
  // 綁定事件
  $btn.on('click', onClick);
  return $btn;
}

// 使用組件
const $submitBtn = createButton('提交', () => alert('提交成功'));
const $cancelBtn = createButton('取消', () => alert('已取消'));
// 手動(dòng)插入DOM
$('#app').append($submitBtn).append($cancelBtn);

<div id="app">
  <MyButton text="提交" @click="handleSubmit" />
  <MyButton text="取消" @click="handleCancel" />
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
// 定義組件
const MyButton = {
  props: ['text'], // 接收外部參數(shù)
  template: `<button class="my-btn" @click="$emit('click')">{{ text }}</button>`,
  styles: [`
    .my-btn { padding: 8px 16px; border: none; border-radius: 4px; }
  `]
};

createApp({
  components: { MyButton }, // 注冊(cè)組件
  methods: {
    handleSubmit() { alert('提交成功'); },
    handleCancel() { alert('已取消'); }
  }
}).mount('#app');
</script>

// jQuery 時(shí)機(jī)控制
$(document).ready(function() {
  console.log('DOM結(jié)構(gòu)就緒，可獲取元素');
  const $app = $('#app'); // 可獲取元素，但可能無法獲取寬高
});

$(window).load(function() {
  console.log('所有資源加載完成');
  console.log($('#app').width()); // 可準(zhǔn)確獲取寬高
});

// Vue 生命周期
const { createApp } = Vue;
createApp({
  created() {
    console.log('實(shí)例創(chuàng)建，DOM未掛載');
    console.log(this.$el); // undefined
  },
  mounted() {
    console.log('組件掛載完成');
    console.log(this.$el.clientWidth); // 可獲取寬高
  },
  beforeUnmount() {
    console.log('組件銷毀前，清理資源');
  }
}).mount('#app');

// 1. Vue Router 路由配置（簡(jiǎn)化）
import { createRouter, createWebHashHistory } from 'vue-router';
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/user', component: User }
  ]
});

// 2. Pinia 狀態(tài)管理（簡(jiǎn)化）
import { defineStore } from 'pinia';
const useUserStore = defineStore('user', {
  state: () => ({ name: 'Guest' }),
  actions: {
    setName(name) { this.name = name; }
  }
});

// jQuery 實(shí)現(xiàn)（性能較差）
const $list = $('#list');
// 循環(huán)插入DOM，觸發(fā)1000次重排
for (let i = 0; i < 1000; i++) {
  $list.append(`<li>數(shù)據(jù) ${i}</li>`);
}

// Vue 實(shí)現(xiàn)（性能優(yōu)異）
const { createApp } = Vue;
createApp({
  data() {
    return { list: Array.from({ length: 1000 }, (_, i) => `數(shù)據(jù) ${i}`) };
  },
  template: `<ul><li v-for="item in list" :key="item">{{ item }}</li></ul>`
}).mount('#list');