第一步，创建html页面，这里使用vscode中的快捷键生成代码 vscode中输入一个! 即可生成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>
</head>
<body>
    
</body>
</html>

第二步 ，引入vue的js文件，类似jquery。这个不能直接将js文件复制到vscode中，应该从文件夹中复制该工程中

vue快速入门_html


vue快速入门_数据_02


这样就会显示出来

在里面讲js文件引入

<!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>
</head>
<body>
    <script src="vue.min.js"></script>
</body>
</html>

第三步，在html页面创建div标签，div添加id属性

<div id="app"></div>

第四步 编写vue代码，固定的结构

<script>

    // 创建一个vue对象
    new Vue({
        el: '#app',//绑定vue作用的范围
        data: {//定义页面中显示的模型数据
            message: 'Hello Vue!'
        }
    })

</script>

第五步 使用插值表达式，获取data里面定义值

就是里面加两个大括号来获取值

<!-- id标识vue作用的范围 -->
<div id="app">
    <!-- {{}} 插值表达式，绑定vue中的data数据 -->
    {{ message }}
</div>

第六步，测试成功

vue快速入门_插值_03

完整代码如下

<!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>
</head>
<body>
    <div id="app">
         <!-- {{}} 插值表达式，绑定vue中的data数据 -->
         {{ message }}
    </div>
    <script src="vue.min.js"></script>
    <script>
        // 创建一个vue对象
        new Vue({
            el: '#app',//绑定vue作用的范围
            data: {//定义页面中显示的模型数据
                message: 'Hello Vue!'
            }
        })
    
    </script>
</body>
</html>