提示

本文主要讲解 Vue 入门知识。@ermo

# Vue 入门

Vue 是一个基于 JavaScript 的前端框架。

学习 Vue 前必须要了解的知识有:HTML、CSS、JavaScript、AJAX。

只需3个步骤就可以使用 Vue。

创建一个简单的 html 网页,引入 Vue 包。

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

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</body>
</html>

添加一个 div 元素。

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

<body>
    <div id="app">
        {{ message }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</body>
</html>

添加一个 Vue 对象,与上面 div 元素进行绑定。

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

<body>
    <div id="app">
        {{ message }}
    </div>

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

在浏览器打开当前 html 网页,可以看到下面内容。

Hello Vue!
上次更新: 4/29/2022, 10:41:34 AM