Vue入门

Vue.js 是一个由 Evan You 于 2014 年创建的渐进式框架，它允许你构建用户界面。如果你有 React 的背景，学习 Vue 会很容易，因为概念基本相同。但如果你习惯了纯 JavaScript 或 jQuery，那么 Vue 的学习体验将会截然不同！

确实，管理应用程序的状态很麻烦。Vue 通过为应用程序引入响应式特性来解决这个问题。这意味着什么呢？简单来说，每当应用程序发生更改时，UI 都会自动更新。此外，你还可以将应用程序拆分成称为组件的代码块。组件的优势在于易于创建、组合和重用。

声明式渲染和第一个指令：v-bind

Vue 的一大优势在于能够以简单的方式将数据渲染到 DOM（文档对象模型）中。以下是使用 Vue 实现响应式数据的第一个示例：

<div id="app">
  <p>My name is {{ name }}</p>
</div>

new Vue({
  el: "#app",
  data: {
    name: "James Bond",
  },
});

哇。这里发生了什么？这是什么data？这些都是很合理的{{ name }}问题el，我会马上回答。

查看 JavaScript 代码，可以看到我们创建了一个新的 Vue 实例（new Vue）。我们使用 `mount` 属性指定了该实例的挂载位置el，也就是说，在 ` div<div> id` 标签中#app。最后，我们data向该实例提供了一个对象。我们设置了一个 ` namevalue` 属性，其值为 `<div>` James Bond。

返回 HTML 文件。您可以看到一个p包含 `<script>` 标签的元素My name is {{ name }}。通过使用这两个双括号，您告诉 Vue：

“你看到数据中的这个 name 属性了吗？请把它的值填入这些括号里！”

奇迹发生了。Vue 在幕后做了很多工作，让你的数据具有响应式特性。这意味着，无论何时你修改name属性，更改都会立即反映到 DOM 中。这太酷了！

绑定属性

Vue 可以将元素的属性绑定到数据属性上。绑定意味着保持属性与数据属性同步。您可以使用指令v-bind:ATTRIBUTE或简写来实现这一点:ATTRIBUTE。让我们来看一个例子：

<div id="app">
  <input v-bind:placeholder="placeholder" />
</div>

new Vue({
  el: "#app",
  data: {
    placeholder: "James Bond",
  },
});

条件渲染：v-if

v-if我敢打赌，光看名字你就能猜到它的用途了。它用于条件渲染：根据条件渲染元素。例如，你可能只想在用户是管理员时才渲染某些元素：

<div id="app">
  <p>Hello World</p>
  <p v-if="admin">You can see this sentence because you're an admin</p>
</div>

new Vue({
  el: "#app",
  data: {
    admin: false,
  },
});

以上例为例，您有：You can see this sentence because you’re an admin。如果您使用该应用程序，您只会看到这句话，因为传递给它的条件v-if是true（admin）。

Vue 还提供了另一个条件指令：v-else`@on`。例如，您是否注意到某些网站在您登录后导航栏会发生变化？您可以想象一下，登录按钮和注册按钮会被个人资料或帐户按钮取代。这种行为正是 `@on` 和 `@ v-ifon`的完美用例v-else。

带有 v-on 的事件

这是一个你会经常用到的指令。它允许你将事件监听器附加到元素上。v-on:event="method"这些事件触发时，会调用你的 Vue 实例的方法。你可以使用 `@EventListener`或简写形式 `@EventListener`来调用它们@event="method"。

如果你有 React 背景，这类似于onClick`on` onChange、`on` 等事件。Vue 也有类似的事件：@click`on`、@keyup`on` @input、`on` 等。

现在你可能会想：“等等，他说的这些方法到底是什么？”。在 Vue 中，你可以methods像使用 `<script>` 标签一样，通过向 Vue 实例提供一个对象来为组件添加方法。使用方法相比普通的 JavaScript 函数的优势在于，方法可以访问 Vue 实例中声明的数据。由于你可以访问这些数据，因此你可以在方法中data修改组件的属性：data

<div id="app">
  <button @click="changeMessage">
    Click on me to change the sentence below
  </button>
  <p>{{ message }}</p>
</div>

new Vue({
  el: "#app",
  data: {
    message: "Hello world!",
  },
  methods: {
    changeMessage() {
      this.message = "Hey everyone!";
    },
  },
});

这里的新特性是使用了this`.`。这里，`.`this直接指向 Vue 实例。因此，你可以使用 `.` 从方法中轻松访问数据属性。这里，我们通过在`.` 方法中this.PROPERTY_NAME为 `.` 赋值来访问和更改消息。this.messagechangeMessage

使用 v 模型的用户输入

在应用中，你经常需要获取用户输入。幸运的是！Vue 已经为你准备好了v-model。实际上，你可以使用双向绑定指令来实现这一点。双向绑定意味着：

当模型的属性发生变化时，更改绑定的元素。
当绑定元素发生变化时，改变模型的属性。

<div id="app">
  <input v-model="message" />
  <p>{{ message }}</p>
</div>

new Vue({
  el: "#app",
  data: {
    message: "Hello World",
  },
});

以下是使用该功能时幕后发生的情况v-model：

它input通过以下方式绑定到属性v-model（从而实现双向绑定）
输入的初始值为message，即Hello World。
你输入一些内容，比如说Hey everyone!
每当输入发生变化时，input都会向 Vue 实例发送一个事件。
Vue 会改变message属性。
由于message这是一个响应式属性，视图会随之更新，并且这些更改已反映到您的元素中。换句话说，p标签中包含了新的值。message

你知道吗？`&&`v-model只是 `&& :value` 和 `&&`的语法糖@input。下面的代码与 `&&` 的功能相同v-model：

<input :value="message" @input="message = $event.target.value" />

实际上，每当你更改输入框时input，都会向 Vue 实例发送一个事件。这个事件包含一个target指向输入元素的对象。因此，你可以访问它的值并修改data属性。由于:value该对象绑定到这个数据属性，所以更改会立即生效。这并不难理解，对吧？🚀

使用 v-for 循环

在开发应用程序时，总会有需要渲染列表的时候：

聊天信息
搜索结果
设置
购物车商品
ETC。

Vue 再次提供了另一个处理列表的指令：v-for。

您可以使用以下语法：v-for="item in list"。这里，list指的是您要遍历的数组，而是item一个数组元素的别名：

<div id="app">
  <p>Things I want to buy:</p>
  <ul>
    <li v-for="thing in things">{{ thing }}</li>
  </ul>
</div>

new Vue({
  el: "#app",
  data: {
    things: ["Piano", "Car", "House"],
  },
});

你还可以提供第二个参数v-for：

对于数组，第二个参数将是数组当前元素的索引。
对于一个对象，第二个参数将是该对象当前元素的键。

<li v-for="(thing, index) in things">{{ thing }}</li>

成分

到目前为止，你只了解了 Vue 指令和响应式编程。但正如之前提到的，Vue 也允许你创建组件：

Vue.component("my-component", {
  template: "<div>My component</div>",
});

你可以使用 `createComponent` 方法创建一个新组件Vue.component。该方法的第一个参数是组件名称（my-component在本例中为 `<component_name>`）。与之相对，第二个参数是一个定义组件的对象。该对象的一个属性是 `<head>` template，它对应于组件的 HTML 代码。此外，还有 `<head>`data和methods`<body>`，实际上，几乎所有 Vue 实例的属性都包含在内，因为这些组件本身也是 Vue 实例！

道具

这就是组件的真正魅力所在。当你在应用程序中组合组件时，就会出现父组件和子组件。因此，组件之间的通信至关重要。一种方法是通过props父组件与子组件之间的通信。

以下是如何使用道具：

在子元素上设置一个props属性。该属性的值props是一个数组，其中包含父元素传递给子元素的所有属性。
在父级模板中，将组件元素所需的所有属性传递给它们。

注意：如果需要从 Vue 实例传递数据，也可以绑定 props。

<div id="app">
  <person name="Jack" age="19" country="Australia"></person>
  <person name="Emily" age="28" country="France"></person>
</div>

Vue.component("person", {
  template: `
  <div>
    <p>{{ name }}</p>
    <p>Hello my name is {{ name }} and I'm {{ age }}! I live in {{ country }}.</p>
  </div>
  `,
  props: ["name", "age", "country"],
});

new Vue({
  el: "#app",
});

通过向组件传递一个props属性，我们将数据从父组件传递到子组件。

笔记：

构建数组时必须考虑周全props。如果漏掉任何一个属性，数组都无法正常工作。
随着模板长度的增加，您需要使用模板字符串来定义多行模板。
定义模板时，务必只保留一个根元素。否则，模板将无法正常工作。

自定义事件

我们知道如何从父组件向子组件传递信息。现在让我们看看反过来是怎么做的。我们可以通过使用自定义事件来实现。就像 props 一样，我们需要在父组件和子组件上分别定义一个值：

在子组件中，您需要使用该$emit函数。此函数接受两个参数：事件名称和要发送给父组件的数据（可以是对象、字符串、数组等）。
在父级模板中，使用v-on（或@）来监听子级将发出的事件。

<div id="app">
  <p>I'm the parent</p>
  <child @send="alertMessage"></child>
</div>

Vue.component("child", {
  template: `
  <div>
    <p>I'm the child</p>
    <button @click="send">Send a message</button>
  </div>
  `,
  methods: {
    send() {
      this.$emit("send", "Hello!");
    },
  },
});

new Vue({
  el: "#app",
  methods: {
    alertMessage(message) {
      alert("My child sent me a message, it says: " + message);
    },
  },
});

点击值为以下值的按钮后，会发生以下情况Send a message：

由于子对象有click监听器，因此该send方法会被触发。
在 `<on> ` 中send，子进程send向父进程发出一个事件并传递字符串。Hello!
父节点接收到send来自子节点的事件，该alertMessage方法被触发。
在函数中alertMessage，我们调用该alert函数并显示孩子的留言，内容为：Hello!

通过构建待办事项应用程序进行回顾

信不信由你，你现在已经可以用上面学到的知识构建一个小型应用程序了。下面你会看到如何使用 Vue 构建一个待办事项应用程序：

<div id="app">
  <p>What should I do today?</p>
  <ul>
    <todo-item v-for="todo in todos" :todo="todo" @toggle="toggle"></todo-item>
  </ul>
  <input
    v-model="nextTodo"
    @keyup.enter="addTodo"
    placeholder="What's your next task?"
  />
</div>

Vue.component("todo-item", {
  template: `
  <li class="todo-item">
    <input type="checkbox" @change="$emit('toggle', todo)" :checked="todo.done" />
    <span class="todo-item-text" :class="{'todo-item-checked': todo.done}">{{ todo.name }}</span>
  </li>
  `,
  props: ["todo"],
});

new Vue({
  el: "#app",
  data: {
    todos: [
      { name: "Learn Vue.js", done: true },
      { name: "Build an app", done: false },
    ],
    nextTodo: "",
  },
  methods: {
    addTodo(event) {
      this.todos.push({ name: this.nextTodo, done: false });
      this.nextTodo = "";
    },
    toggle(todo) {
      todo.done = !todo.done;
    },
  },
});

瞧！你现在已经用 Vue 构建了一个基本的应用程序。这仅仅是个开始，但相信我，Vue 及其生态系统还有更多功能：计算属性和监听器、生命周期钩子、插槽、使用 Vue CLI 生成项目、使用 Vue Router 进行路由或使用 Vuex 进行集中式存储。

文章来源：https://dev.to/thomaslombart/getting-started-with-vue-bpl

菜单

分享

Vue入门

Vue入门

声明式渲染和第一个指令：v-bind

绑定属性

条件渲染：v-if

带有 v-on 的事件

使用 v 模型的用户输入

使用 v-for 循环

成分

道具

自定义事件

通过构建待办事项应用程序进行回顾

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码