开始你的第一个Vue实例！

一、引入vue.js

可以有两种方式导入js文件
方式一：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -- 学习可以用这个
方式二：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> --生产环境用这个，可以指定版本

二、创建和绑定Vue实例对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
       el: '#app',
       data: {
           message: 'hello Vue'
       }
    });
</script>
</body>
</html>

效果图：

注意：

1. 我们通过el属性绑定到html中id为app的页面元素上
2. 通过{{ }}我们可以在元素的作用范围中获取到vue对象的值

三、获取vue对象中data的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{student.name}}的年龄是  #通过对象.属性的方式获取值
    {{student.age}}爱好分别是：
    {{student.hobby[0]}}、  #对于数组，我们通过数组[index]来获取值
    {{student.hobby[1]}}、
    {{student.hobby[2]}}

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            student: {
                name: 'xiaoming',
                age: 18,
                hobby: [
                    'sing-songs','dance','rap'
                ]
            }
        }
    });
</script>
</body>
</html>