Vue2 起步

📅 2025-06-08

本节尝试使用 Vue.js 来输出Hello World。

首先在HTML文件中引入Vue.js 文件

<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>

页面输入下列内容：

<div id="app">
    {{ message }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

HTML完整代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"
        type="application/javascript"></script>
</head>

<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World ! '
            }
        })
    </script>
</body>

</html>

页面输出

Hello World !

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。

现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？

打开你浏览器的控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到页面在同步更新。

app.message = 'Hello Liuweb !';

修改后，页面发生了变化

我们并没有通过诸如 document.querySelector 等方式拿到DOM节点再进行数据修改，只是通过修改变量就实现了页面DOM元素更新，这就是Vue的魅力所在。