- VueJS Tutorial
- VueJS - Home
- VueJS - Overview
- VueJS - Environment Setup
- VueJS - Introduction
- VueJS - Instances
- VueJS - Template
- VueJS - Components
- VueJS - Computed Properties
- VueJS - Watch Property
- VueJS - Binding
- VueJS - Events
- VueJS - Rendering
- VueJS - Transition & Animation
- VueJS - Directives
- VueJS - Routing
- VueJS - Mixins
- VueJS - Render Function
- VueJS - Reactive Interface
- VueJS - Examples
- VueJS Useful Resources
- VueJS - Quick Guide
- VueJS - Useful Resources
- VueJS - Discussion
VueJS - 快速指南
VueJS - 概述
VueJS是一个开源渐进式 JavaScript 框架，用于开发交互式 Web 界面。它是用于简化 Web 开发的著名框架之一。VueJS 专注于视图层。它可以轻松集成到前端开发的大型项目中，没有任何问题。
VueJS 的安装非常容易上手。任何开发人员都可以在短时间内轻松理解并构建交互式 Web 界面。VueJS 是由 Google 前员工 Evan You 创建的。VueJS 的第一个版本于 2014 年 2 月发布。最近它在 GitHub 上的星星数量达到了 64,828 颗星，非常受欢迎。
特征
以下是 VueJS 可用的功能。
虚拟DOM
VueJS 使用虚拟 DOM，其他框架（例如 React、Ember 等）也使用虚拟 DOM。不会对 DOM 进行更改，而是创建 DOM 的副本，该副本以 JavaScript 数据结构的形式存在。每当要进行任何更改时，都会对 JavaScript 数据结构进行更改，并将后者与原始数据结构进行比较。最终的更改会更新到真实的 DOM，用户将看到它的变化。这在优化方面是有好处的，成本更低，并且可以更快地进行更改。
数据绑定
数据绑定功能有助于操作 HTML 属性或为其赋值、更改样式、借助VueJS 提供的名为v-bind的绑定指令分配类。
成分
组件是 VueJS 的重要功能之一，有助于创建可在 HTML 中重用的自定义元素。
事件处理
v-on是添加到 DOM 元素的属性，用于监听 VueJS 中的事件。
动画/过渡
VueJS 提供了多种方法来在 HTML 元素添加/更新或从 DOM 中删除时应用过渡。VueJS 有一个内置的过渡组件，需要包裹在元素周围才能实现过渡效果。我们可以轻松添加第三方动画库，并为界面添加更多交互性。
计算属性
这是VueJS的重要特性之一。它有助于监听对 UI 元素所做的更改并执行必要的计算。不需要为此进行额外的编码。
模板
VueJS 提供基于 HTML 的模板，将 DOM 与 Vue 实例数据绑定。Vue 将模板编译为虚拟 DOM 渲染函数。我们可以使用渲染函数的模板，为此我们必须用渲染函数替换模板。
指令
VueJS 具有 v-if、v-else、v-show、v-on、v-bind 和 v-model 等内置指令，用于在前端执行各种操作。
观察者
观察者应用于变化的数据。例如，表单输入元素。在这里，我们不必添加任何其他事件。Watcher 负责处理任何数据更改，使代码简单快速。
路由
页面之间的导航是在 vue-router 的帮助下执行的。
轻的
VueJS 脚本非常轻量级，性能也非常快。
Vue-CLI
可以使用 vue-cli 命令行界面在命令行安装 VueJS。它有助于使用 vue-cli 轻松构建和编译项目。
与其他框架的比较
现在让我们将 VueJS 与其他框架（例如 React、Angular、Ember、Knockout 和 Polymer）进行比较。
VueJS 与 React
虚拟DOM
虚拟 DOM 是 DOM 树的虚拟表示。使用虚拟 DOM，会创建一个与真实 DOM 相同的 JavaScript 对象。任何时候需要对 DOM 进行更改时，都会创建一个新的 JavaScript 对象并进行更改。随后，对两个 JavaScript 对象进行比较，并在真实 DOM 中更新最终的更改。
VueJS 和 React 都使用虚拟 DOM，这使得速度更快。
模板 vs JSX
VueJS 分别使用 html、js 和 css。对于初学者来说，很容易理解并采用 VueJS 风格。VueJS 基于模板的方法非常简单。
React 使用 jsx 方法。ReactJS 的一切都是 JavaScript。HTML 和 CSS 都是 JavaScript 的一部分。
安装工具
React 使用create React app，VueJS 使用vue-cli /CDN/npm。两者都非常易于使用，并且该项目已满足所有基本要求。React 需要 webpack 来构建，而 VueJS 不需要。我们可以使用 cdn 库在 jsfiddle 或 codepen 中的任何位置开始 VueJS 编码。
人气
React 比 VueJS 更流行。React 的工作机会比 VueJS 多。React 背后有一个大牌，即 Facebook，这使得它更受欢迎。由于React使用了JavaScript的核心概念，因此它使用了JavaScript的最佳实践。使用 React 的人肯定会非常熟悉所有 JavaScript 概念。
VueJS 是一个开发框架。目前，与 React 相比，VueJS 的工作机会较少。根据调查，很多人正在适应 VueJS，这使得它比 React 和 Angular 更受欢迎。有一个很好的社区致力于 VueJS 的不同功能。vue-router 由该社区维护并定期更新。
VueJS 继承了 Angular 和 React 的优点，并构建了一个强大的库。由于其轻量级库，VueJS 比 React/Angular 要快得多。
VueJS 与 Angular
相似之处
VueJS 与 Angular 有很多相似之处。v-if、v-for 等指令几乎与 Angular 的 ngIf、ngFor 类似。它们都有一个用于项目安装和构建的命令行界面。VueJS 使用 Vue-cli，Angular 使用 angular-cli。两者都提供双向数据绑定、服务器端渲染等。
复杂
Vuejs 非常容易学习和上手。如前所述，初学者可以使用 VueJS 的 CDN 库并在 codepen 和 jsfiddle 中开始使用。
对于Angular来说，我们需要经过一系列的安装步骤，对于初学者来说Angular上手难度不大。它使用 TypeScript 进行编码，这对于来自 JavaScript 核心背景的人来说很困难。不过对于有Java和C#背景的用户来说更容易学习。
表现
性能如何，由用户决定。VueJS 文件大小比 Angular 小得多。以下链接提供了框架性能的比较http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
人气
目前，Angular 比 VueJS 更流行。许多组织都使用 Angular，这使得它非常受欢迎。对于有 Angular 经验的候选人来说，工作机会也更多。然而，VueJS 正在市场上占据一席之地，可以被认为是 Angular 和 React 的有力竞争对手。
依赖关系
Angular 提供了很多内置功能。我们必须导入所需的模块并开始使用它，例如@Angular/animations、@Angular/form。
VueJS 不具备 Angular 的所有内置功能，需要依赖第三方库才能使用。
灵活性
VueJS 可以轻松地与任何其他大型项目合并，没有任何问题。Angular 与任何其他现有项目一起使用并不容易。
向后兼容性
我们有 AngularJS、Angular2，现在还有 Angular4。AngularJS 和 Angular2 有很大的区别。由于核心差异，使用 AngularJS 开发的项目应用程序无法转换为 Angular2。
VueJS最新版本是2.0，向后兼容性很好。它提供了很好的文档，非常容易理解。
打字稿
Angular 使用 TypeScript 进行编码。用户需要了解 Typescript 才能开始使用 Angular。但是，我们可以使用 cdn 库在 jsfiddle 或 codepen 中的任何位置开始 VueJS 编码。我们可以使用标准 JavaScript，这很容易上手。
VueJS 与 Ember
相似之处
Ember提供了Ember命令行工具，即ember-cli，可以方便地安装和编译Ember项目。
VueJS 还有一个命令行工具 vue-cli 用于启动和构建项目。
它们都具有路由器、模板和组件等功能，这使得它们作为 UI 框架非常丰富。
表现
与 Ember 相比，VueJS 具有更好的性能。Ember 添加了 glimmer 渲染引擎，旨在提高重新渲染性能，这与使用虚拟 DOM 的 VueJS 和 React 是类似的概念。然而，与 Ember 相比，VueJS 具有更好的性能。
VueJS 与淘汰赛
Knockout 提供了良好的浏览器支持。低版本 IE 支持，而 IE8 及以下版本不支持 VueJS。随着时间的推移，淘汰赛的发展速度已经放缓。最近，同样的事情并没有太多流行。
另一方面，VueJS 已经开始受到 Vue 团队提供定期更新的欢迎。
VueJS 与 Polymer
Polymer 库由 Google 开发。它被用于许多 Google 项目，例如 Google I/O、Google Earth、Google Play Music 等。它提供类似于 VueJS 的数据绑定和计算属性。
Polymer 自定义元素定义包括纯 JavaScript/CSS、元素属性、生命周期回调和 JavaScript 方法。相比之下，VueJS 可以轻松使用 JavaScript/html 和 CSS。
Polymer 使用 Web 组件功能，需要浏览器进行填充，而浏览器不支持这些功能。VueJS 没有这样的依赖关系，并且可以在 IE9+ 的所有浏览器中正常工作。
VueJS - 环境设置
安装 VueJS 有多种方法。前面讨论了如何进行安装的一些方法。
直接在 HTML 文件中使用 <script> 标签
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body></body>
</html>
访问 VueJS 的主页https://vuejs.org/v2/guide/installation.html并根据需要下载 vue.js。有两个版本可供使用——生产版本和开发版本。开发版本未最小化，而生产版本已最小化，如以下屏幕截图所示。开发版本将有助于项目开发过程中的警告和调试模式。
使用CDN
我们还可以开始使用 CDN 库中的 VueJS 文件。链接https://unpkg.com/vue将提供最新版本的 VueJS。VueJS 还可以在 jsDelivr ( https://cdn.jsdelivr.net/npm/vue/dist/vue.js ) 和 cdnjs ( https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/ ) 上使用vue.js）。
如果需要的话，我们可以在我们这边托管这些文件并开始 VueJS 开发。
使用 NPM
对于使用 VueJS 的大型应用程序，建议使用 npm 包安装。它配备了 Browserify 和 Webpack 以及其他必要的工具，有助于开发。以下是使用 npm 安装的命令。
npm install vue
使用 CLI 命令行
VueJS 还提供 CLI 来安装 vue 并开始服务器激活。要使用 CLI 进行安装，我们需要安装 CLI，这是使用以下命令完成的。
npm install --global vue-cli
完成后，它会显示 VueJS 的 CLI 版本。安装需要几分钟时间。
+ vue-cli@2.8.2 added 965 packages in 355.414s
以下是使用 Webpack 创建项目的命令。
vue init webpack myproject
首先，请使用以下命令。
cd myproject npm install npm run dev
一旦我们执行 npm run dev，它就会启动服务器并提供在浏览器中显示的 url，如下图所示。
使用 CLI 的项目结构如下所示。
VueJS - 简介
Vue是一个用于构建用户界面的 JavaScript 框架。它的核心部分主要集中在视图层，非常容易理解。我们将在本教程中使用的 Vue 版本是 2.0。
由于 Vue 基本上是为前端开发而构建的，因此我们将在接下来的章节中处理大量 HTML、JavaScript 和 CSS 文件。为了理解细节，让我们从一个简单的例子开始。
在这个例子中，我们将使用vuejs的开发版本。
例子
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
});
</script>
</body>
</html>
输出
这是我们使用 VueJS 创建的第一个应用程序。如上面的代码所示，我们在 .html 文件的开头包含了 vue.js。
<script type = "text/javascript" src = "js/vue.js"></script>
正文中添加了一个 div，用于在浏览器中打印“我的第一个 VueJS 任务” 。
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>
我们还在插值中添加了一条消息，即{{}}。它与 VueJS 交互并在浏览器中打印数据。为了获取 DOM 中消息的值，我们创建一个 vuejs 实例，如下所示 -
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
})
在上面的代码片段中，我们调用 Vue 实例，它获取 DOM 元素的 id，即 e1:'#intro'，它是 div 的 id。消息中的数据被分配了值'My first VueJS Task'。VueJS 与 DOM 交互，并使用'My first VueJS Task'更改 DOM {{message}} 中的值。
如果我们碰巧更改了控制台中消息的值，浏览器中也会反映出同样的情况。例如 -
控制台详细信息
在上面的控制台中，我们打印了 vue_det 对象，它是 Vue 的一个实例。我们正在用“VueJs 很有趣”更新消息，并且浏览器中的消息立即发生更改，如上面的屏幕截图所示。
这只是一个基本示例，展示了 VueJS 与 DOM 的链接，以及我们如何操作它。在接下来的几章中，我们将学习指令、组件、条件循环等。
VueJS - 实例
要开始使用 VueJS，我们需要创建 Vue 实例，称为根 Vue 实例。
句法
var app = new Vue({
// options
})
让我们看一个示例来了解 Vue 构造函数中需要包含哪些内容。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<h1>{{mydetails()}}</h1>
</div>
<script type = "text/javascript" src = "js/vue_instance.js"></script>
</body>
</html>
vue_instance.js
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
address : "Mumbai"
},
methods: {
mydetails : function() {
return "I am "+this.firstname +" "+ this.lastname;
}
}
})
对于 Vue，有一个名为el的参数。它采用 DOM 元素的 id。在上面的示例中，我们有 id #vue_det。它是 div 元素的 id，存在于 .html 中。
<div id = "vue_det"></div>
现在，我们要做的任何事情都会影响 div 元素，而不会影响它之外的任何内容。
接下来，我们定义了数据对象。它具有值名字、姓氏和地址。
div 内部也分配了相同的值。例如，
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
</div>
Firstname : {{firstname}} 值将在插值内替换，即 {{}} 替换为数据对象中分配的值，即 Ria。姓氏也是如此。
接下来，我们在方法中定义了函数 mydetails 和返回值。它在 div 内部被分配为
<h1>{{mydetails()}}</h1>
因此，在 {{} } 内部调用了函数 mydetails。Vue 实例中返回的值将打印在 {{}} 中。检查输出以供参考。
输出
现在，我们需要将选项传递给 Vue 构造函数，主要是数据、模板、要挂载的元素、方法、回调等。
让我们看一下传递给 Vue 的选项。
#data - 这种类型的数据可以是对象或函数。Vue 将其属性转换为 getter/setter 以使其具有响应性。
我们来看看选项中数据是如何传递的。
例子
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var _obj = { fname: "Raj", lname: "Singh"}
// direct instance creation
var vm = new Vue({
data: _obj
});
console.log(vm.fname);
console.log(vm.$data);
console.log(vm.$data.fname);
</script>
</body>
</html>
输出
console.log(vm.fname); // 打印拉杰
console.log(vm.$data); 打印完整的对象，如上所示
console.log(vm.$data.fname); // 打印拉杰
如果有组件，则必须从函数引用数据对象，如以下代码所示。
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var _obj = { fname: "Raj", lname: "Singh"};
// direct instance creation
var vm = new Vue({
data: _obj
});
console.log(vm.fname);
console.log(vm.$data);
console.log(vm.$data.fname);
// must use function when in Vue.extend()
var Component = Vue.extend({
data: function () {
return _obj
}
});
var myComponentInstance = new Component();
console.log(myComponentInstance.lname);
console.log(myComponentInstance.$data);
</script>
</body>
</html>
对于组件来说，数据是一个函数，它与 Vue.extend 一起使用，如上所示。数据是一个函数。例如，
data: function () {
return _obj
}
要引用组件中的数据，我们需要创建它的实例。例如，
var myComponentInstance = new Component();
要从数据中获取详细信息，我们需要执行与上面父组件相同的操作。例如，
console.log(myComponentInstance.lname); console.log(myComponentInstance.$data);
以下是浏览器中显示的详细信息。
Props - props 的类型是字符串或对象的数组。它采用基于数组或基于对象的语法。据说它们是用于从父组件接受数据的属性。
实施例1
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})
实施例2
Vue.component('props-demo-advanced', {
props: {
// just type check
height: Number,
// type check plus other validations
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})
propsData - 用于单元测试。
类型- 字符串数组。例如，{ [key: string]: 任意 }。在创建Vue实例时需要传递它。
例子
var Comp = Vue.extend({
props: ['msg'],
template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
propsData: {
msg: 'hello'
}
})
计算- 类型：{ [key: string]: Function | { 获取：函数，设置：函数 } }
例子
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var vm = new Vue({
data: { a: 2 },
computed: {
// get only, just need a function
aSum: function () {
return this.a + 2;
},
// both get and set
aSquare: {
get: function () {
return this.a*this.a;
},
set: function (v) {
this.a = v*2;
}
}
}
})
console.log(vm.aSquare); // -> 4
vm.aSquare = 3;
console.log(vm.a); // -> 6
console.log(vm.aSum); // -> 8
</script>
</body>
</html>
Computed 有两个函数aSum和aSquare。
函数 aSum 仅返回this.a+2。函数 aSquare 又是两个函数get和set。
变量 vm 是 Vue 的一个实例，它调用 aSquare 和 aSum。另外 vm.aSquare = 3 从 aSquare 调用 set 函数，并且 vm.aSquare 调用 get 函数。我们可以在浏览器中检查输出，如下图所示。
方法- 方法将包含在 Vue 实例中，如以下代码所示。我们可以使用 Vue 对象访问该函数。
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script type = "text/javascript">
var vm = new Vue({
data: { a: 5 },
methods: {
asquare: function () {
this.a *= this.a;
}
}
})
vm.asquare();
console.log(vm.a); // 25
</script>
</body>
</html>
方法是 Vue 构造函数的一部分。让我们使用 Vue 对象vm.asquare ()调用该方法，属性a的值在asquare函数中更新。a 的值从 1 更改为 25，在以下浏览器控制台中也可以看到同样的情况。
VueJS - 模板
我们在前面的章节中学习了如何在屏幕上以文本内容的形式输出。在本章中，我们将学习如何在屏幕上以 HTML 模板的形式获取输出。
为了理解这一点，让我们考虑一个示例并查看浏览器中的输出。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<div>{{htmlcontent}}</div>
</div>
<script type = "text/javascript" src = "js/vue_template.js"></script>
</body>
</html>
vue_template.js
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
htmlcontent : "<div><h1>Vue Js Template</h1></div>"
}
})
现在，假设我们要在页面上显示 html 内容。如果我们碰巧将它与插值一起使用，即使用双大括号，这就是我们将在浏览器中得到的结果。
如果我们看到 html 内容的显示方式与我们在变量 htmlcontent 中给出的方式相同，那么这不是我们想要的，我们希望它在浏览器上以正确的 HTML 内容显示。
为此，我们必须使用v-html指令。当我们将 v-html 指令分配给 html 元素时，VueJS 知道它必须将其输出为 HTML 内容。让我们在.html文件中添加 v-html 指令并查看差异。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<div v-html = "htmlcontent"></div>
</div>
<script type = "text/javascript" src = "js/vue_template.js"></script>
</body>
</html>
现在，我们不需要双大括号来显示 HTML 内容，而是使用 v-html = ”htmlcontent”，其中 htmlcontent 在 js文件中定义，如下所示 -
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
htmlcontent : "<div><h1>Vue Js Template</h1></div>"
}
})
浏览器中的输出如下 -
如果我们检查浏览器，我们将看到内容以与.js文件中定义相同的方式添加到变量htmlcontent 中：“<div><h1>Vue Js Template</h1></div>”。
让我们看一下浏览器中的检查元素。
我们已经了解了如何将 HTML 模板添加到 DOM。现在，我们将了解如何向现有 HTML 元素添加属性。
考虑一下，我们在 HTML 文件中有一个图像标签，我们想要分配 src，它是 Vue 的一部分。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<div v-html = "htmlcontent"></div>
<img src = "" width = "300" height = "250" />
</div>
<script type = "text/javascript" src = "js/vue_template1.js"></script>
</body>
</html>
看上面的img标签，src是空白的。我们需要从 vue js 添加 src。让我们看看如何做。我们将把 img src 存储在.js文件的数据对象中，如下所示 -
var vm = new Vue({
el: '#vue_det',
data: {
firstname : "Ria",
lastname : "Singh",
htmlcontent : "<div><h1>Vue Js Template</h1></div>",
imgsrc : "images/img.jpg"
}
})
如果我们如下分配 src，浏览器中的输出将如下面的屏幕截图所示。
<img src = "{{imgsrc}}" width = "300" height = "250" />
我们得到了一个破碎的图像。要将任何属性分配给 HMTL 标签，我们需要使用v-bind指令。让我们使用 v-bind 指令将 src 添加到图像中。
这就是它在.html文件中的分配方式。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
<div v-html = "htmlcontent"></div>
<img v-bind:src = "imgsrc" width = "300" height = "250" />
</div>
<script type = "text/javascript" src = "js/vue_template1.js"></script>
</body>
</html>
我们需要在 src 前面加上v-bind:src = ”imgsrc”前缀，并在变量名称前面加上 src。
以下是浏览器中的输出。
让我们用 v-bind 检查 src 的样子。
如上面的屏幕截图所示，分配的 src 没有任何 vuejs 属性。
VueJS - 组件
Vue 组件是 VueJS 的重要功能之一，它可以创建自定义元素，可以在 HTML 中重用。
让我们使用一个示例并创建一个组件，这将更好地理解组件如何与 VueJS 一起工作。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript" src = "js/vue_component.js"></script>
</body>
</html>
vue_component.js
Vue.component('testcomponent',{
template : '<div><h1>This is coming from component</h1></div>'
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});
在 .html 文件中，我们创建了两个 ID 为component_test和component_test1的 div 。在上面显示的.js文件中，使用 div id 创建了两个 Vue 实例。我们创建了一个与两个视图实例一起使用的通用组件。
要创建组件，语法如下。
Vue.component('nameofthecomponent',{ // options});
创建组件后，组件的名称将成为自定义元素，并且可以在创建的 Vue 实例元素中使用相同的名称，即在带有 ids component_test和component_test1的 div 内。
在.js文件中，我们使用测试组件作为组件的名称，并使用相同的名称作为 div 内的自定义元素。
例子
<div id = "component_test"> <testcomponent></testcomponent> </div> <div id = "component_test1"> <testcomponent></testcomponent> </div>
在.js文件中创建的组件中，我们添加了一个模板，并为其分配了 HTML 代码。这是注册全局组件的一种方法，可以将其作为任何 vue 实例的一部分，如以下脚本所示。
Vue.component('testcomponent',{
template : '<div><h1>This is coming from component</h1></div>'
});
执行时，浏览器中也会反映出来。
这些组件被赋予自定义元素标签，即<testcomponent></testcomponent>。但是，当我们在浏览器中检查相同内容时，我们不会注意到模板中存在纯 HTML 格式的自定义标记，如以下屏幕截图所示。
我们还直接将组件作为 vue 实例的一部分，如以下脚本所示。
var vm = new Vue({
el: '#component_test',
components:{
'testcomponent': {
template : '<div><h1>This is coming from component</h1></div>'
}
}
});
这称为本地注册，组件将仅是创建的 vue 实例的一部分。
到目前为止，我们已经看到了具有基本选项的基本组件。现在，让我们向其中添加更多选项，例如数据和方法。正如 Vue 实例有数据和方法一样，组件也有相同的数据和方法。因此，我们将扩展我们已经在数据和方法中看到的代码。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript" src = "js/vue_component.js"></script>
</body>
</html>
vue_component.js
Vue.component('testcomponent',{
template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
data: function() {
return {
name : "Ria"
}
},
methods:{
changename : function() {
this.name = "Ben";
},
originalname: function() {
this.name = "Ria";
}
}
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});
在上面的.js文件中，我们添加了作为函数的数据，该函数返回一个对象。该对象有一个名称属性，该属性被赋予值“Ria”。这在以下模板中使用。
template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
尽管数据作为组件中的函数，我们可以像使用直接 Vue 实例一样使用它的属性。此外，还添加了两个方法：changename 和originalname。在changename中，我们正在更改name属性，在originalname中，我们将其重置回原始名称。
我们还在 div 上添加了两个事件：mouseover 和 mouseout。事件的详细信息将在事件章节中讨论。所以现在，mouseover 调用changename方法，mouseout 调用originalname方法。
其显示内容如以下浏览器所示。
在上面的浏览器中可以看到，它显示的是在 data 属性中分配的名称，这是相同的名称。我们还在 div 上分配了一个 mouseover 事件和一个 mouseout 事件。让我们看看当鼠标悬停和鼠标移出时会发生什么。
鼠标悬停时，我们看到第一个组件的名称更改为 Ben，但是第二个组件保持原样。这是因为数据组件是一个函数并且它返回一个对象。因此，当在一处更改时，在其他情况下不会覆盖该更改。
动态组件
动态组件是使用关键字<component></component>创建的，并使用属性进行绑定，如以下示例所示。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<component v-bind:is = "view"></component>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
}
}
});
</script>
</body>
</html>
输出
动态组件是使用以下语法创建的。
<component v-bind:is = "view"></component>
它有 v-bind:is = ”view”，并为其分配了一个值 view。View 在 Vue 实例中定义如下。
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
}
}
});
执行时，模板动态组件将显示在浏览器中。
VueJS - 计算属性
我们已经看到了 Vue 实例和组件的方法。计算属性类似于方法，但与方法相比有一些区别，我们将在本章中讨论。
在本章结束时，我们将能够决定何时使用方法以及何时使用计算属性。
让我们通过一个例子来理解计算属性。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
FirstName : <input type = "text" v-model = "firstname" /> <br/><br/>
LastName : <input type = "text" v-model = "lastname"/> <br/><br/>
<h1>My name is {{firstname}} {{lastname}}</h1>
<h1>Using computed method : {{getfullname}}</h1>
</div>
<script type = "text/javascript" src = "js/vue_computedprops.js"></script>
</body>
</html>
vue_computeprops.js
var vm = new Vue({
el: '#computed_props',
data: {
firstname :"",
lastname :"",
birthyear : ""
},
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}
})
在这里，我们创建了包含名字和姓氏的.html文件。名字和姓氏是一个使用名字和姓氏属性绑定的文本框。
我们正在调用计算方法 getfullname，它返回输入的名字和姓氏。
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}
当我们在文本框中键入内容时，当属性名或姓氏发生更改时，函数会返回相同的结果。因此，在计算的帮助下，我们不必做任何具体的事情，例如记住调用函数。通过计算，它会被自身调用，因为内部使用的属性发生变化，即名字和姓氏。
在下面的浏览器中也显示相同的内容。在文本框中输入内容，系统将使用计算函数进行更新。
现在，让我们尝试理解方法和计算属性之间的区别。两者都是对象。里面定义了函数，有返回值。
对于方法，我们将其称为函数，并将计算的称为属性。使用以下示例，让我们了解方法和计算属性之间的区别。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
<h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
<h1>Random No from method: {{getrandomno1()}}</h1>
<h1>Random No from method : {{getrandomno1()}}</h1>
<h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
<h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
<h1 style = "background-color:gray;">Random No from computed
property: {{getrandomno}}</h1>
<h1>Random No from method: {{getrandomno1()}}</h1>
<h1>Random No from method: {{getrandomno1()}}</h1>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
name : "helloworld"
},
methods: {
getrandomno1 : function() {
return Math.random();
}
},
computed :{
getrandomno : function(){
return Math.random();
}
}
});
</script>
</body>
</html>
在上面的代码中，我们创建了一个名为getrandomno1的方法和一个带有函数getrandomno 的计算属性。两者都使用 Math.random() 返回随机数。
它在浏览器中的显示如下图所示。该方法和计算属性被多次调用以显示差异。
如果我们查看上面的值，我们会发现从计算属性返回的随机数保持不变，无论调用多少次。这意味着每次调用它时，都会更新所有值的最后一个值。而对于方法来说，它是一个函数，因此每次调用它时都会返回不同的值。
在计算属性中获取/设置
在本节中，我们将通过示例了解计算属性中的 get/set 函数。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
<input type = "text" v-model = "fullname" />
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
firstName : "Terry",
lastName : "Ben"
},
methods: {
},
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
}
}
}
});
</script>
</body>
</html>
我们定义了一个输入框，它绑定到fullname，这是一个计算属性。它返回一个名为get的函数，该函数给出全名，即名字和姓氏。此外，我们将名字和姓氏显示为 -
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
让我们在浏览器中检查一下。
现在，如果我们更改文本框中的名称，我们将看到以下屏幕截图中显示的名称没有反映相同的内容。
让我们在全名计算属性中添加 setter 函数。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
<input type = "text" v-model = "fullname" />
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
firstName : "Terry",
lastName : "Ben"
},
methods: {
},
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
},
set : function(name) {
var fname = name.split(" ");
this.firstName = fname[0];
this.lastName = fname[1]
}
}
}
});
</script>
</body>
</html>
我们在全名计算属性中添加了 set 函数。
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
},
set : function(name) {
var fname = name.split(" ");
this.firstName = fname[0];
this.lastName = fname[1]
}
}
}
它以名称作为参数，只不过是文本框中的全名。随后，根据空间进行分割，并更新名字和姓氏。现在，当我们运行代码并编辑文本框时，浏览器中将显示相同的内容。由于设置功能，名字和姓氏将被更新。get 函数返回名字和姓氏，而 set 函数则更新它（如果有任何编辑）。
现在，文本框中输入的内容与显示的内容相匹配，如上面的屏幕截图所示。
VueJS - 观察属性
在本章中，我们将了解 Watch 属性。通过一个例子，我们将看到我们可以在 VueJS 中使用 Watch 属性。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
Kilometers : <input type = "text" v-model = "kilometers">
Meters : <input type = "text" v-model = "meters">
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = val * 1000;
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
</script>
</body>
</html>
在上面的代码中，我们创建了两个文本框，一个包含公里，另一个包含米。在数据属性中，公里和米初始化为0。有一个使用公里和米两个函数创建的监视对象。在这两个函数中，都完成了从公里到米以及从米到公里的转换。
当我们在任何文本框中输入值时，无论哪个文本框发生了变化，Watch 都会负责更新两个文本框。我们不必专门分配任何事件并等待它发生变化并进行额外的验证工作。Watch 负责使用相应函数中完成的计算来更新文本框。
让我们看一下浏览器中的输出。
让我们在公里文本框中输入一些值，并查看它在米文本框中的变化，反之亦然。
现在让我们在米文本框中输入并查看它在公里文本框中的变化。这是在浏览器中看到的显示。
VueJS - 绑定
在本章中，我们将学习如何借助VueJS 提供的名为v-bind的绑定指令来操作 HTML 属性或为其赋值、更改样式以及分配类。
让我们考虑一个示例来了解为什么需要以及何时使用 v-bind 指令进行数据绑定。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
{{title}}<br/>
<a href = "hreflink" target = "_blank"> Click Me </a> <br/>
<a href = "{{hreflink}}" target = "_blank">Click Me </a> <br/>
<a v-bind:href = "hreflink" target = "_blank">Click Me </a> <br/>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
title : "DATA BINDING",
hreflink : "http://www.google.com"
}
});
</script>
</body>
</html>
在上面的示例中，我们显示了一个标题变量和三个锚链接。我们还为数据对象中的 href 分配了一个值。
现在，如果我们检查浏览器中的输出并进行检查，我们将看到前两个锚链接的 href 不正确，如以下屏幕截图所示。
第一个 clickme 将 href 显示为 hreflink，第二个 clickme 将其显示为 {{hreflink}}，而最后一个按我们的要求显示正确的 url。
因此，要为 HTML 属性赋值，我们需要使用指令 v-bind 对其进行绑定，如下所示。
<a v-bind:href = "hreflink" target = "_blank">Click Me </a>
VueJS 还提供了 v-bind 的简写形式，如下所示。
<a :href = "hreflink" target = "_blank">Click Me </a>
如果我们在浏览器中看到检查元素，锚标记不会显示 v-bind 属性，但是，它会显示纯 HTML。当我们检查 DOM 时，看不到任何 VueJS 属性。
绑定 HTML 类
要绑定 HTML 类，我们需要使用v-bind: class。让我们考虑一个示例并在其中绑定类。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.active {
background: red;
}
</style>
<div id = "classbinding">
<div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "CLASS BINDING",
isactive : true
}
});
</script>
</body>
</html>
有一个用 v-bind 创建的 div：class=”{active: isactive}”。
这里，isactive是一个基于 true 或 false 的变量。它将把类 active 应用于 div。在数据对象中，我们已将 isactive 变量指定为 true。.active样式中定义了一个类，其背景色为红色。
如果变量 isactive 为 true，则将应用颜色，否则不会应用颜色。以下将是浏览器中的输出。
在上面的显示中，我们可以看到背景颜色是红色。class = ”active” 应用于 div。
现在，让我们将变量的值更改为 false 并查看输出。变量 isactive 更改为 false，如以下代码所示。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.active {
background: red;
}
</style>
<div id = "classbinding">
<div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "CLASS BINDING",
isactive : false
}
});
</script>
</body>
</html>
在上面的显示中，我们可以看到 active 类没有应用于 div。
我们还可以使用 v-bind 属性将多个类分配给 HTML 标签。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.info {
color: #00529B;
background-color: #BDE5F8;
}
div {
margin: 10px 0;
padding: 12px;
}
.active {
color: #4F8A10;
background-color: #DFF2BF;
}
.displayError{
color: #D8000C;
background-color: #FFBABA;
}
</style>
<div id = "classbinding">
<div class = "info" v-bind:class = "{ active: isActive, 'displayError': hasError }">
{{title}}
</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "This is class binding example",
isActive : false,
hasError : false
}
});
</script>
</body>
</html>
对于上面代码中的div，我们应用了一个普通的类，例如class = ”info”。基于 isActive 和 hasError 变量，其他类将应用于该 div。
输出
这是一个普通的应用类。现在这两个变量都是假的。让我们将isActive变量设置为 true 并查看输出。
在上面的显示中，在 DOM 中我们可以看到分配给 div 的两个类：info 和 active。让我们将 hasError 变量设为 true，将 isActive 设为 false。
现在，当我们在上面的显示中看到时，info 和 displayError 类已应用于 div。这就是我们如何根据条件应用多个类的方法。
我们还可以将类作为数组传递。让我们举个例子来理解这一点。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.info {
color: #00529B;
background-color: #BDE5F8;
}
div {
margin: 10px 0;
padding: 12px;
font-size : 25px;
}
.active {
color: #4F8A10;
background-color: #DFF2BF;
}
.displayError{
color: #D8000C;
background-color: #FFBABA;
}
</style>
<div id = "classbinding">
<div v-bind:class = "[infoclass, errorclass]">{{title}}</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "This is class binding example",
infoclass : 'info',
errorclass : 'displayError'
}
});
</script>
</body>
</html>
输出
正如我们在上面看到的，这两个类都应用于 div。让我们使用一个变量，并根据变量的值分配类。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.info {
color: #00529B;
background-color: #BDE5F8;
}
div {
margin: 10px 0;
padding: 12px;
font-size : 25px;
}
.active {
color: #4F8A10;
background-color: #DFF2BF;
}
.displayError{
color: #D8000C;
background-color: #FFBABA;
}
</style>
<div id = "classbinding">
<div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "This is class binding example",
infoclass : 'info',
errorclass : 'displayError',
isActive : true,
haserror : false
}
});
</script>
</body>
</html>
我们使用了两个变量isActive和haserror，同样的变量也用于 div 类绑定，如下面的 div 标签所示。
<div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>
如果 isActive 为 true，则 infoclass 将分配给它。haserror 也是如此，如果为 true，则仅将 errorClass 应用于它。
现在，让我们将 haserror 变量设置为 true，将 isActive 变量设置为 false。
我们现在将为组件中的类添加 v-bind。在下面的示例中，我们向组件模板和组件添加了一个类。
例子
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.info {
color: #00529B;
background-color: #BDE5F8;
}
div {
margin: 10px 0;
padding: 12px;
font-size : 25px;
}
.active {
color: #4F8A10;
background-color: #DFF2BF;
}
.displayError{
color: #D8000C;
background-color: #FFBABA;
}
</style>
<div id = "classbinding">
<new_component class = "active"></new_component>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbi