Vue.js入门笔记2

一、简单回顾

Vue实例接收一个对象，该对象中包含两个重要的属性el和data，其中el属性的主要功能是确定该Vue实例的作用范围，而data属性的主要功能是填充Vue所绑定的某个DOM元素的内容

二、el和data的进一步使用

2.1 el属性

el属性的值可以是css任意一种选择器，如果当前html文档中，某个DOM元素满足该选择器，那么这些DOM元素都将与el属性所属的Vue实例绑定

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="class1">
        {{ msg }}
    </div>
    <div id="id1">
        {{ msg }}
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
        const id1 = new Vue({
            el: "#id1",
            data: {
                msg: "你好, id!"
            }
        })
        const class1 = new Vue({
            el: ".class1",
            data: {
                msg: "你好, class!"
            }
        })
    </script>
</body>
</html>

2.2 data属性

data属性中可以包含任意js支持的类型，比如对象类型，数组类型，整型等等

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用vue绑定复杂数据类型</title>
</head>
<body>
    <div id="app">
        绑定的是一个对象: {{ obj }}
        <br>
        绑定的是一个数组: {{ arr }}
        <br>
        绑定的是一个整型: {{ integer }}
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                obj: {
                    username: "张三",
                    age: 18
                },
                arr: ["数组元素1", "数组元素2"],
                integer: 100
            }
        })
    </script>
</body>
</html>