qw
/
soilgd


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入Vue 3 CDN -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <!-- Vue 应用的挂载点 -->
  <div id="app">
    <div>
      {{ msg }}

      <h2>{{ web.url }}</h2>
      <h2>{{ web.user }}</h2>

      <!-- 绑定点击事件 -->
      <button v-on:click="edit">修改</button><br>
      <!-- keyup=松开按键   enter=回车 -->
      回车 <input type="text" @keyup.enter="add(20,30)"><br>
      空格 <input type="text" @keyup.space="add(20, 30)"><br>
      Tab <input type="text" @keydown.tab="add(10, 20)"><br>
      W <input type="text" @keyup.w="add(5, 10)"><br>
      <!-- 组合快捷键 -->
      Ctrl + Enter <input type="text" @keyup.ctrl.enter="add(40, 60)"><br>
      Ctrl + A <input type="text" @keyup.ctrl.a="add(20, 30)">
    </div>
  </div>

  <script>
    // 使用全局Vue对象来创建应用实例
    const { createApp, reactive } = Vue;

    // 创建Vue应用实例
    createApp({
      setup() {
        // 定义响应式数据
        const web = reactive({
          url: "baidu.com",
          user: 0
        });

        // 定义修改函数
        const edit = () => {
          web.url = "www.baidu.com"; // 修改URL
        };

        const add = (a, b) => {
          web.user += a + b;
        }

        return {
          msg: "success",
          web,
          edit,
          add
        };
      }
    }).mount('#app'); // 挂载到DOM元素上
  </script>

  <style scoped>
  /* 可以在这里添加样式 */
  </style>
</body>
</html>