注:学习vue之前要有一定的HTML、CSS以及JavaScript基础

由于起步阶段不推荐新手直接使用vue的脚手架(vue-cli)来开发
所以这里我们使用CND引入->vue的安装方式

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    
    <div id="app">
        this is app{{message}}
    </div>

    <div class="test">
        this is test{{message}}
    </div>
    
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    // let-->定义变量    const-->定义常量
   //通过new关键字创建vue实列
    const app= new Vue({
        el:"#app",  //用于要挂载要管理的元素
        data:{   //定义数据
            message:"Hello World",
        }
    })
</script>
</body>



运行结果

this is app Hello World
this is test {{message}}


因为vue实列中el所挂载的元素是app,vue只会管理app内的元素,所以{{message}}在元素test中是无法被渲染出来的。