html

<div id="app">
    <h3>{{ msg }}</h3>
    <h3>{{ web.url }}</h3>
    <h3>{{ web.user }}</h3>
    <h3>{{ sub(100, 20) }}</h3>

    <!-- v-on:click 表示在 button 元素上监听 click 事件 -->
    <button v-on:click="edit">修改</button> <br>

    <!-- @click 简写形式 -->
    <button @click="add(20, 30)">加法</button> <br>

    <!-- 
        enter space tab 按键修饰符
        keyup是在用户松开按键时才触发
        keydown是在用户按下按键时立即触发
    -->
    回车 <input type="text" @keyup.enter="add(40, 60)"> <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>

js

<script type="module">
    import { createApp, reactive } from './vue.esm-browser.js'
    
    createApp({
        setup() {
            const web = reactive({
                title: "邓瑞编程",
                url: "dengruicode.com",
                user: 0
            })

            const edit = () => {
                web.url = "www.dengruicode.com"
                //msg = "邓瑞编程" //错误示例 不能直接改变msg的值,因为msg是一个普通变量, 不是响应式数据
            }

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

            const sub = (a, b) => {
                return a - b
            }

            return {
                msg: "success", //普通变量, 非响应式数据, 在模板中普通变量不会自动更新
                web, //响应式数据
                edit, //方法
                add,
                sub,
            }
        }
    }).mount("#app")

</script>