Vue.js是一个开放源代码JavaScript库，用于制作单页应用程序(SPA)。 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，则还可以在HTML页面中包括以下两个script元素之一。这些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({});

注意将JavaScript对象传递给Vue构造函数。可以给该JavaScript对象许多属性，这些属性指定Vue实例的工作方式。因此，此对象也称为选项对象。

将Vue实例添加到HTML元素

要将Vue实例应用于Web应用程序，我们需要将Vue实例添加到应用程序的根HTML元素。通过将HTML元素的ID设置为在创建时传递给" Vue"实例的JavaScript对象的" el"属性的值，可以将" Vue"实例添加到HTML元素。这是将Vue实例添加到HTML元素的示例：

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

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

注意传递给Vue构造函数的options对象的el属性。 " el"属性的值是一个选择器，用于告知" Vue"实例应添加到哪个HTML元素。

将数据传递到Vue实例

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

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

可以从" Vue"实例添加到的HTML元素中访问此数据。在本教程后面的部分中，我们将看到示例。

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

计算属性

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

计算的属性作为函数传递到"计算的"对象内，该对象也与"数据"对象一起传递给" Vue"实例。这是创建具有计算属性的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>

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

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

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"的字段存在，该字段在创建时传递给" 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) }}

该表达式的结果将是当以" myVar"作为参数调用时，" beautifyText()"函数返回的结果。

Vue.JS组件

Vue.JS组件是可重用的HTML元素，我们可以在Vue.js应用程序的HTML模板内使用。要创建组件，我们必须首先注册它。这是注册Vue.js组件的样子：

Vue.component('my-component', {

});

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

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

这是使用在上一个代码示例中注册的my-componentVue.js组件的示例：

<my-component></my-component>

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

此时组件实际上并没有做任何事情，因此让我们添加一个组件模板。组件模板是一串HTML字符串，显示在HTML文档中该组件所在的位置。首先让我将模板添加到组件注册中：

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

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

组件数据

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

相反，我们需要提供一个"数据"对象工厂。看起来是这样的：

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

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

其次，请注意"数据"工厂函数如何返回一个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.js组件配置计算出的属性，就像为Vue实例本身所做的那样，通过在计算对象的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对象如何包含一个带有名为derived的属性的computed属性，该属性引用了函数。该函数从组件的data属性myVar中获取myVar变量，并将其乘以2.

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

组件属性

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> &lt;/ my-component>组件元素如何都包含一个title属性，每个属性具有不同的值。

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

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