hello.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 下面的网址是vue引入的库 可以直接使用并操作 -->
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <!-- vue是面向数据编程 -->
    <p>tempalte 是模板的意思 输入</p>
    <p>data 定义数据</p>
    <p>mounted 表示当页面加载完成后在开始执行的部分</p>
    <p>mount 选择节点</p>
    <div id="root"></div>
    <div id="root1"></div>


</body>
<script>
    Vue.createApp({
        template: '<div>hello world</div>'
    }).mount('#root');


    Vue.createApp({
        data() {
            return {
                content: 1
            }
        },
        mounted() {
            setInterval(() => {
                this.$data.content += 1;
            }, 1000)
        },
        template: '<div>{{content}}</div>'
    }).mount('#root1');


</script>

</html>