一、vue dev tools下载安装？

直接翻墙 chorme 商店搜索下载

二、什么是mvvm ? 什么是spa单页面web应用？

1.mvvm

在这里插入图片描述

2.spa单页面web应用

在这里插入图片描述

三、数据定义和渲染？

1、我们先看一下 vue 都可以定义那些数据，以及如何定义？

<html>

<head>
    <title>vue</title>
    <meta charset="utf-8">
</head>
<style>

</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <!-- 这是一个容器  -->
    <div id="box">

    </div>
</body>

</html>
<script>
    var vm = new Vue({
        // 挂载到容器上
        el: "#box",
        // 这个地方使用 data函数  保护变量不污染其他组件
        data() {
            return {
                // 定义字符串
                name: 'fhj',
                // 定义数字
                age: 18,
                // 定义对象
                obj1: {
                    name: 'wang',
                    age: 19
                },
                // 定义数组
                arr1: [{
                    name: 'li',
                    age: 20
                }],
            }
        },
        // vue 生命周期 已经创建完成
        created() {
            console.log(this.name);
            console.log(this.obj1);
            console.log(this.arr1);
        }
    })
</script>

2、我们写的这些数据如何在页面中渲染出来？

有一个需要很注意的事情 v-for 循环需要注意绑定一个:key="data.id"

<html>

<head>
    <title>vue</title>
    <meta charset="utf-8">
</head>
<style>

</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <!-- 这是一个容器  -->
    <div id="box">
        <!-- 数字和字符串 直接渲染 -->
        <h2>{{name}}-{{age}}</h2>
        <!-- 对象需要使用属性渲染 -->
        <h2>{{obj1.name}}-{{obj1.age}}</h2>
        <h2>----分隔开----</h2>
        <!-- 数组先循环一下 再按照属性渲染出来（数组里面是对象） -->
        <h2 v-for="data in arr1" :key="data.id">{{data.name}}-{{data.age}}</h2>
    </div>
</body>

</html>
<script>
    var vm = new Vue({
        // 挂载到容器上
        el: "#box",
        // 这个地方使用 data函数  保护变量不污染其他组件
        data() {
            return {
                // 定义字符串
                name: 'fhj',
                // 定义数字
                age: 18,
                // 定义对象
                obj1: {
                    name: 'wang',
                    age: 19
                },
                // 定义数组  这个数组里面是两个小对象
                arr1: [{
                    name: 'li',
                    age: 20
                }, {
                    name: 'zhang',
                    age: 21
                }],
            }
        },
        // vue 生命周期 已经创建完成
        
    })
</script>