黄阿信的个人博客

前言

Vue 是一套用于构建用户界面的渐进式框架 ，利用Vue可以方面地经行中小型项目的快速构建，它的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。这里是它的官网链接

最简单的例子

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{ message}}
    </div>
    <!-- 导包 -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello world",
            }
        });
    </script>
</body>

</html>

一定要导包，可以下载到本地使用，也可以直接通过远程导入的方法导入，对于制作项目，推荐下载到本地，如果只是学习，直接远程导入即可，但是前提是要有网络

el挂载点

作用域：el指定的标签范围，即在这个范围之下
```
    <div id="app">
        {{ message}}
    </div>
```

选择器的类型：不限于id选择器，下面的三个都是可以的

<body>
    <div class="app">
        {{ message}}
    </div>
    <!-- 导包 -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            // 注意看这里
            el: ".app",
            data: {
                message: "你好",
            }
        });
    </script>
</body>

<body>
    <div>
        {{ message}}
    </div>
    <!-- 导包 -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            // 注意看这里
            el: "div",
            data: {
                message: "你好",
            }
        });
    </script>
</body>

<body>
    <!-- 注意看这里 -->
    <p id="app">
        {{ message}}
    </p>
    <!-- 导包 -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            // 注意看这里
            el: "#app",
            data: {
                message: "你好",
            }
        });
    </script>
</body>

值得注意的是，el不能够挂载到单标签和body标签中，建议使用id选择器和挂载到div中。

date数据对象

Vue中用到的数据定义在data中
data中的数据类型不限于字符串，还可以是复杂的数据类型，如对象，数组

渲染复杂类型数据时，遵守js的语法即可，如

data: {
    message: "你好",
    student: {
        name: "YaleXin",
        age: 20,
        address: "earth",
    },
    test_array: [1, 2, 3, 4, 5, 6],
}

引用时加上双大括号即可

<div id="app">
    {{ message }}
    {{student.name}}
    <ol>
        <li>{{test_array[0]}}</li>
        <li>{{test_array[2]}}</li>
    </ol>
</div>

Vue框架

前言

最简单的例子

el挂载点

date数据对象