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

另一个让 Vue 与众不同的是与很多框架相比，学习曲线较低。如果您了解 HTML、CSS 和 JavaScript，那么您就已经非常接近了， 而不必理解复杂的主题！

与任何框架一样，它向前端添加了结构和实用程序，以便随着应用的增长而更易于扩展，组织更有序，并且不必经常"重新发明轮子"。

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

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

下面是我们将构建的，不过具有一些更交互的功能。“喜欢"按钮会根据用户点击从心脏轮廓切换到红心。此外，当有人在文本框中输入时，字符号将倒计时。

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

设置 Vue 应用程序

现在，我们将使用Vue CDN ——我们想要一个极简的设置。将来，您可能需要一个更广泛的环境，在这种情况下，您可以使用Vue CLI。

转到"Codepen"上的按钮，切换到 JavaScript 选项卡，并在 CDNjs 上搜索 Vue。这会将 Vue 库添加到我们的项目中，因此我们可以使用 Vue 提供的所有方法和功能。settings

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

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

const app = new Vue()

Enter fullscreen mode Exit fullscreen mode

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

我们要添加到该对象的第一件事是 - 这是我们想要成为我们的 Vue 应用程序的基础的元素。在这种情况下，具有 类的元素。el``````status

const app = new Vue({ el: “.status” })

Enter fullscreen mode Exit fullscreen mode

然后，我们将添加我们的 。为了测试这一点，让我们添加作为数据——因此，我们现在拥有的地方将成为一个变量。在路上， 我们将用不同的文本制作更多的推文， 所以让推文的这一部分成为动态的是有道理的。data``````tweetText``````Hello World!

const app = new Vue({ el: “.status”, data: { tweetText: “Hello World!” } })

Enter fullscreen mode Exit fullscreen mode

当我们想要添加更多的动态数据（或将在 Vue 应用中更改的数据）时，我们将向此对象添加更多属性。data

现在，我们可以在 HTML 中使用新创建的数据，然后这样插入变量！如果你曾经使用过把手或其他模板语言， 它有点像。

如果您转到 HTML 中的硬编码"Hello World！"{{tweetText}}

{{ tweetText }}

Enter fullscreen mode Exit fullscreen mode

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

让我们集思广益，了解一下我们在应用过程中将发生哪些其他数据。

  • 心在喜欢和与众不同之间切换
  • 当我们键入

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

data: { tweetText: “Hello World!”,

  • charactersRemaining: 280,
  • liked: false }

Enter fullscreen mode Exit fullscreen mode

我们还在 HTML 中动态显示。charactersRemaining

{{ charactersRemaining }} characters remaining

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

让我们考虑一下此函数的逻辑：我们需要计算用户在 中键入的字符数。然后，我们需要从 280（或我们的字符限制）中减去该计数。textarea

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

data: { tweetText: ‘Hello World!’, charactersRemaining: 280,

  • commentText: ‘’, liked: false },

Enter fullscreen mode Exit fullscreen mode

Enter fullscreen mode Exit fullscreen mode

v-model是_一个_指令，它将数据属性与用户键入到 的内容同步。因此，无论他们键入多少或很少，将匹配他们键入。要快速退一步_，指令_是由 Vue 提供的 HTML 属性，它们由 前缀。textarea``````commentText``````v-

好了，现在回到我们的方法。我们可以使用 （以下是 JavaScript 的很好参考 ） 来访问我们的方法中的数据。this.myDataAttribute``````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"``````countCharacters``````textarea

<textarea placeholder=“tweet your reply” v-model=“commentText” v-on:input=“countCharacters”

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

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

在 div 上，让我们添加一个事件侦听器。reactions

Enter fullscreen mode Exit fullscreen mode

是时候引入另一个 Vue 功能了： 条件！

条件

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

让我们在 div 中添加以下跨包表情符号：reactions

♥️

Enter fullscreen mode Exit fullscreen mode

现在，我们的红心表情符号只出现，如果是。让我们也添加一个到我们的心脏轮廓表情符号，以便它只呈现如果 是 。liked``````true``````v-else``````liked``````false

♥️ ♡

Enter fullscreen mode Exit fullscreen mode

耶！现在我们喜欢工作！

如果您对上述步骤有任何问题，下面是一个包含我们到目前为止所拥有内容的 Codepen。

现在，我们的交互已降低，我们如何创建一堆具有相同功能但数据不同的推文？组件！

组件

与其他前端框架类似，Vue 应用程序被分解为组件。我们组合组件以创建完整的用户界面。一个很好的经验法则是，如果用户界面的一个块被多次使用，它应该被分解为一个组件。

在生产应用程序中，我们的推文可能会被分解为子组件 ——我们可能有一个注释文本区域的组件，一个用于"喜欢的功能"，一个用于个人资料图片的组件，等等。但是， 现在， 我们将只是把完整的推文变成一个组件， 以便我们可以轻松地创建一堆更多的推文。

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

的第一个参数是组件的名称，本例中为"tweet"。我们还将数据转换为返回对象的函数。这允许我们有多个组件实例，每个实例都有单独的数据。Vue.component``````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

我们还需要 组件的 - 或组件将呈现的 HTML。我们将获取所有现有的 HTML 并粘贴到组件上的模板属性中。template

template: `

Vue Vixens DC @VueVixensDC · Mar 20

{{ tweetText }}

{{ charactersRemaining }} characters remaining
`

Enter fullscreen mode Exit fullscreen mode

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

我们需要添加的另一个快速的事情： 推文文本将不同于推文到推文。我们将通过传递每个单独推文的不同推文文本 ， 这使我们能够将数据从该组件外部传递到组件。现在，我们将指定我们的组件具有与之关联的道具。props

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

请注意，我们如何传递我们的道具 - Vue 将 JavaScript 骆驼案例转换为 HTML 中的烤肉串案例。除了这种变化之外，我们的道具看起来像 HTML 属性。tweetText

现在我们的组件应该很好去！

不过，还有一件快速的事情，通常是在 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

<tweet v-for=“tweet in tweets” v-bind:key=“tweet.id” v-bind:tweet-text=“tweet.tweetText”

Enter fullscreen mode Exit fullscreen mode

请注意，我们在这里使用两次 - 它允许我们动态更新 html 属性（或使用其中中的变量）。每当您使用键时，都会建议使用键 – 它允许 Vue 更好地识别子元素（更多）。v-bind``````v-for

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