Skip to content

Latest commit

 

History

History
537 lines (379 loc) · 21.3 KB

1.md

File metadata and controls

537 lines (379 loc) · 21.3 KB
Raw

一、Vue 简介

在本章中，我们将探讨如何开始学习 Vue 2。本章将向您展示快速入门的最简单方法，以及如何借助可用的 SaaS 平台轻松跟踪进度。

我们还将了解为什么 Vue 如此流行，以及为什么我们应该使用它。

此外，我们将讨论 Vue 的基本构建块：胡须模板、指令、修饰符、方法和计算属性。

在此过程中，我们将看一些实际例子。让我们先看看 Vue 到底是什么。

在本章中，我们将了解以下主题：

  • 什么是 Vue？
  • Vue 解决了哪些问题？
  • 为什么要使用 Vue？

什么是 Vue？

Vue 是 2013 年出现的一个简单易用的 JS 框架。这是从 Angular 和 React 中获取一些优秀想法并将其组合到一个易于使用的软件包中的成功结果

与其他流行的前端框架相比，Vue 以其简单性和易用性独占鳌头。

让我们看看如何开始使用它。

开始使用 Vue2 的最快方法

在过去的十年中，许多用于 web 开发的工具已经转移到了 web 上，所以让我们顺其自然，在上开始一支新的笔 http://codepen.io/ 。

You don't have to be a member of https://codepen.io/ to create pens there—you can just save them with the blanket username Captain Anonymous. However, it's better to open an account so you have all your experiments in one place.

一旦您将浏览器导航到https://codepen.io ，您将看到以下屏幕：

单击“创建”下拉列表（在主导航中，屏幕右上角区域），然后单击“新建笔”。完成后，您将看到默认编辑器设置：

接下来，单击屏幕右上角的设置按钮，并在出现的弹出窗口中选择 JavaScript:

接下来，在快速添加下拉字段中，选择 Vue 选项。完成后，第一个输入将由 Cloudflare CDN 或更具体地说，从以下链接提供的当前 Vue 小型版本填写：https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js 。

就这样！我们已经准备好在 Codepen 项目中开始使用 Vue2。

要了解 Vue 的一点是，它使我们的 HTML 变得动态。这是通过添加胡须语法实现的。这种语法很容易理解。我们只需将其插入 HTML 元素中。例如，我们可以向[T0]标记添加 Mustach 语法，如下所示：

<h1>{{ heading1 }}</h1>

那么，让我们详细讨论一下它是如何工作的。请随意使用您自己的笔或在此处查看示例：https://codepen.io/AjdinImsirovic/pen/rKYyvE 。

胡须模板示例

让我们开始使用我们的第一支笔：

<div id="entryPoint">
  <h1>Just an h1 heading here</h1>
  <h2>Just an h2 heading here</h2>
  <p>Vue JS is fun</p>
</div>

我们现在可以在 CodePen 预览窗格中看到 HTML 呈现，屏幕上打印以下文本：

Just an h1 heading here
Just an h2 heading here
Vue JS is fun

Note that the CodePen app will often update the preview pane even without saving, which is a lot better than refreshing the browser—that must be done when working on your projects locally. Still, it is good to save your CodePen projects often, to not lose any changes (in the odd case of your browser freezing or something else out of the ordinary happening).

接下来，让我们将以下 Vue 代码添加到笔内的 JS 窗格中：

new Vue({
  el: '#entryPoint',
  data: {
     heading1: 'Just an h1 heading here',
     heading2: 'heading 2 here',
     paragraph1: 'Vue JS'
  }
})

最后，让我们更新 HTML，以便 Vue 代码发挥其魔力：

<div id="entryPoint">
  <h1>{{ heading1 }}</h1>
  <h2>Just an {{ heading2 }}</h2>
  <p>{{paragraph1}} is fun</p>
</div>

在前面的代码示例中，我们可以看到如何使用胡须模板将数据动态插入 HTML。

Mustache templating is achieved by simply passing the keys of our data object into our HTML tags and surrounding the keys with the opening {{ and closing }} tags.

如前所述，CodePen 将自动更新预览窗格，但这不会影响预览，因为我们有效地生成了与使用纯 HTML 时相同的输出。

现在，我们只需更改数据条目中的键值对即可使用它：

new Vue({
  el: '#entryPoint',
  data: {
     heading1: 'This is an h1',
     heading2: 'h2 heading',
     paragraph1: 'Vue2'
  }
})

这一次，输出将自动更新为：

这是一个 h1 只是一个 h2 标题 Vue2 很有趣

我们也可以改变我们的切入点。例如，我们只能让 Vue 访问p标记：

new Vue({
  el: 'p',
  data: {
     heading1: 'This is an h1',
     //heading2: 'h2 heading',
     paragraph1: 'Vue2'
  }
})

更改后，我们的预览窗格将显示以下内容：

{{heading1}}[T0]只是一个{{heading2}[T1]Vue2 很有趣

从该输出中，我们可以得出结论，如果发生以下任一情况，我们的胡须模板将在 HTML 输出中作为常规文本呈现：

  • 我们的入口点没有参考数据
  • 我们数据中的条目不存在

我们还看到了我们的入口点可以是任何类型的选择器。您可以将其视为类似于如何在 jQuery 中针对不同的元素。

例如，我们可以使用更复杂的选择器作为应用程序的入口点：

new Vue({
  el: 'div#entryPoint',
  data: {
     heading1: 'This is an h1',
     heading2: 'h2 heading',
     paragraph1: 'Vue2'
  }
})

将 Vue 的数据选项用作函数

请注意，我们的 Vue 实例的data选项可以是对象或函数。在前面的代码中可以看到数据作为对象的示例。将数据用作函数也很容易。

Data as an object doesn't work well with reusable components. For this reason, using data as a function is, generally speaking, a more useful way to use the data option in Vue.

让我们看看另一支钢笔。这一次，我们将数据选项用作函数，而不是对象。这里有笔：https://codepen.io/AjdinImsirovic/pen/aKVJgd 。我们要做的唯一更改是在我们的 Vue 代码中：

new Vue({
  el: '#entryPoint',
  data() {
    return {
     heading1: 'Just an h1 heading here',
     heading2: 'heading 2 here',
     paragraph1: 'Vue JS data as a function'
    }
  }
})

现在我们已经熟悉了 Vue 语法的基本知识，让我们看看它可以用于什么。

Vue 解决了哪些问题？

在不列出详细列表的情况下，让我们快速突出 Vue 的一些最大优势：

  • 视图-jQuery 继承者？
  • Vue 对于初学者来说是一个很好的学习工具
  • Vue 是一个多功能的渐进式框架
  • Vue 是一个非常棒的动画和交互工具
  • Vue 的方法与其他现代前端框架和库类似

接下来，让我们简要回顾一下这些要点。

视图，jQuery 继承者

著名的 jQuery 库出现在 2006 年。当它问世时，它做了一些漂亮的事情：

  • 它使编写跨浏览器 JavaScript 变得更加容易，这在当时是一个巨大的优势，因为它大大减少了开发人员处理各种浏览器的怪癖和不一致性的需要
  • 它有一个简单的语法，可以更容易地定位和操作特定的 DOM 节点，这在他们的座右铭中表达得很好写得少，做得多
  • 这是学习 JavaScript 的一个很好的入门点
  • 它有一个很棒的 API，使使用 Ajax 变得简单和容易

然而，从那时起，情况有了很大的好转。

可以说，从 2006 年到今天，JavaScript 领域最大的改进是虚拟 DOM

The virtual DOM was a paradigm shift: we no longer had to write procedural, spaghetti JS to instruct the browser on how to traverse and manipulate the DOM. Instead of telling the browser how to update the DOM, we can now simply tell it what to update. Or, to be more specific, we tell a framework what to update—a framework like View or React. The actual implementation of the virtual DOM is framework-specific and not really something to be concerned with at this point.

我们现在可以通过使用处理底层框架的虚拟 DOM 实现的声明性代码间接地使用 DOM。这种抽象或多或少使 jQuery 变得多余。

当然，由于如此多的应用程序仍然由 jQuery 提供支持，并且由于遗留代码有继续存在的趋势，jQuery将在未来几年中继续存在

然而，我们对 DOM 操作的思考方式发生了范式转变，这使得 Vue 成为 jQuery 宝座的有力竞争者，成为城里最受欢迎的游戏。

Vue 还有其他优势：它是学习当今前端开发的一个极好的起点。进入的门槛真的很低。

初学者的学习工具

如果 jQuery 开发人员面临学习现代前端框架/库的选择，那么 React、Angular、Vue、Ember。。。哪一个可能是最容易开始的？

当然可以。

正如我们已经看到的，开始使用 Vue 可以像导入 CDN 一样简单。而且，由于我们人类天生就是靠小而频繁的胜利而兴旺发达的，所以 Vue 似乎是一条快乐的道路。这并不是说开发人员不应该尝试学习其他前端框架。似乎 Vue 是最简单的入门方式，也是快速提高效率的最佳方式。

多功能和渐进的框架

Vue JS 的官方网站称 Vue 是渐进式 JavaScript 框架。这意味着您可以增量地将 Vue 添加到现有服务器端项目中。基本上，您可以将 Vue 添加到网站的一个简单部分。难怪 Laravel 选择在前端与 Vue 捆绑。

但你不必满足于只在这里和那里洒 Vue。您还可以使用 Vuex 和 Vue 路由对其进行扩展。这使得 Vue 非常通用，可用于多种不同的场景。

用于动画和过渡的工具

如果您需要制作高性能的动画和过渡，请查看 Vue！Vue 的动画 API 非常容易理解，使用起来也很愉快。在 Vue 中制作动画是如此简单，以至于您会惊讶于在很短的时间内可以完成多少工作。

与其他现代前端框架和库类似的功能

与其他现代前端框架（如 React 和 Angular）一样，Vue 具有以下功能：

  • 虚拟 DOM
  • 命令行界面（View-CLI）
  • 状态管理（Vuex）
  • 路由（视图-路由）

然而，Vue 的核心团队似乎正在竭尽全力使 Vue 尽可能接近。这在几个例子中都很明显：

  • 他们为避免设置 Vue cli 带来的麻烦而付出的努力，这使得开始使用 Vue cli 变得非常容易
  • 缺少复杂的工具链
  • 视图 API 的简单性

正如官方项目的网站所述，Vue 平易近人、多才多艺、性能卓越。

为什么要使用 Vue？

我们在上一节中讨论了 Vue 解决的问题。在本节中，我们将看一些实例，说明为什么与以下人员一起工作是一种乐趣：

  • 声明性代码（我们告诉 Vue 要做什么，而不是如何做）
  • 易于理解的语法（尽可能少）
  • 感觉非常适合各种项目

声明性代码

让我们比较一下普通 JavaScript 代码和 VUEJavaScript 代码。

在本例中，我们将打印出数组的成员。

在 vanilla JavaScript 中，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .list-item {
      background: white;
      color: gray;
      padding: 20px;
      margin: 20px;
    }
  </style>
</head>
<body>

  <script>
    var arr1 = ['a','b','c'];
    var unorderedList = document.createElement('ul');
    unorderedList.style.cssText = "background:tomato; width: 
    400px;height:400px";
    document.body.appendChild(unorderedList);
    for (var i=0; i<3; i++) {
      var listItem = document.createElement('li');
      listItem.className = "list-item";
      unorderedList.appendChild(listItem);
      listItem.innerHTML = arr1[i];
    }
  </script>
</body>
</html>

在这个文件中，重点应该放在script标记内的代码上。

您可以在以下 URL 以钢笔的形式看到此示例：https://codepen.io/AjdinImsirovic/pen/xzPdxO 。

我们在这段代码中做了几件事：

  1. 我们正在设置array1，稍后将填充我们将动态创建的列表项

  2. 我们正在创建一个ul——一个无序的列表元素，它将包装所有列表项（所有li元素）

  3. 我们正在为我们的ul设置样式

  4. 我们在文件正文后加上[T0]

  5. 接下来，我们使用一个for循环来创建三个li元素

  6. 仍然在for循环中，我们向每个列表项添加一个类

  7. 然后，我们将它们中的每一个附加到无序列表元素

  8. 最后，我们将innerHTML添加到每个列表项中

人们可能会对该代码的编写方式提出许多异议。我们可以用一个forEach；我们本可以避免像以前那样添加样式，而是从一个单独的文件中调用 CSS。但最大的问题是这段代码有多脆弱。让我们将这段代码与用 Vue 编写的代码进行对比。

在 Vue 中，我们的代码如下所示：

<!-- HTML -->
<ul>
  <li v-for="entry in entries">
     {{ entry.content }}
  </li>
</ul>

// JS
var listExample = new Vue ({
  el: "ul",
  data: {
    entries: [
      { content: 'a'},
      { content: 'b'},
      { content: 'c'}
    ]
  }
})

此示例的代码可在此处找到：https://codepen.io/AjdinImsirovic/pen/VdrbYW 。

我们只需简单地看一眼就可以看出，与用普通 JavaScript 实现的相同代码相比，Vue 的代码更易于理解和推理

The el here is the entry point for our Vue app. The data option is the actual data our Vue app will work with. 

此设置还有另一个主要好处：一旦您了解了 Vue 的工作原理，使用 Vue 的任何其他项目都将对您有意义，这将提高生产率和效率。

因此，Vue 做事的方式可以加快速度，用更少的时间做更多的事情。

感觉非常适合各种项目

Vue 的优势之一是增量实现的可能性。如果您只想在 Vue 中做一个快速、简单的实验，没有问题。您可以在不到一分钟的时间内开始使用 Vue

这使得它非常适合转换遗留项目、从头开始构建项目或进行简单的实验。

Vue 也在迅速成熟。有一个充满活力的 Vue 社区，许多开发人员都在不断地开发它。例如，人们选择 React 而不是 Vue 的理由之一是缺乏在 Vue 中构建本机移动应用程序的框架。情况不再如此：Vue Native 从 2018 年 6 月开始提供。您可以在查看 https://github.com/GeekyAnts/vue-native-core ，或在了解更多信息 https://vue-native.io/ 。

考虑到所有这些因素，有很多理由可以解释为什么学习 Vue 对任何人来说都是一个不错的投资回报，尤其是前端开发人员

易于理解的语法

在这个非常简单的 Vue 应用程序示例中，可以注意到的一点是使用了[T0]HTML 属性

指令

Vue 中的所有v-*属性都称为指令，这是从 Angular 中借用的。

指令的概念非常有趣。它们使代码更容易理解、思考和使用。

在本书中，我们将广泛使用 Vue 中的其他指令。现在，让我们只列出其中的一些：v-bind、v-cloak、v-for、v-else、v-else-if、v-model、v-on、v-once、v-text和v-html。

一个有用指令的例子是[T0]。v-model指令用于使表单具有反应性；它帮助我们更新用户输入事件的数据。对于 Vue 的初学者来说，这个主题听起来可能有点高级，但它的复杂性处理得非常优雅，即使是初学者也会发现很容易看到代码中发生了什么：

<!-- HTML -->
<div id="app">
  <span>Enter the weight in kilograms:</span>
  <input v-model="someNum" type="number">
  <div>The weight in pounds is: {{ someNum * 2.20 }}</div>
</div>

// js
new Vue({
  el: '#app',
  data() {
    return {
      someNum: "1"
    }
  }
})

如您所见，{{ someNum }}值绑定到用户在输入字段中键入的任何内容。换句话说，基础数据模型someNum的值将根据用户输入而改变。

要查看前面示例中的笔，请访问https://codepen.io/AjdinImsirovic/pen/pKdPgX 。

修饰语

Vue 中的指令在修饰符的帮助下进一步扩展。

有关指令中修饰符的官方文件链接可在以下链接中找到：https://vuejs.org/v2/guide/forms.html#Modifiers 。

要使用修饰符，只需将其附加到指令。最简单的示例可能如下所示：

<!-- HTML -->
<div>
  <input v-model.trim="userInput" placeholder="type here">
  <p>You have typed in: {{ userInput }}</p>
</div>

// js
new Vue({
  el: 'div',
  data() {
    return {
      userInput: ""
    }
  }
})

我们刚刚在v-model指令中添加了trim修饰符。

您可以通过以下链接查看此代码的示例：https://codepen.io/AjdinImsirovic/pen/eKeRXK 。

此修饰符将修剪用户在输入字段中键入的任何空白（如空格或制表符）。

在继续这篇长达 10000 英尺的 Vue 语法概述之前，我们还要提到用于事件处理的[T0]指令。下面是一个简单的例子：

<!-- HTML -->
<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

// JS
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

Vue 甚至为v-on提供了快捷语法：@符号。因此，我们可以将v-on:click替换为@click，我们的 Vue 计数器仍然可以工作。

要在中查看此示例，请执行以下操作：http://codepen.io/ T1，访问以下 URL:T2https://codepen.io/AjdinImsirovic/pen/PaOjvz T3-T3

Vue 方法

Vue 实例中的methods选项仅列出该 Vue 实例（或 Vue 组件）上存在的所有函数。

methods选项与 Vue 实例的数据一起工作。以下是这一概念在实践中的简单演示：

// HTML
<div id="definitions">
  <!-- 'whatIsVue' and 'whyUseVue' are functions defined in the 'methods' option in the Vue instance -->
  <button id="btn" v-on:click="whatIsVue">What is Vue?</button>
  <button id="btn" v-on:click="whyUseVue">Why use Vue?</button>
</div>

// JS
var definitions = new Vue({
 el: '#definitions',
 data: {
 name: 'Vue.js'
 },
 // define methods (functions) under the `methods` object
 methods: {
   whatIsVue: function () {
    console.info(this.name + ' is a Progressive Front-end Framework')
   },
   whyUseVue: function () {
    alert('Because ' + this.name + ' is nice.')
   }
 }
})

如我们所见，data选项保存Vue.js字符串，可以通过name键访问该字符串。

在methods选项中，我们可以看到两个功能：whatIsVue和whyUseVue。whatIsVue函数接受点击事件并将name中的值注销到控制台。methods选项中的whyUseVue功能的工作原理类似

此代码可以在以下地址的笔中看到：https://codepen.io/AjdinImsirovic/pen/yEPXdK 。

计算属性和观察者

计算属性用于避免向视图添加膨胀的复杂逻辑。换句话说，计算属性有助于隐藏 HTML 的复杂性，从而使 HTML 易于理解、易于使用和声明。换句话说，当我们需要从data选项计算一些值时，我们可以借助计算属性来完成。

以下示例的完整代码见https://codepen.io/AjdinImsirovic/pen/WyXEOz ：

<!-- HTML -->
<div id="example">
  <p>User name: "{{ message }}"</p>
  <p>Message prefixed with a title: "{{ prefixedMessage }}"</p>
</div>

// JS
var example = new Vue({
  el: '#example',
  data: {
    userName: 'John Doe',
    title: ''
  },
  computed: {
    // a computed getter
    prefixedMessage: function () {
      // `this` points to the Vue instance's data option
      return this.title + " " + this.userName
    }
  }
})

Computed properties are cached. As long as a computed property's dependencies do not change, Vue will return the cached value of the computed property.

监视程序不像计算属性那样频繁使用。换句话说，watch 选项的使用频率要低于 computed properties 选项。监视程序通常用于数据不断变化的异步或其他代价高昂的操作。

观察者必须与反应式编程有关；它们允许我们通过时间观察一系列事件，并在发生在特定数据属性上的更改时作出反应

我们将在后面的章节中讨论计算属性和观察者。目前，只需知道它们存在于 Vue 中并被广泛使用就足够了。

总结

在本章中，我们了解了如何借助codepen.io快速启动 Vue。我们还讨论了 Vue 中一些最重要的想法和概念，例如开始学习 Vue 2 的最快和最友好的开发人员方式。我们研究了 Vue 解决了什么问题，它的优势是什么，以及为什么它有时被称为新的 jQuery。我们学习了 mustache 模板、Vue 的声明性代码及其易于理解的语法。最后，我们介绍了指令、修饰符、方法、计算属性和观察者。

在下一章中，我们将了解什么是反应式编程，以及它如何在 Vue 中应用。我们还将进一步扩展本章介绍的概念，并介绍 Vue 的一些附加功能。