VueJS 基础知识

我最近开始学习一些 VueJS 的知识。我想分享我的学习成果，帮助其他人入门 Vue，同时也巩固我自己的理解。本教程要求您熟悉 HTML、CSS 和 JavaScript。您还需要一些本地开发服务器，例如live-server。所以，事不宜迟，让我们开始吧。

设置项目

导航到您选择的项目目录并创建 2 个文件，index.html和app.js，内容如下。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Import VueJS from CDN. In a production app, we wouldn't do 
    it this way. Instead, we would download the libraries locally or 
    use vue-cli -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      body {
        width: 80%;
        margin: auto;
      }
    </style>
    <title>Vue Basics</title>
  </head>

  <body>
    <!-- This will be our "root" element for Vue
    Everything that we do with Vue will be rendered inside
    this tag. 
     -->
    <div id="app">
      <!-- In app.js, we are giving the Vue engine a data object. 
      One of the properties of this object is :title. The following 
      line tells the Vue engine to output that value -->
      <h1>{{ title }}</h1>
    </div>

    <script src="app.js"></script>
  </body>
</html>

// app.js

// Here we are initializing the Vue engine, telling it where 
// we want to render, and giving it some data
new Vue({
  // the "el" property tells the Vue engine where in the DOM we 
  //want to render our content. Below, we are telling Vue to use 
  // the element with id=app
  el: "#app",
  // The "data" property is where we give the Vue engine our data. 
  // In this case, we're giving a title
  data: {
    title: "Welcome to Vue!"
  }
});

现在启动你的开发服务器，并在浏览器中导航到正确的 URL。Live-server 应该从http://localhost:5500/启动。希望代码中的注释足以让你了解目前为止发生了什么。在我们的 HTML 中，双括号{{}}允许我们访问 Vue 实例中的数据。现在让我们做一些更有趣的事情。

自定义方法

我们可以创建自定义方法供 Vue 引擎使用。现在我们来看一下实际操作。在 app.js 中，我们添加另一个数据属性和一个方法，如下所示。

new Vue({
  el: "#app",
  data: {
    title: "Welcome to Vue!",
    name: "Big Boss"
  },

  methods: {
    greet() {
      return `Hello ${this.name}`;
    }
  }
});

现在让我们在视图中使用该方法，如下所示：

<!-- For brevity I'm only showing the "root" element where Vue is 
rendering -->
<div id="app">
  <h1>{{ title }}</h1>
  <h2>{{ greet() }}</h2>
</div>

再次，我们可以在双括号内调用 Vue 实例中的方法。在浏览器中，你应该会看到“Hello Big Boss”渲染到页面上。现在，让我们来看看简单的数据绑定。

使用 v-bind 进行数据绑定

通过数据绑定，我们可以将视图元素绑定到模型属性，这样当模型更新时，视图也会自动更新。这是一种从模型到视图的单向绑定。我们稍后会了解双向绑定。现在，让我们进行一个简单的单向绑定，将元素的 class 属性绑定到模型属性。我们使用v-bind指令来实现。在app.js中，更新数据对象，如下所示。

// app.js
data: {
    title: 'Welcome to Vue!',
    name: 'Big Boss',
    my_cool_class: 'cool'
}

在index.html中，在我们现有代码下方（仍然在我们的“app”div 内），让我们创建一个h1标签并将其类绑定到“my_cool_class”属性。

<!-- Data-binding -->
<!-- Bind our class attribute to a model property -->
<h1 v-bind:class="my_cool_class">Hi there {{ name }}</h1>

在我们的内联 CSS 中，添加一个名为.cool的类选择器，并根据需要设置其样式，以便查看效果。如果在渲染后的 DOM 中检查上面的 h1 元素，您会发现它有一个“cool”类。附注：您可以使用v-bind指令的简写语法，即：后跟要绑定的属性，如下所示：

<!-- Data-binding (shorthand) -->
<h1 :class="my_cool_class">Hi there {{ name }}</h1>

双向绑定

好的，这很酷。我们能够将视图属性绑定到数据属性，但这只是单向的。现在，让我们使用v-model指令对name属性进行双向绑定。在 index.html 中，将以下内容添加到我们的 app div 中。

<!-- Two-way binding with v-model -->
<input type="text" v-model:value="name" />

在浏览器中查看时，您应该会看到输入框已包含值“Big Boss”。当您更改此值时，您应该会看到我们之前的h1标签中的值也更新了。是不是很酷？！正确答案非常酷。v-model指令告诉 Vue 绑定到特定属性，并在视图中更改该属性时更新该属性。我鼓励您进一步尝试。也许可以在内部 CSS 中创建另一个样式选择器，并尝试与my_cool_class进行双向绑定。

结论

在本文中，我介绍了 VueJS 的一些基础知识。我计划继续这个系列，至少涵盖一些更基础的内容，例如：

处理事件
条件渲染
循环

甚至可能还有更多，敬请期待。希望以上内容对您有所帮助，欢迎您随时提出评论/批评/请求！

Github 仓库

文章来源：https://dev.to/nkratzmeyer/vuejs-basics-19mo