Vue.js 入门（速查表）

Vue 是一个非常棒的 JavaScript 框架，可以用来创建光速交互的 Web 应用。作为 Vue 新手，我自然会倾向于总结所学内容，以便更长时间地记住它。这是我之前做的总结。在做总结时，我会关注以下几点：
1：可读性。如果读起来不好，那还有什么意义呢？我不喜欢使用太多 JavaScript 术语，所以我会尽可能地让它写得通俗易懂。2
：我喜欢保持简洁，但又结构化且一致。

如果您认为有可以改进的地方，请在 Notion 上纠正我或在 Twitter 上给我发私信。

👋请在 Twitter 上关注我，让我们聊天吧！ 👋

安装 Vue 🌟

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

安装 Vue 非常简单。只需一行代码即可将其实现到你的页面中。如果你想开发一个完整的 Web 应用，则需要使用 Vue CLI/UI。教程即将发布！

编辑：您需要将 Vue 脚本和您自己的原始 JS 放在页面底部才能使其工作，请记住这一点！

使用 Vue 😎

要使用 Vue 的基础知识，您需要两样东西：

• HTML
  • 通过 ID 安装的元素
• 用于初始化元素的 Vue 脚本

首先，让我们看一下这个 HTML 代码：

    <div id="app">
      Hello, {{ message }}!
    </div>

现在，假设我们想在{{ name }}标签页中显示一条动态消息。该怎么做呢？

注意：双花括号用于向浏览器指示 this 引用 JavaScript。任何以这种方式工作的框架都是如此。

让我们为此编写代码并将其拆开：

    var app = new Vue({ // initalize the vue instance and include all details in ({})
    el: #app, // almost always detail #1: the element to mount (specificy).
    data: { // if we want to utilize data, we'll need to feed it some.
    name: "Lucas" // This is the {{ name }} we'll utilize
    }
    })

Vue 实例是一个包含大量细节的对象。我们会覆盖其中一些细节，并添加一些内容。如果你不明白这种表示法，可以学习JavaScript 中的对象。

反应性🎶

我们正在尝试制作一个交互式的 Web 应用，因此我们需要为其添加响应式功能。我们可以使用指令来实现。

V-if⛱

为了仅在数据返回 true 时显示元素，我们可以使用以下 HTML，假设我们已经导入，我们可以使用以下代码：

    <div id="app">
    <span v-if="seen"> Now you see me </span>
    </div>

现在，如果 'seen' 为 true（目前应该存在于你的数据元素中），这个 span 就会显示出来。JS 代码如下：

    var app3 = new Vue({
    el: #app,
    data: {
    seen: true
    }
    )}

在这种情况下，将显示此 span。很简单，对吧？
v-if这是一个指令。让我们来介绍更多指令。

V-bind✨

v-bind 指令用于响应式地更新HTML 属性。它的简写形式是:。最佳实践是使用简写形式。以下是 v-bind 指令在 HTML 中的简单使用示例

    <a v-bind:href="url"> Click me! </a>

让我们来分析一下：

• V-bind:是基本指令。该指令始终包含在内。
• 在冒号后面:我们包含了我们想要绑定的属性，在本例中是href。
  • 注意：您可以在此处找到 JS 术语中可绑定属性的列表。
• 然后，与任何属性一样，我们使用=来输入字符串，该字符串将告诉我们要绑定的内容。在本例中是url。

V-bind 可用于创建动态布局、更改 URL 等。一个用例是绑定backgroundColor到最上层div，让用户更改自己的背景颜色。任何响应式样式的需求都可以在这里实现。

V-on📩

v-on 指令用于将 DOM 事件绑定到 Vue 方法。它的简写v-on是@。我们来看一个简单的例子：

    <div id=app> <button @click="trigger"> </button> </div>

让我们来分析一下：

• 这@是v-on
• click是我们正在关注的 DOM 事件
• ="trigger"告诉 Vue 在检测到 DOM 事件时执行此方法或函数。

请注意，click事件必须发生在元素上，而不是元素外部。

V-for🔥

V-for 指令用于从数组创建列表。V-for 循环遍历数组来创建列表。仔细看看这个语法，一开始我有点困惑：

    <ul id="example1"> <!-- note that you do NOT need to mount this specific element for this -->
    <li v-for="item in items">
    {{ item.message }}
    </li>
    </ul>

下面是 JS 代码：

    var arraylist = new Vue({
    el: '#example-1',
    data: {
        items: [
            { message: 'Hello!' },
            { message: 'List item two :)' }
            ]
        }
    })

让我们来分析一下：

• 首先，我们再次正确地安装元素。不必是ul元素。
• 然后，我们添加数据。我们也添加了“items”数组。
• items 数组由两个未命名的对象组成，它们都包含一条消息
• 调用il.是我们赋予数组中任何项目item in items的item名称，然后在il****元素内部引用它。
• 现在 DOM 已准备好循环遍历数组，我们可以指定更多信息：您将循环遍历什么？
• 在这种情况下，我们将循环遍历 items 内的每条消息（每个item in items）

V-model🤯

假设我们想使用用户的输入作为我们在屏幕上看到的内容的模型……看到我做了什么了吗？这正是 v-model 指令的作用。它允许轻松绑定表单输入。我们来看看代码：

    <div id="app">
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
    </div>

基本上就是这样。别忘了在 JS 部分定义“message”的默认值：

    var app1 = new Vue({ 
    el: "#app",
    data: {
    message: ""
    }
    })

V-text💭

文本的 v-model，但它根本不是 v-model，您可以将任何位置的文本值动态绑定到文本。

    <p v-text="Hello!"> </p> // Now the text will display "Hello!"

V-once💯

V-once 不需要参数。它告诉 DOM 不要根据 Vue 被动更新元素内部的所有内容。

    <span v-once> {{ name }} </span> // will not update reactively

这将是一个系列！接下来我会更深入地讲解，做一些 Vue.JS 的教程，讲解如何实现各种功能，然后再讲解 Vue CLI 和 Vue UI。

👋请在 Twitter 上关注我，让我们聊天吧！ 👋

https://upscri.be/za52nm