<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据如何双向绑定</title>
</head>
<body>
    <div id="app">
        <span>欢迎词：</span>
        代表宇宙人，{{message}}
        <div>
            {{message}}
        </div>
        <button id="btn1">改变message</button>
        <button id="btn2">改变Html</button>
        <hr>
        请输入：<input type="text" id="keywords" v-model="keywords">
        <button id="btnSearch">点击搜索</button>
        <form action="">
            <input type="text" v-model="in1">
            <input type="text" v-model="in2">
            <input type="text" v-model="in3">
            <input type="text" v-model="in4">
            <input type="text" v-model="in5">
        </form>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        let yourData = {
            message:'Hello Vue',
            keywords:'关键词',
            in1:'1',
            in2:'2',
            in3:'3',
            in4:'4',
            in5:'5',
        };

        let vm = new Vue({
            el:'#app',
            data:yourData
        });
    </script>
    <script>
        var btnE1 = document.getElementById("btn1");
        btnE1.onclick = function () {
            vm.message = '你好！学习课堂';
        }

        var btnE2 = document.getElementById("btn2");
        btnE2.onclick = function () {
            var appE1 = document.getElementById('app');
            appE1.innerHTML = "你好！无线课堂";
        }
    </script>
    <script>
        var btnSearchE1 = document.getElementById('btnSearch');
        btnSearchE1.onclick = function () {
            var keywordsE1 = document.getElementById('keywords');
            alert(keywordsE1.value);
            alert(vm.keywords);
        }
    </script>
</body>
</html>