master

分支 (1)

管理

管理

master

lesson_zp
/
vue
/
todos
/
demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2 id="app"></h2>
    <input type="text" id="todo-input">
<script>
    // 先找到DOM元素 命令式 机械的 性能差的
    // JS(V8 快) -> HTML(渲染引擎 慢)  vue底层也做，代替我们做
    // vue 让新手写的代码质量更好，容易入门 v-for {{}} ref
    // 响应式，数据驱动，可以更好的基于业务
    const app = document.getElementById('app')
    const todoInput = document.getElementById('todo-input')
    todoInput.addEventListener('change', function(event) {
        const todo = event.target.value.trim();
        if (!todo) {
            console.log('请输入任务');
            return;
        }
        // 渲染到页面
        app.innerHTML = todo;
    })
</script>
</body>
</html>