vue.js 速成课程(1)：第一步

什么是 Vue.js

Vue.js 是一个渐进式 JavaScript 框架，用于构建 Web 界面和单页应用程序。Vue.js 还用于通过 Ionic 和 Electron 框架进行桌面和移动应用程序开发。

Vue 第一步
为了尽快开始学习，现在我们只使用 Vue CDN链接。稍后我们将学习如何以正确的方式启动真正的生产 Vue 应用程序。

所以让我们创建一个非常基本的 Vue.js 页面

从你最喜欢的代码编辑器中，创建一个名为 index.html 的文件名。在该文件中创建一个基本的 html5 文件。

在此 index.html 头部部分，我们将添加 Vue CDN 链接

<script src="https://unpkg.com/vue@next"></script>

仍然在 index.html 中，我们将此代码添加到 body 部分

<div id="app"></div>
<script src="app.js"></script>

因此，一个 div 的 id 等于 #app，一个脚本标签的源为 app.js

现在，让我们在同一个文件夹中创建一个名为 app.js 的文件

该文件将包含我们的 Vue.js 代码。

完成后，打开 app.js 并添加此 Vue 初始化代码

const app = Vue.createApp({});

app.mount("#app");

所以这段代码很简单。首先，我们创建一个 Vue 实例，然后将 Vue 应用程序挂载到我们刚刚在 index.html 中创建的 #app div 上。

所以正如你所猜测的，Vue 将控制/管理该 div 内容。

Hello World Vue
经典就是经典，我们必须做一个 Hello World。

在 index.html 中，我们将此内容添加到 #app div

<div id="#app">
    <h1>{{ message }}</h1>
</div>

双括号会告诉 Vue，此文本不是常规文本，而是 Vue 表达式。然后，Vue 将解析此表达式并返回双花括号中的值

在 app.js 中添加此代码 Vue.createApp

const app = Vue.createApp({
    data() {
        return {
            message: "Hello World Vue",
        };
    },
});

data 函数是 Vue 返回包含数据的对象的位置和方式。在此示例中，data 返回具有属性名称 message 的对象。message 的内容设置为字符串“Hello World Vue”。

然后可以在我们的 Vue 代码内部或 Vue 代码外部的链接安装的 html 元素中使用此 message 属性。（#app div）

要在 Vue 代码中引用 message 属性，我们可以使用

this.message = "Another message";

需要注意的是，当这些数据发生变化时，视图将重新渲染并显示新值。

要在 Vue 代码之外但在链接安装的 html 内部引用消息属性，我们可以使用双括号

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

在运行时，Vue 将用实际内容替换消息属性。

渲染其他变量类型
Vue 不仅可以渲染字符串，还可以在 dom 中渲染数字、日期、数组和任何表达式。

例如，让我们创建更多属性。打开 app.js 并添加以下几行：

data() {
    return {
        message: 'Hello World Vue',
        number1: 500,
        number2: 250
    }
}

打开 index.html 并添加以下行：

<div id="app">
    <h1>{{ message }}</h1>
    {{ number1 + number2 }}
</div>

就像前面提到的，你也可以将表达式放在花括号内，Vue 将渲染表达式结果。在这种情况下将显示 750。