初识vue3编写hello world以前面向dom编程,现在我们面对数据编程， 1、Vue.createApp 创建一

一、示例：

// index.html文件
//引入vue3的 cdn
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
     <script src="https://cdn.jsdelivr.net/npm/vue@3.4.5/dist/vue.global.min.js"></script> <!--vue提供的一个可以直接引入的一个cdn地址 可以直接编写vue代码-->
</head>
<body>
    <div id="root"></div>
    <div id="root1"></div>
</body>
<script>
    Vue.createApp({ 
        template:'<div>hello world</div>'
    }).mount('#root');
    Vue.createApp({ 
        data(){
            return{
                // content:'root1展示的模板内容'
                content:1
            }
        },
        mounted(){ 
            setInterval(()=>{
                // this.content += 1;
            },1000)
        },
        template:'<div>{{content}}</div>'
    }).mount('#root1')
</script>
</html>

二、逐行解析代码

以前面向dom编程,现在我们面对数据编程

     1、Vue.createApp 创建一个vue实例意思就是我要使用vue了
     2、template 顾名思义它是模板的意思,在此的意思是root要展示模板中的内容、
     3、mount('#root')的意思是我要在div的id='root'上使用vue了,可以看到,它是不会在root1上生效的
     4、在模板中使用变量展示数据
     5、mounted这个函数会在页面加载完成之后,自动加载
     6、this.content += 1;  this指的是data,this.content == this.$data.content,指的是data下的content
     7、mounted(){ 
            setInterval(()=>{
                this.content += 1;
            },1000)  由于mounted是自动加载,所以定时器生效,每隔1秒+1
       }