Vue 详解这是我参与8月更文挑战的第4天，活动详情查看： 8月更文挑战 1.始终在 v-for 中使用 :key 在

这是我参与8月更文挑战的第4天，活动详情查看： 8月更文挑战

Vue.js是一个用于制作单页应用程序 (SPA) 的开源 JavaScript 库。Vue.js 非常轻量级，不需要任何外部 Node 模块，实际上甚至不需要 NPM 来安装和使用它。对于前端或后端不使用 Node.js 的项目来说，这是一个很大的优势。

本 Vue.js 教程将涵盖 Vue.js 的基础知识，以便您了解 Vue.js 的设计方式，并让您的前几个小应用程序起步。

Vue.js 流行度

Vue.js 变得非常流行，并且紧随 React.js 和 Angular 之后，这两个框架都更重。根据博客文章比较框架，正是因为 Vue.js 是轻量级的，但又非常强大，所以 Vue.js 越来越受欢迎。尝试在 Google 上搜索“Vue.js vs. React.js”或“Vue.js vs. Angular”，看看人们写了什么。

在某种程度上，Vue.js类似于Riot.js。Vue.js 和 Riot.js 都是用于创建 SPA 的非常轻量级的框架。然而，Vue.js 似乎比 Riot.js 解决了更多的问题，而且 Vue.js 的设计似乎更精细一些。这也许也是 Vue.js 的受欢迎程度越来越高，而 Riot.js 的受欢迎程度似乎停滞不前的原因。

Vue.js 概述

在深入研究 Vue.js 之前，先了解一下 Vue.js 的核心概念是很有用的。我将尝试在本节中为您提供这样的概述。Vue.js 的核心由以下几部分组成：

Vue 实例
组件
指令

每个 Vue.js 应用程序都从创建一个 Vue 实例开始。Vue 实例是一个 JavaScript 对象。该对象将 Vue.js 应用程序绑定在一起。

在 Vue.js 应用程序中，您可以使用 Vue.js 组件。组件是完整应用程序的子部分。组件通常包含应用程序的域逻辑。

Vue.js 应用程序的可见部分通常通过 Vue.js 指令呈现。Vue.js 指令就像您定义的自定义 HTML 元素，然后可以在您的 Vue.js 应用程序中使用。

安装 Vue.js

要使用 Vue.js，您必须在 HTML 页面中包含其 JavaScript 文件。您可以在开发或生产模式下包含 Vue.js。在开发模式下，您可以获得比在生产模式下更多的调试信息。因此，生产模式比开发模式运行更有效。顾名思义，建议在开发过程中在开发模式下使用 Vue.js，在将应用程序部署到生产环境时，在生产模式下使用 Vue.js。

您可以从Vuejs 网站下载 Vue.js 的最新开发和生产版本。然后通过标准script元素包含它们。

如果您想快速开始使用 Vue.js，您还可以script在 HTML 页面中包含以下两个元素之一。这些script元素包括处于开发或生产模式的最新版本的 Vue.js。

下面是 Vue.js 开发模式快速包含：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

这是 Vue.js 生产模式快速包括：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

虽然快速包含方法几乎可以让您立即开始使用 Vue.js，但您可能应该决定在实际项目中使用特定版本。通过决定特定版本，您可以避免在快速包含 URL 突然返回新版本时可能出现的问题。

创建 Vue 实例

Vue.js 应用程序从一个Vue实例开始。以下是创建Vue实例的方法：

var app = new Vue({});

注意传递给Vue构造函数的 JavaScript 对象。这个 JavaScript 对象可以被赋予许多属性来指定Vue实例如何工作。因此，该对象也称为选项对象。

将 Vue 实例附加到 HTML 元素

要将Vue实例应用到您的 Web 应用程序，您需要将该Vue实例附加到应用程序的根 HTML 元素。Vue通过将 HTML 元素的 ID 设置为创建时el传递给Vue实例的 JavaScript 对象的属性值，可以将实例附加到 HTML 元素。以下是将实例附加Vue到 HTML 元素的示例

<div id="appRoot">
</div>

<script>
var app2 = new Vue({
  el: '#appRoot'
});
</script>

注意el传递给Vue构造函数的选项对象的属性。该el属性的值是一个选择器，它告诉Vue 实例应该附加到哪个 HTML 元素。

向 Vue 实例传递数据

您可以通过Vue设置data传递给Vue构造函数的选项对象中的属性来将数据传递给实例。这是Vue 在创建时将数据传递给实例的示例：

var app2 = new Vue({
    el: '#appRoot',
    data: { key1: "value1", key2: "value2" }
});

可以从Vue实例附加到的 HTML 元素中访问此数据。您将在本教程后面看到这样的示例。

Vuedata在 Vue.js 的反应性系统中注册在对象中找到的所有属性。这意味着 Vue.js 会监控这些属性的变化。当这些属性改变值时，Vue.js 会检测到它并做出反应。例如，如果这些值中的任何一个显示在Vue实例的根 HTML 元素内，则显示的值将更新以匹配新值。

计算属性

Vue通过data对象传递给实例的属性“按原样”传递。但是，有时您可能需要根据数据属性的原始值来计算属性值。您可以通过 Vue.js计算属性来实现。

计算出的属性作为computed对象内部的函数传递，该对象也Vue与data对象一起传递给实例。这是创建Vue 具有计算属性的实例的示例：

<div id="appRoot">
<p>Here is some text, and here is a variable '{{myVar}}' value.</p>
<p>Here is the same text, but with a computed variable: '{{derived}}'</p>
</div>

<script>
var app = new Vue({
  el: '#appRoot',
  data : { myVar : "My Variable" },
  computed: {
    derived: function() {
	   return this.myVar.toLowerCase();
	}
  }
});
</script>

请注意computed包含derived指向 JavaScript 函数的属性的对象。这个derived函数是一个计算属性。它将myVar属性内的data属性转换为小写。

还要注意{{derived}}示例前面的 HTML 模板中的属性引用。此引用将derived在引用所在的 HTML 模板中插入计算属性的值。

Vue.js HTML 模板

Vue.js 应用程序通常需要呈现 HTML。在 Vue.js 中，HTML 渲染是通过 Vue.js 模板语言完成的。Vue.js 模板语言由混合了动态内容插入点的 HTML 组成。这是一个 Vue.js 模板示例：

<p>Here is some text, and here is a variable {{myVar}} value.</p>

注意{{myVar}}上面模板定义的部分。这部分定义了一个插入点。此时myVar插入变量的值。该myVar变量必须作为在创建时传递给实例myVar的data对象内部命名的字段存在Vue。这是一个完整的示例，显示了Vue实例创建和模板定义：

<div id="appRoot">
<p>Here is some text, and here is a variable {{myVar}} value.</p>
</div>

<script>
var app2 = new Vue({
  el: '#appRoot',
  data : { myVar : "My Variable" }
});
</script>

如您所见，HTML 模板嵌套在Vue实例所附加的 HTML 元素内。此示例生成的 HTML 将如下所示：

<p>Here is some text, and here is a variable My Variable value.</p>

Vue.js 模板插入点

Vue.js 插入点必须包含 JavaScript 表达式。这意味着，里面的JavaScript的 {{和}}必须由被评估的某个值的JavaScript语句的。对表达式求值的结果是插入到 HTML 模板中插入点位置的值。

该{{和}}功能的开始和插入点结束的标志。标记字符不包含在插入点插入的内容中。仅插入这些标记字符内的表达式的值。

Vue.js 允许的高级 JavaScript 表达式的方式是有限的。例如，以下语句算作表达式：

{{myVar != null ? myVar : ""}

JavaScript 通常会将该语句评估为一个值。因此，它被认为是一种“表达”。但以下 JavaScript 语句不是表达式：

if(myVar != null){ return myVar; }
else             { return "";    }

像这样的控制逻辑不被视为表达式。

但是，表达式中允许函数调用。例如，如果函数beautifyText()存在，这将被接受为表达式：

{{ beautifyText(myVar) }}

此表达式的结果将是作为参数beautifyText() 调用时从函数返回的结果myVar。

Vue.JS 组件

Vue.JS 组件是可重用的 HTML 元素，您可以在 Vue.js 应用程序的 HTML 模板中使用。要创建组件，您必须先注册它。以下是注册 Vue.js 组件的方式：

Vue.component('my-component', {

});

该component()函数的第一个参数是组件的名称。这也是您在 HTML 模板中用于插入此类组件的 HTML 元素的名称。您应该使用全小写的名称，并且应该包含一个连字符 ( -)。这样你就可以避免很多潜在的命名问题。

该component()函数的第二个参数是一个 JavaScript 对象，其中包含 Vue.js 组件的定义。在上面的例子中，这个对象是空的，但你很快就会看到可以插入到 Vue.js 组件定义中的例子。

下面是使用my-component在前面的代码示例中注册的Vue.js 组件的示例：

<my-component></my-component>

如您所见，您可以像使用 HTML 元素一样使用已注册的组件。

组件此时并没有真正做任何事情，所以让我们添加一个组件模板。组件模板是一串 HTML，显示在组件在 HTML 文档中的位置。我先把模板添加到组件注册中：

Vue.component('my-component', {
    template: '<div>Hello World, my-component!</div>'
});

现在，无论您在何处使用<my-component></my-component>组件 HTML，都将插入上述 HTML 模板。您可以在 Vue.js 应用程序中根据需要多次使用该组件。

组件数据

组件也可以有数据，就像Vue实例一样。但是，由于组件可以在 Vue.js 应用程序中多次使用，因此您不能data像在Vue应用程序声明中那样只在组件声明中包含单个对象。如果这样做，给定组件的所有实例都将使用相同的data属性。

相反，我们需要提供一个data对象工厂。这是它的外观：

Vue.component('my-component', {
    template: '<div>Hello World, my-component: {{myVar}}</div>',
	data: function() {
	    return { myVar: 999};
	}
})

首先，注意组件模板现在如何包含模板插入点{{myVar}}。这个插入点是指myVar数据工厂函数返回的数据对象中声明的变量。

其次，注意data工厂函数如何返回一个在调用中带有变量的 JavaScript 对象myVar。正是这个变量插入到 HTML 模板中，组件呈现自身。

这是声明和使用上述组件的完整示例：

<div id="appRoot">
    <my-component></my-component>
</div>

<script>
Vue.component('my-component', {
    template: '<div>Hello World, my-component: {{myVar}}</div>',
	data: function() {
	    return { myVar: 999};
	}
});

var app = new Vue({
  el: '#appRoot',
});
</script>

由此呈现的 HTML 将类似于以下内容：

Hello World, my-component: 999

组件计算属性

Vue.js 组件也可以有计算属性。您可以像为Vue实例本身一样为 Vue.js 组件配置计算属性- 通过computed在定义组件的 JavaScript 对象中包含一个具有计算属性的函数的对象。这是向 Vue.js 组件添加计算属性的示例：

<div id="appRoot">
<p>Here is some text, and here is a variable {{myVar}} value.</p>
<my-component></my-component>
</div>

<script>
Vue.component('my-component', { 
    template: '<div>Hello World, my-component: {{myVar}} -> {{derived}}</div>',
	data: function() { 
	    return { myVar: 999};
	},
	computed: {
	    derived: function(){
		    return this.myVar * 2;
	    }
	}
	
});

var app = new Vue({
  el: '#appRoot',
  data : { myVar : "My Variable" }
});
</script>

请注意定义 Vue.js 组件的 JavaScript 对象如何包含一个computed属性，该属性名为derived引用一个函数的属性。此函数myVar 从组件的data myVar属性中获取变量并将其乘以 2。

还要注意{{derived}}组件的 HTML 模板中的属性引用。此引用将derived在 HTML 模板中的给定位置插入计算属性的值。

组件属性

Vue.js 组件可以具有组件属性，可以从使用组件的位置设置这些值。组件属性值是通过表示组件实例的元素中的 HTML 属性设置的。以下是插入了单个属性值的组件 HTML 元素示例：

<div id="appRoot">
  <my-component title="First Component"></my-component>
  <my-component title="Second Component"></my-component>
</div>

<script>
Vue.component('my-component', { 
    template: '<div> {{title}} </div>',
	props   : [ "title" ]
});

var app = new Vue({
  el: '#appRoot',
  data : { myVar : "My Variable" }
});
</script>

首先注意两个<my-component></my-component>组件元素如何都包含一个title属性——每个都有不同的值。

其次，注意定义 Vue.js 组件的 JavaScript 对象如何包含一个props 字段。该字段有一个字符串对象数组。每个字符串对象代表一个 Vue.js 组件可以接受的属性的名称。上面的示例包含单个字符串 value title，这意味着该组件仅接受该title属性。

三，注意Vue.js组件的HTML模板包含一个参考title 通过此引用属性，： {{title}}。此引用将插入使用时从组件 HTML 传递的 title 属性的值（<my-component title="XYZ"></my-component>）。上面的示例使用了 my-component两次，并将两个不同的值 (First Component和 Second Component) 传递给title属性。