V

Vue 初学者完整指南

2025-05-24

Vue 初学者完整指南

Vue.js 是一个针对渐进式集成进行了优化的前端框架。这意味着您可以只集成几个 Vue 组件来构建一个大型应用程序，或者您也可以从头开始，完全在 Vue 生态系统中开发。

Vue 的另一个独特之处在于，与许多框架相比，它的学习曲线更低。你无需理解复杂的主题，只要掌握 HTML、CSS 和 JavaScript，就已经非常接近了！

与任何框架一样，它为您的前端添加了结构和实用程序，以便您的应用程序在增长时更容易扩展，更有条理，并且您不必经常“重新发明轮子”。

Vue 也非常酷，因为它的生态系统集成得很好——许多通常是第三方库的实用程序都是由 Vue 核心维护者构建的，比如Vue Router和Vuex。

通过这篇文章，我们将探索 Vue 的主要功能，并一起创建一个应用程序！

以下是我们将要构建的内容，不过会添加一些更具交互性的功能。点赞按钮会根据用户点击次数从心形轮廓切换为红心。此外，当有人在文本框中输入内容时，字符数也会倒计时。

继续查看上面的 HTML 和 CSS 代码，我们将使用我们的 Vue 代码构建 HTML。

设置 Vue 应用

目前，我们将使用 Vue CDN——我们希望有一个极简的设置。将来，您可能需要一个更复杂的环境，在这种情况下，您可以使用Vue CLI。

转到settingsCodepen 上的按钮，切换到 JavaScript 选项卡，然后在 CDNjs 上搜索“Vue”。这会将 Vue 库添加到我们的项目中，这样我们就可以使用 Vue 提供的所有方法和功能了。

现在，我们需要创建一个 Vue 实例并将其附加到我们的 HTML 中，以便完全集成 Vue！

让我们创建一个const存储我们Vue实例的文件。

const app = new Vue()
Enter fullscreen mode Exit fullscreen mode

当我们创建这个 Vue 应用程序时，我们将传递一个对象，它现在将包含我们所有的配置和应用程序逻辑。

我们要添加到该对象的第一件事是el——我们希望将其作为 Vue 应用的基础元素。在本例中，该元素带有statusclass。

const app = new Vue({
  el: ".status"
})
Enter fullscreen mode Exit fullscreen mode

然后，我们添加我们的data。为了测试一下，我们添加tweetTextas 数据——这样我们Hello World!现在的位置就会变成一个变量。以后我们会用不同的文本发布更多推文，所以让这部分推文动态化是合理的。

const app = new Vue({
    el: ".status",
    data: {
        tweetText: "Hello World!"
    }
})
Enter fullscreen mode Exit fullscreen mode

当我们想要添加更多动态数据（或在我们的 Vue 应用程序内发生变化的数据）时，我们会向该data对象添加更多属性。

现在，我们可以在 HTML 中使用新创建的数据，并以此方式插入变量！如果你曾经使用过 Handlebars 或其他模板语言，那么操作起来就类似这样。

如果您转到 HTML 中的硬编码“Hello World！”，我们现在可以用{{tweetText}}从我们的 Vue 数据中提取的数据来替换它！

<p class="tweet-text">
  {{ tweetText }}
</p>
Enter fullscreen mode Exit fullscreen mode

尝试在 Vue 中改变您的tweetText，它也会改变您的输出！

让我们集思广益一下，看看我们还有哪些数据会在应用程序的过程中发生变化。

  • 心形图标将在“喜欢”和“不喜欢”之间切换
  • 当我们输入

让我们继续为我们的data对象添加属性。

data: {
    tweetText: "Hello World!",
+    charactersRemaining: 280,
+    liked: false
}
Enter fullscreen mode Exit fullscreen mode

我们还将charactersRemaining在 HTML 中使其动态化。

<span class="characters-remaining">
  {{ charactersRemaining }} characters remaining
</span>
Enter fullscreen mode Exit fullscreen mode

我们暂时不讨论该liked属性，稍后再讨论。

方法

现在我们有了数据，我们需要根据用户操作进行更新。

我们将向我们的 Vue 对象添加另一个属性——这个属性将存储我们的方法。

const app = new Vue({
    el: ".status",
    data: {
        tweetText: "Hello World!",
        charactersRemaining: 280,
        liked: false
    },
    methods: {}
})
Enter fullscreen mode Exit fullscreen mode

我们的应用有两个“操作”——切换“点赞”和在用户输入时更改剩余字符数。我们先来处理字符数统计。

我们首先向我们的方法对象添加一个函数：

methods: {
    countCharacters: function() {

    }
}
Enter fullscreen mode Exit fullscreen mode

让我们思考一下这个函数的逻辑：我们需要计算用户在 中输入了多少个字符textarea。然后，我们需要从 280（或我们的字符限制）中减去这个计数。

让我们为评论文本创建一个数据属性，然后在用户每次输入时更新该属性textarea。

  data: {
    tweetText: 'Hello World!',
    charactersRemaining: 280,
+    commentText: '',
    liked: false
  },
Enter fullscreen mode Exit fullscreen mode 
<textarea placeholder="tweet your reply" v-model="commentText"></textarea>
Enter fullscreen mode Exit fullscreen mode

v-model是一个指令，用于将我们的 data 属性与用户在 中输入的内容同步textarea。因此，无论用户输入的内容多少，commentText都会匹配他们输入的内容。简单来说，指令是 Vue 提供的 HTML 属性，它们以 为前缀v-。

好的，现在回到我们的方法。我们可以在我们的方法中访问数据this.myDataAttribute（这里有一个很棒的 JavaScript 参考this）。

因此，我们可以charactersRemaining使用以下逻辑进行更新：

methods: {
    countCharacters: function() {
        this.charactersRemaining = 280 - this.commentText.length
    }
}
Enter fullscreen mode Exit fullscreen mode

现在，我们需要确保countCharacters每次用户输入时都会运行textarea。

幸运的是，Vue 有v-on指令，我们可以在它后面添加事件，这样每次该事件发生时都会运行该方法。在本例中，将在用户每次输入 时v-on:input="countCharacters"运行该方法。countCharacterstextarea

<textarea
  placeholder="tweet your reply"
  v-model="commentText"
  v-on:input="countCharacters"
></textarea>
Enter fullscreen mode Exit fullscreen mode

好的，现在让我们退一步来研究我们的toggleLike方法。

我们首先需要将方法添加到我们的methods对象中。

methods: {
    ...
    toggleLike: function () {

    }
}
Enter fullscreen mode Exit fullscreen mode

方法体应该改为this.liked与当前相反的形式。所以：

toggleLike: function () {
    this.liked = !this.liked
}
Enter fullscreen mode Exit fullscreen mode

现在我们需要让该操作运行。

在我们的reactionsdiv 上，让我们添加一个事件监听器。

<div class="reactions like" v-on:click="toggleLike">
  ...
</div>
Enter fullscreen mode Exit fullscreen mode

现在是时候介绍另一个 Vue 功能了：条件！

条件语句

Vue 允许我们使用v-if指令有条件地渲染数据。

让我们在 div 中添加以下 span-wrapped 表情符号reactions：

<span v-if="liked">♥️</span>
Enter fullscreen mode Exit fullscreen mode

liked现在，我们的红心表情符号只有在时才会显示true。我们还需要在心形轮廓表情符号中添加v-else，这样它只有在liked时才会呈现false。

<span v-if="liked">♥️</span> <span v-else>♡</span>
Enter fullscreen mode Exit fullscreen mode

耶！现在我们的点赞功能生效了！

如果您对上述步骤有任何问题，这里有一个 Codepen，其中包含我们目前所拥有的内容。

现在我们已经搞清楚了交互，那么如何创建更多具有相同功能但不同数据的推文呢？组件！

成分

与其他前端框架类似，Vue 应用也被分解成多个组件。我们将这些组件组合在一起，从而创建完整的用户界面。一个好的经验法则是，如果用户界面的某个部分需要多次使用，就应该将其分解成一个组件。

在生产应用程序中，我们的推文可能会被分解为子组件——我们可能有一个用于评论文本区域的组件，一个用于点赞功能，一个用于个人资料图片等。但是，现在，我们只需将完整的推文制作成一个组件，以便我们可以轻松地创建更多推文。

首先，让我们将逻辑从 Vue 实例移到组件中。

第一个参数Vue.component是组件的名称，在本例中是“tweet”。我们还将数据转换为一个返回对象的函数。这使得我们可以拥有多个tweet组件实例，每个实例都有单独的数据。

Vue.component("tweet", {
  data: function() {
    return {
      charactersRemaining: 280,
      commentText: "",
      liked: false
    }
  },
  methods: {
    countCharacters: function() {
      this.charactersRemaining = 280 - this.commentText.length
    },
    toggleLike: function() {
      this.liked = !this.liked
    }
  }
})
Enter fullscreen mode Exit fullscreen mode

我们还需要template组件的 —— 或者说组件将要渲染的 HTML。我们将抓取所有现有的 HTML 并粘贴到组件的 template 属性中。

template: `<div class="status">
  <div class="tweet-content">
    <img src="https://pbs.twimg.com/profile_images/1070775214370373633/borvu2Xx_400x400.jpg" class="logo" alt="Vue Vixens DC logo">
    <div class="tweet">
      <a href="https://twitter.com/vuevixensdc">Vue Vixens DC</a>
      <span>@VueVixensDC · Mar 20</span>
      <p class="tweet-text">
        {{ tweetText }}
      </p>
      <div class="reactions">
        <span v-on:click="toggleLike" class="like">
          <span v-if="liked">♥️</span>
          <span v-else>♡</span>
        </span>
      </div>
    </div>
  </div>
  <div class="comment-bar">
    <textarea placeholder="tweet your reply" v-model="commentText" v-on:input="countCharacters">
    </textarea>
    <span class="characters-remaining">
      {{ charactersRemaining }} characters remaining
    </span>
  </div>
</div>`
Enter fullscreen mode Exit fullscreen mode

现在，我们有一个 Vue 组件！

我们还需快速添加一项：每条推文的文本都会有所不同。我们将为每条推文传入不同的文本，props这样我们就可以从组件外部向组件传递数据。目前，我们只需指定组件与其关联的 prop。

Vue.component('tweet', {
  props: ['tweetText'],
...
})
Enter fullscreen mode Exit fullscreen mode

但是我们仍然需要一个 Vue 应用程序，所以让我们将其添加回我们的 JavaScript 中：

new Vue({ el: "#app" })
Enter fullscreen mode Exit fullscreen mode

太棒了，现在 JavaScript 代码已经设置好了，接下来就需要处理 HTML 代码了。现在，我们在 Vue 实例中查找具有 id 的元素app，所以就创建它吧。

<div id="app"></div>
Enter fullscreen mode Exit fullscreen mode

并且，在我们的新 Vue 应用程序中，我们将添加一些推文组件的实例。

<div id="app">
  <tweet tweet-text="hello world!"></tweet>
  <tweet tweet-text="hi!"></tweet>
</div>
Enter fullscreen mode Exit fullscreen mode

注意我们是如何传递tweetTextprop 的——Vue 会将 JavaScript 的驼峰式命名转换为 HTML 中的短横线命名。除此之外，我们的 prop 看起来就像 HTML 属性一样。

现在我们的组件应该可以正常运行了！

还有一点需要注意，通常我们不会在 HTML 中硬编码每条推文，而是需要循环遍历一个数据结构，并为每条推文创建一个推文组件。让我们看看如何在 Vue 中做到这一点！

我们将进入我们的 Vue 应用程序实例并添加一些推文数据。

new Vue({
  el: "#app",
  data: {
    tweets: [
        { id: 1, tweetText: "hello world!" }, 
        { id: 2, tweetText: "hi!" }
    ]
  }
})
Enter fullscreen mode Exit fullscreen mode

现在我们将使用另一个 Vue 指令，v-for以便循环遍历推文数组并tweet为每个推文创建一个实例！

<div id="app">
  <tweet
    v-for="tweet in tweets"
    v-bind:key="tweet.id"
    v-bind:tweet-text="tweet.tweetText"
  ></tweet>
</div>
Enter fullscreen mode Exit fullscreen mode

注意，我们v-bind在这里使用了 twice —— 它允许我们动态更新 html 属性（或在其中使用变量）。建议每次使用时都使用键v-for—— 它可以让 Vue 更好地识别子元素（more）。

太棒了！现在我们可以通过向数组添加元素来创建更多推文tweets！

以下是所有代码。

更多学习 Vue 的资源

首先，您可以为我们刚刚构建的小部件添加许多很酷的功能。您可以让每条推文的头像图片、日期和用户数据都有所不同。您还可以禁用或突出显示文本区域中的溢出文本。您甚至可以使用 Twitter API 来使用真实的推文，甚至让评论功能正常发布！

这里还有一些很棒的资源可以帮助你继续学习 Vue：

而且，如果您对更多像这样的“初学者指南”感兴趣，我也有针对CSS和React 的指南！

文章来源：https://dev.to/aspittel/a-complete-beginners-guide-to-vue-422n
Devto 翻译
PREV
网页设计速成课程：从非设计师到非设计师
NEXT
React 初学者完整指南