- VueJS 教程
- VueJS - 首页
- VueJS - 概述
- VueJS - 环境搭建
- VueJS - 简介
- VueJS - 实例
- VueJS - 模板
- VueJS - 组件
- VueJS - 计算属性
- VueJS - 侦听器 (Watch Property)
- VueJS - 数据绑定
- VueJS - 事件
- VueJS - 渲染
- VueJS - 过渡与动画
- VueJS - 指令
- VueJS - 路由
- VueJS - 混入 (Mixins)
- VueJS - 渲染函数
- VueJS - 响应式接口
- VueJS - 例子
- VueJS 有用资源
- VueJS 快速指南
- VueJS - 有用资源
- VueJS - 讨论
VueJS 快速指南
VueJS - 概述
VueJS是一个开源的渐进式JavaScript框架，用于开发交互式网页界面。它是简化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，这些指令用于在前端执行各种操作。
侦听器 (Watchers)
侦听器应用于发生变化的数据。例如，表单输入元素。在这里，我们不必添加任何额外的事件。侦听器负责处理任何数据更改，使代码更简洁、更快。
路由
页面间的导航借助 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，这使得它们速度更快。
模板与 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 不需要。我们可以在 jsfiddle 或 codepen 中使用 cdn 库开始 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，并且具有良好的向后兼容性。它提供了良好的文档，非常易于理解。
TypeScript
Angular 使用 TypeScript 进行编码。用户需要具备 TypeScript 知识才能开始使用 Angular。但是，我们可以在 jsfiddle 或 codepen 中使用 cdn 库开始 VueJS 编码。我们可以使用标准 JavaScript，这非常容易上手。
VueJS 与 Ember
相似之处
Ember 提供 Ember 命令行工具，即 ember-cli，用于轻松安装和编译 Ember 项目。
VueJS 也具有命令行工具 vue-cli 来启动和构建项目。
它们都具有路由、模板和组件等特性，使其成为非常丰富的 UI 框架。
性能
VueJS 的性能比 Ember 好。Ember 添加了一个 glimmer 渲染引擎，旨在提高重新渲染性能，这与 VueJS 和 React 使用虚拟 DOM 的概念类似。但是，与 Ember 相比，VueJS 的性能更好。
VueJS 与 Knockout
Knockout 提供了良好的浏览器支持。它支持较低版本的 IE，而 VueJS 不支持 IE8 及以下版本。Knockout 的开发速度随着时间的推移而减慢。最近它并没有那么流行。
另一方面，VueJS 已经开始流行起来，Vue 团队提供了定期更新。
VueJS 与 Polymer
Polymer 库由 Google 开发。它用于许多 Google 项目，例如 Google I/O、Google 地球、Google Play 音乐等。它提供与 VueJS 类似的数据绑定和计算属性。
Polymer 自定义元素定义包含纯 JavaScript/CSS、元素属性、生命周期回调和 JavaScript 方法。相比之下，VueJS 允许轻松使用 JavaScript/html 和 CSS。
Polymer 使用 Web 组件特性，需要为不支持这些特性的浏览器提供 polyfills。VueJS 没有这种依赖性，并且在从 IE9+ 的所有浏览器中都能正常工作。
VueJS - 环境搭建
安装 VueJS 的方法有很多种。接下来将讨论如何进行安装的一些方法。
直接在 HTML 文件中使用<script>标签
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body></body>
</html>
访问VueJS的官方网站https://vuejs.ac.cn/v2/guide/installation.html，根据需要下载vue.js文件。它有两个版本可供使用：生产版本和开发版本。开发版本未压缩，而生产版本已压缩，如下图所示。开发版本在项目开发过程中有助于显示警告信息和启用调试模式。
使用CDN
我们也可以从CDN库中使用VueJS文件。链接https://unpkg.com/vue将提供最新版本的VueJS。VueJS也可在jsDelivr (https://cdn.jsdelivr.net.cn/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版本。安装需要几分钟时间。
+ [email protected] 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>
在body中添加了一个div，它在浏览器中打印“My first VueJS Task”。
<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 is interesting”，浏览器中的内容也立即更改，如上图所示。
这只是一个基本的例子，展示了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元素，而不会影响其外部。
接下来，我们定义了data对象。它包含firstname、lastname和address的值。
这些值在div内部被赋值。例如：
<div id = "vue_det">
<h1>Firstname : {{firstname}}</h1>
<h1>Lastname : {{lastname}}</h1>
</div>
Firstname : {{firstname}}的值将在插值{{}}内被data对象中赋值的值Ria替换。lastname也是如此。
接下来，我们有methods，其中我们定义了一个函数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); // 打印 Raj
console.log(vm.$data); 打印完整的对象，如上所示
console.log(vm.$data.fname); // 打印 Raj
如果存在组件，则必须从函数中引用data对象，如下面的代码所示。
<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 - 这用于单元测试。
Type - 字符串数组。例如，{ [key: string]: any }。它需要在创建Vue实例期间传递。
示例
var Comp = Vue.extend({
props: ['msg'],
template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
propsData: {
msg: 'hello'
}
})
Computed - 类型：{ [key: string]: Function | { get: Function, set: 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函数。我们可以在浏览器中检查输出，它看起来像下面的截图。
Methods - 方法需要包含在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文件中有一个img标签，我们想为其赋值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文件中的data对象中，如下所示：
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" />
我们会看到一个损坏的图像。要将任何属性分配给HTML标签，我们需要使用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 文件中，我们创建了两个 div，id 分别为 component_test 和 component_test1。在上方的 .js 文件中，我们使用这两个 div 的 id 创建了两个 Vue 实例。我们创建了一个公共组件，用于这两个视图实例。
创建组件的语法如下所示。
Vue.component('nameofthecomponent',{ // options});
创建组件后，组件名称将成为自定义元素，可以在创建的 Vue 实例元素中使用，即在 id 为 component_test 和 component_test1 的 div 内使用。
在 .js 文件中，我们使用了 test 组件作为组件名称，并在 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 文件中，我们添加了数据，它是一个函数，返回一个对象。该对象具有一个 name 属性，其值为“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，但是第二个组件保持不变。这是因为 data 组件是一个函数，它返回一个对象。因此，当在一个地方更改它时，在其他地方不会被覆盖。
动态组件
动态组件是使用关键字 <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;
}
}
})
在这里，我们创建了一个带有 firstname 和 lastname 的.html 文件。Firstname 和 Lastname 是使用属性 firstname 和 lastname 绑定的文本框。
我们调用计算方法 getfullname，它返回输入的 firstname 和 lastname。
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}
当我们在文本框中输入内容时，当属性 firstname 或 lastname 更改时，该函数会返回相同的内容。因此，借助计算属性，我们不必执行任何特定操作，例如记住调用函数。使用计算属性，它会自行调用，因为内部使用的属性会更改，即 firstname 和 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
在本节中，我们将通过一个示例学习计算属性中的 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 的函数，该函数提供 fullname，即名字和姓氏。此外，我们还显示了名字和姓氏，如下所示：
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
让我们在浏览器中检查一下。
现在，如果我们更改文本框中的名称，我们将看到在以下屏幕截图中显示的名称不会反映出来。
让我们在 fullname 计算属性中添加 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>
我们在 fullname 计算属性中添加了 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]
}
}
}
它将名称作为参数，这只是文本框中的 fullname。稍后，它将在空格处拆分，并更新名字和姓氏。现在，当我们运行代码并编辑文本框时，浏览器中将显示相同的内容。由于 set 函数，名字和姓氏将被更新。get 函数返回名字和姓氏，而 set 函数在编辑任何内容时会更新它。
现在，文本框中输入的任何内容都与上面屏幕截图中显示的内容匹配。
VueJS - 侦听器 (Watch Property)
在本节中，我们将学习 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>
在上面的代码中，我们创建了两个文本框，一个带有kilometers，另一个带有meters。在 data 属性中，kilometers 和 meters 初始化为 0。创建了一个 watch 对象，其中包含两个函数kilometers 和meters。在这两个函数中，都进行了从公里到米和从米到公里的转换。
当我们在任何文本框中输入值时，无论更改哪个文本框，Watch 都负责更新这两个文本框。我们不必专门分配任何事件并等待它更改并执行验证的额外工作。Watch 负责使用各个函数中完成的计算来更新文本框。
让我们看一下浏览器中的输出。
让我们在 kilometers 文本框中输入一些值，并查看它在 meters 文本框中的变化，反之亦然。
现在让我们在 meters 文本框中输入内容，并查看它在 kilometers 文本框中的变化。这是在浏览器中看到的显示。
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>
在上面的示例中，我们显示了一个 title 变量和三个锚点链接。我们还从 data 对象为 href 分配了一个值。
现在，如果我们在浏览器中检查输出并进行检查，我们将看到前两个锚点链接没有正确显示 href，如下图所示。
第一个 clickme 将 href 显示为 hreflink，第二个显示为 {{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: class=” {active: isactive}” 的 div。
这里，isactive 是一个基于 true 或 false 的变量。它将 active 类应用于 div。在 data 对象中，我们将 isactive 变量设置为 true。在样式.active 中定义了一个类，其背景颜色为红色。
如果变量 isactive 为 true，则将应用颜色，否则不应用。浏览器中的输出如下所示。
在上图中，我们可以看到背景颜色为红色。类 = ”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。
输出
这是一个应用的普通类。这两个变量现在都是 false。让我们将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 的 class 绑定中也使用了相同的变量，如下面的 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: '#classbinding',
data: {
title : "This is class binding example",
infoclass : 'info',
errorclass : 'displayError',
isActive : false,
haserror : true
},
components:{
'new_component' : {
template : '<div class = "info">Class Binding for component</div>'
}
}
});
</script>
</body>
</html>
以下是浏览器中的输出。它将这两个类都应用于最终的 div。
<div class = ”info active”></div>
在组件部分添加一个变量来显示，基于 true/false。
<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 v-bind:class = "{active:isActive}"></new_component>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#classbinding',
data: {
title : "This is class binding example",
infoclass : 'info',
errorclass : 'displayError',
isActive : false,
haserror : true
},
components:{
'new_component' : {
template : '<div class = "info">Class Binding for component</div>'
}
}
});
</script>
</body>
</html>
由于变量为 false，因此未应用 active 类，而是应用了 info 类，如下面的屏幕截图所示。
绑定内联样式
对象语法
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
title : "Inline style Binding",
activeColor: 'red',
fontSize :'30'
}
});
</script>
</body>
</html>
输出
在上面的示例中，对于 div，应用了样式，并从 data 对象中获取数据。
<div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
data: {
title : "Inline style Binding",
activeColor: 'red',
fontSize :'30'
}
我们也可以通过将所有值赋给一个变量，然后将该变量赋给 div 来做同样的事情。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-bind:style = "styleobj">{{title}}</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
title : "Inline style Binding",
styleobj : {
color: 'red',
fontSize :'40px'
}
}
});
</script>
</body>
</html>
颜色和 fontSize 被赋给名为 styleobj 的对象，并将该对象赋给 div。
<div v-bind:style = "styleobj">{{title}}</div>
输出
表单输入绑定
到目前为止，在我们创建的示例中，我们已经看到了 v-model 绑定输入文本元素并将值绑定到已分配的变量。让我们在本节中了解更多相关信息。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<h3>TEXTBOX</h3>
<input v-model = "name" placeholder = "Enter Name" />
<h3>Name entered is : {{name}}</h3>
<hr/>
<h3>Textarea</h3>
<textarea v-model = "textmessage" placeholder = "Add Details"></textarea>
<h1><p>{{textmessage}}</p></h1>
<hr/>
<h3>Checkbox</h3>
<input type = "checkbox" id = "checkbox" v-model = "checked"> {{checked}}
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
name:'',
textmessage:'',
checked : false
}
});
</script>
</body>
</html>
我们在文本框中输入的任何内容都将显示在下方。v-model 被赋值为 name，并且 name 显示在 {{name}} 中，它显示文本框中输入的任何内容。
输出
让我们查看更多示例以及如何使用它。
单选按钮和下拉列表
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<h3>Radio</h3>
<input type = "radio" id = "black" value = "Black" v-model = "picked">Black
<input type = "radio" id = "white" value = "White" v-model = "picked">White
<h3>Radio element clicked : {{picked}} </h3>
<hr/>
<h3>Select</h3>
<select v-model = "languages">
<option disabled value = "">Please select one</option>
<option>Java</option>
<option>Javascript</option>
<option>Php</option>
<option>C</option>
<option>C++</option>
</select>
<h3>Languages Selected is : {{ languages }}</h3>
<hr/>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
picked : 'White',
languages : "Java"
}
});
</script>
</body>
</html>
输出
修饰符
我们在示例中使用了三个修饰符——trim、number 和 lazy。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">
<br/>
<span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">
<h3>Display Message : {{msg}}</h3>
<br/>
<span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">
<h3>Display Message : {{message}}</h3>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
age : 0,
msg: '',
message : ''
}
});
</script>
</body>
</html>
输出
Number 修饰符只允许输入数字。它除了数字之外不会接受任何其他输入。
<span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">
Lazy 修饰符将在完全输入内容并且用户离开文本框后显示文本框中的内容。
<span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">
Trim 修饰符将删除开头和结尾处输入的任何空格。
<span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">
VueJS - 事件
v-on是添加到 DOM 元素上的属性，用于在 VueJS 中监听事件。
点击事件
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "displaynumbers">Click ME</button>
<h2> Add Number 100 + 200 = {{total}}</h2>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
num1: 100,
num2 : 200,
total : ''
},
methods : {
displaynumbers : function(event) {
console.log(event);
return this.total = this.num1+ this.num2;
}
},
});
</script>
</body>
</html>
输出
以下代码用于为 DOM 元素分配点击事件。
<button v-on:click = "displaynumbers">Click ME</button>
v-on 有一个简写，这意味着我们也可以如下调用事件：
<button @click = "displaynumbers">Click ME</button>
点击按钮时，它将调用方法“displaynumbers”，该方法接收事件，我们已经在浏览器中输出了该事件，如上所示。
我们现在将检查另一个事件 mouseover mouseout。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
num1: 100,
num2 : 200,
total : '',
styleobj : {
width:"100px",
height:"100px",
backgroundColor:"red"
}
},
methods : {
changebgcolor : function() {
this.styleobj.backgroundColor = "green";
},
originalcolor : function() {
this.styleobj.backgroundColor = "red";
}
},
});
</script>
</body>
</html>
在上面的示例中，我们创建了一个宽度和高度为 100px 的 div。它被赋予了红色背景颜色。在鼠标悬停时，我们将颜色更改为绿色，在鼠标移出时，我们将颜色改回红色。
因此，在鼠标悬停期间，将调用方法changebgcolor，一旦我们将鼠标移出 div，将调用方法originalcolor。
操作如下：
<div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
将两个事件——mouseover 和 mouseout——分配给 div，如上所示。我们创建了一个 styleobj 变量，并给出了要分配给 div 的所需样式。相同的变量使用 v-bind:style = ”styleobj” 绑定到 div。
在 changebgcolor 中，我们使用以下代码将颜色更改为绿色。
changebgcolor : function() {
this.styleobj.backgroundColor = "green";
}
使用 stylobj 变量，我们将颜色更改为绿色。
类似地，以下代码用于将其改回原色。
originalcolor : function() {
this.styleobj.backgroundColor = "red";
}
这就是我们在浏览器中看到的。
当我们鼠标悬停时，颜色将变为绿色，如下面的屏幕截图所示。
事件修饰符
Vue 提供了可在 v-on 属性上使用的事件修饰符。以下是可用的修饰符：
.once
允许事件只执行一次。
语法
<button v-on:click.once = "buttonclicked">Click Once</button>
我们在调用修饰符时需要添加点运算符，如上面的语法所示。让我们在一个例子中使用它并了解 once 修饰符的工作原理。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button>
Output:{{clicknum}}
<br/><br/>
<button v-on:click = "buttonclicked" v-bind:style = "styleobj">Click Me</button>
Output:{{clicknum1}}
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
clicknum : 0,
clicknum1 :0,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
buttonclickedonce : function() {
this.clicknum++;
},
buttonclicked : function() {
this.clicknum1++;
}
}
});
</script>
</body>
</html>
输出
在上面的示例中，我们创建了两个按钮。“单击一次”标签的按钮添加了 once 修饰符，另一个按钮没有任何修饰符。这就是按钮的定义方式。
<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Click Once</button> <button v-on:click = "buttonclicked" v-bind:style = "styleobj">Click Me</button>
第一个按钮调用方法“buttonclickedonce”，第二个按钮调用方法“buttonclicked”。
buttonclickedonce : function() {
this.clicknum++;
},
buttonclicked : function() {
this.clicknum1++;
}
在 clicknum 和 clicknum1 中定义了两个变量。当单击按钮时，这两个变量都会递增。这两个变量都初始化为 0，并且显示在上面的输出中。
单击第一个按钮时，变量 clicknum 递增 1。第二次单击时，数字不会递增，因为修饰符阻止它执行或执行单击按钮时分配的任何操作项。
单击第二个按钮时，将执行相同的操作，即变量递增。每次单击时，值都会递增并显示。
以下是我们在浏览器中获得的输出。
.prevent
语法
<a href = "http://www.google.com" v-on:click.prevent = "clickme">Click Me</a>
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<a href = "http://www.google.com" v-on:click = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
clicknum : 0,
clicknum1 :0,
styleobj: {
color: '#4CAF50',
marginLeft: '20px',
fontSize: '30px'
}
},
methods : {
clickme : function() {
alert("Anchor tag is clicked");
}
}
});
</script>
</body>
</html>
输出
如果我们单击 clickme 链接，它将发送一个警报“已单击锚标记”，并将在新标签页中打开链接https://www.google.com，如下面的屏幕截图所示。
现在，这以正常方式工作，即链接按我们想要的方式打开。如果我们不想打开链接，我们需要向事件添加一个修饰符“prevent”，如下面的代码所示。
<a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
添加后，如果我们单击按钮，它将发送一条警报消息，并且不会再打开链接。prevent 修饰符阻止链接打开，只执行分配给标签的方法。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<a href = "http://www.google.com" v-on:click.prevent = "clickme" target = "_blank" v-bind:style = "styleobj">Click Me</a>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
clicknum : 0,
clicknum1 :0,
styleobj: {
color: '#4CAF50',
marginLeft: '20px',
fontSize: '30px'
}
},
methods : {
clickme : function() {
alert("Anchor tag is clicked");
}
}
});
</script>
</body>
</html>
输出
单击链接时，它将显示警报消息，并且不再打开 url。
事件 - 键修饰符
VueJS 提供基于我们可以在其中控制事件处理的键修饰符。假设我们有一个文本框，我们希望仅在按 Enter 键时调用该方法。我们可以通过向事件添加键修饰符来做到这一点。
语法
<input type = "text" v-on:keyup.enter = "showinputvalue"/>
我们想要应用于事件的键是V-on.eventname.keyname（如上所示）
我们可以使用多个 keyname。例如，V-on.keyup.ctrl.enter
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue" v-bind:style = "styleobj" placeholder = "Enter your name"/>
<h3> {{name}}</h3>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
name:'',
styleobj: {
width: "30%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.name=event.target.value;
}
}
});
</script>
</body>
</html>
输出
在文本框中输入一些内容，我们只会在按下 Enter 键时看到它被显示。
自定义事件
父组件可以使用 prop 属性向其组件传递数据，但是，我们需要在子组件发生更改时告诉父组件。为此，我们可以使用自定义事件。
父组件可以使用v-on属性监听子组件事件。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div id = "counter-event-example">
<p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
<button-counter
v-for = "(item, index) in languages"
v-bind:item = "item"
v-bind:index = "index"
v-on:showlanguage = "languagedisp"></button-counter>
</div>
</div>
<script type = "text/javascript">
Vue.component('button-counter', {
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
data: function () {
return {
counter: 0
}
},
props:['item'],
methods: {
displayLanguage: function (lng) {
console.log(lng);
this.$emit('showlanguage', lng);
}
},
});
var vm = new Vue({
el: '#databinding',
data: {
languageclicked: "",
languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
},
methods: {
languagedisp: function (a) {
this.languageclicked = a;
}
}
})
</script>
</body>
</html>
输出
上面的代码显示了父组件和子组件之间的数据传输。
组件使用以下代码创建。
<button-counter v-for = "(item, index) in languages" v-bind:item = "item" v-bind:index = "index" v-on:showlanguage = "languagedisp"> </button-counter>
有一个v-for属性，它将循环遍历 languages 数组。该数组包含一个语言列表。我们需要将详细信息发送到子组件。数组的值存储在 item 和 index 中。
v-bind:item = "item" v-bind:index = "index"
要引用数组的值，我们需要先将其绑定到一个变量，然后使用 props 属性引用该变量，如下所示。
Vue.component('button-counter', {
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
data: function () {
return {
counter: 0
}
},
props:['item'],
methods: {
displayLanguage: function (lng) {
console.log(lng);
this.$emit('showlanguage', lng);
}
},
});
props 属性以数组形式包含 item。我们也可以参考索引，如下所示：
props:[‘item’, ‘index’]
还在组件中添加了一个事件，如下所示：
<button-counter v-for = "(item, index) in languages" v-bind:item = "item" v-bind:index = "index" v-on:showlanguage = "languagedisp"> </button-counter>
事件的名称是showlanguage，它调用一个名为languagedisp的方法，该方法在 Vue 实例中定义。
在组件中，模板定义如下：
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
创建了一个按钮。将根据语言数组中的计数创建尽可能多的按钮。单击按钮时，将调用一个名为 displayLanguage 的方法，并将单击的按钮项作为参数传递给该函数。现在，组件需要将单击的元素发送到父组件以进行显示，操作如下：
Vue.component('button-counter', {
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
data: function () {
return {
counter: 0
}
},
props:['item'],
methods: {
displayLanguage: function (lng) {
console.log(lng);
this.$emit('showlanguage', lng);
}
},
});
方法displayLanguage调用this.$emit(‘showlanguage’, lng);
$emit用于调用父组件方法。showlanguage 方法是在带有 v-on 的组件上给出的事件名称。
<button-counter v-for = "(item, index) in languages" v-bind:item = "item" v-bind:index = "index" v-on:showlanguage = "languagedisp"> </button-counter>
我们正在传递一个参数，即单击的语言名称到主父 Vue 实例的方法，该方法定义如下。
var vm = new Vue({
el: '#databinding',
data: {
languageclicked: "",
languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
},
methods: {
languagedisp: function (a) {
this.languageclicked = a;
}
}
})
在这里，emit 触发 showlanguage，这反过来又从 Vue 实例方法调用languagedisp。它将单击的语言值分配给变量languageclicked，并在浏览器中显示，如下面的屏幕截图所示。
<p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
以下是我们在浏览器中获得的输出。
VueJS - 渲染
在本章中，我们将学习条件渲染和列表渲染。在条件渲染中，我们将讨论使用 if、if-else、if-else-if、show 等。在列表渲染中，我们将讨论如何使用 for 循环。
条件渲染
让我们开始并首先做一个示例来解释条件渲染的细节。通过条件渲染，我们只想在满足条件时输出，并且条件检查是在 if、if-else、if-else-if、show 等的帮助下完成的。
v-if
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<span style = "font-size:25px;"><b>{{show}}</b></span>
<h1 v-if = "show">This is h1 tag</h1>
<h2>This is h2 tag</h2>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
showdata : function() {
this.show = !this.show;
}
},
});
</script>
</body>
</html>
输出
在上面的示例中，我们创建了一个按钮和两个带有消息的 h1 标签。
声明一个名为 show 的变量并将其初始化为 true 值。它显示在按钮附近。单击按钮时，我们调用一个方法showdata，该方法切换变量 show 的值。这意味着单击按钮时，变量 show 的值将从 true 变为 false，从 false 变为 true。
我们将 if 分配给 h1 标签，如下面的代码片段所示。
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button> <h1 v-if = "show">This is h1 tag</h1>
现在它将做什么，它将检查变量 show 的值，如果为 true，则将显示 h1 标签。单击按钮并在浏览器中查看，由于变量 show 的值更改为 false，因此 h1 标签不会在浏览器中显示。只有当 show 变量为 true 时才会显示。
以下是浏览器中的显示。
如果我们在浏览器中检查，这就是当 show 为 false 时我们得到的结果。
当变量 show 设置为 false 时，h1 标签将从 DOM 中移除。
这就是当变量为 true 时我们看到的。当变量 show 设置为 true 时，h1 标签将被添加回 DOM。
v-else
在下面的示例中，我们在第二个 h1 标签中添加了 v-else。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<span style = "font-size:25px;"><b>{{show}}</b></span>
<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
showdata : function() {
this.show = !this.show;
}
},
});
</script>
</body>
</html>
v-else 使用以下代码片段添加。
<h1 v-if = "show">This is h1 tag</h1> <h2 v-else>This is h2 tag</h2>
现在，如果 show 为 true，将显示“这是 h1 标签”，如果为 false，则将显示“这是 h2 标签”。这就是我们在浏览器中将获得的结果。
上面的显示是当 show 变量为 true 时。由于我们添加了 v-else，因此第二个语句不存在。现在，当我们单击按钮时，show 变量将变为 false，并且将显示第二个语句，如下面的屏幕截图所示。
v-show
v-show 的行为与 v-if 相同。它还会根据分配给它的条件显示和隐藏元素。v-if 和 v-show 之间的区别在于，如果条件为 false，v-if 会从 DOM 中删除 HTML 元素，如果条件为 true，则会将其添加回来。而 v-show 使用 display:none 隐藏元素，如果条件为 false。如果条件为 true，它将显示元素。因此，该元素始终存在于 dom 中。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<span style = "font-size:25px;"><b>{{show}}</b></span>
<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>
<div v-show = "show">
<b>V-Show:</b>
<img src = "images/img.jpg" width = "100" height = "100" />
</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
showdata : function() {
this.show = !this.show;
}
},
});
</script>
</body>
</html>
v-show 使用以下代码片段分配给 HTML 元素。
<div v-show = "show"><b>V-Show:</b><img src = "images/img.jpg" width = "100" height = "100" /></div>
我们使用了相同的变量 show，并根据其真/假值来决定图像是否显示在浏览器中。
现在，由于变量 show 为真，图像如上图所示。让我们点击按钮并查看显示效果。
变量 show 为假，因此图像隐藏。如果我们检查并查看元素，则 div 以及图像仍然是 DOM 的一部分，其样式属性为 display: none，如上图所示。
列表渲染
v-for
现在让我们讨论使用 v-for 指令进行列表渲染。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue"
v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
<h1 v-if = "items.length>0">Display Fruits Name</h1>
<ul>
<li v-for = "a in items">{{a}}</li>
</ul>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
items:[],
styleobj: {
width: "30%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.items.push(event.target.value);
}
},
});
</script>
</body>
</html>
一个名为 items 的变量被声明为一个数组。在 methods 中，有一个名为 **showinputvalue** 的方法，该方法被分配给输入框，用于接收水果的名称。在该方法中，使用以下代码片段将输入文本框中输入的水果添加到数组中。
showinputvalue : function(event) {
this.items.push(event.target.value);
}
我们使用了 v-for 来显示输入的水果，如下面的代码片段所示。V-for 帮助迭代数组中存在的数值。
<ul>
<li v-for = "a in items">{{a}}</li>
</ul>
要使用 for 循环迭代数组，我们必须使用 v-for = ”a in items”，其中 a 保存数组中的值，并将显示所有项目完成。
输出
以下是浏览器中的输出。
检查 items 后，浏览器中显示的内容如下。在 DOM 中，我们没有看到任何应用于 li 元素的 v-for 指令。它显示了没有任何 VueJS 指令的 DOM。
如果我们希望显示数组的索引，则可以使用以下代码。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue"
v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
<h1 v-if = "items.length>0">Display Fruits Name</h1>
<ul>
<li v-for = "(a, index) in items">{{index}}--{{a}}</li>
</ul>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
items:[],
styleobj: {
width: "30%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.items.push(event.target.value);
}
},
});
</script>
</body>
</html>
为了获取索引，我们在括号中添加了另一个变量，如下面的代码片段所示。
<li v-for = "(a, index) in items">{{index}}--{{a}}</li>
在 (a, index) 中，**a** 是值，**index** 是键。浏览器的显示效果将如以下屏幕截图所示。因此，借助索引，可以显示任何特定值。
VueJS - 过渡和动画
本章将讨论 VueJS 中可用的过渡和动画功能。
过渡
VueJS 提供了多种方法来将过渡应用于 HTML 元素，当它们添加到 DOM 或在 DOM 中更新时。VueJS 有一个内置的过渡组件，需要将其包装在需要过渡的元素周围。
语法
<transition name = "nameoftransition"> <div></div> </transition>
让我们考虑一个例子来理解过渡的工作原理。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 2s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0
}
</style>
<div id = "databinding">
<button v-on:click = "show = !show">Click Me</button>
<transition name = "fade">
<p v-show = "show" v-bind:style = "styleobj">Animation Example</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true,
styleobj :{
fontSize:'30px',
color:'red'
}
},
methods : {
}
});
</script>
</body>
</html>
有一个名为 clickme 的按钮，我们可以使用它将变量 show 的值更改为真或假，反之亦然。有一个 **p 标签**，只有当变量为真时才显示文本元素。我们已将 p 标签用过渡元素包装，如下面的代码片段所示。
<transition name = "fade"> <p v-show = "show" v-bind:style = "styleobj">Animation Example</p> </transition>
过渡的名称是 **fade**。VueJS 提供了一些标准的过渡类，这些类的名称以过渡名称为前缀。
以下是过渡的一些标准类：
**v-enter** - 此类最初在元素更新/添加之前调用。这是起始状态。
**v-enter-active** - 此类用于定义进入过渡阶段的延迟、持续时间和缓动曲线。这是整个阶段的活动状态，并且在整个进入阶段都可用。
**v-leave** - 离开过渡触发时添加，移除。
**v-leave-active** - 在离开阶段应用。过渡完成后将其移除。此类用于在离开阶段应用延迟、持续时间和缓动曲线。
每个类都将以过渡名称为前缀。我们已将过渡名称指定为 fade，因此类的名称变为 **.fade_enter, .fade_enter_active, .fade_leave, .fade_leave_active**。
它们在以下代码中定义。
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 2s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0
}
</style>
`.fade_enter_active` 和 `.fade_leave_active` 是在一起定义的，它在开始和离开阶段应用过渡。不透明度属性在 2 秒内更改为 0。
持续时间在 `.fade_enter_active` 和 `.fade_leave_active` 中定义。最终阶段在 `.fade_enter`，`.fade_leave_to` 中定义。
浏览器中的显示如下。
单击按钮后，文本将在两秒钟内淡出。
两秒钟后，文本将完全消失。
让我们考虑另一个示例，其中有一个图像，单击按钮时会在 x 轴上移动。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.shiftx-enter-active, .shiftx-leave-active {
transition: all 2s ease-in-out;
}
.shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
transform : translateX(100px);
}
</style>
<div id = "databinding">
<button v-on:click = "show = !show">Click Me</button>
<transition name = "shiftx">
<p v-show = "show">
<img src = "images/img.jpg" style = "width:100px;height:100px;" />
</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true
},
methods : {
}
});
</script>
</body>
</html>
过渡的名称是 **shiftx**。使用变换属性，使用以下代码片段在 x 轴上将图像移动 100 像素。
<style>
.shiftx-enter-active, .shiftx-leave-active {
transition: all 2s ease-in-out;
}
.shiftx-enter, .shiftx-leave-to /* .fade-leave-active below version 2.1.8 */ {
transform : translateX(100px);
}
</style>
以下是输出。
单击按钮后，图像将向右移动 100 像素，如下面的屏幕截图所示。
动画
动画的应用方式与过渡相同。动画也有一些类需要声明才能生效。
让我们考虑一个例子来看看动画是如何工作的。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
.shiftx-enter-active {
animation: shift-in 2s;
}
.shiftx-leave-active {
animation: shift-in 2s reverse;
}
@keyframes shift-in {
0% {transform:rotateX(0deg);}
25% {transform:rotateX(90deg);}
50% {transform:rotateX(120deg);}
75% {transform:rotateX(180deg);}
100% {transform:rotateX(360deg);}
}
</style>
<div id = "databinding">
<button v-on:click = "show = !show">Click Me</button>
<transition name = "shiftx">
<p v-show = "show">
<img src = "images/img.jpg" style = "width:100px;height:100px;" />
</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true
},
methods : {
}
});
</script>
</body>
</html>
要应用动画，可以使用与过渡相同的类。在上面的代码中，我们有一个用 p 标签包围的图像，如下面的代码片段所示。
<transition name = "shiftx"> <p v-show = "show"><img src = "images/img.jpg" style = "width:100px;height:100px;" /></p> </transition>
过渡的名称是 **shiftx**。应用的类如下：
<style>
.shiftx-enter-active {
animation: shift-in 2s;
}
.shiftx-leave-active {
animation: shift-in 2s reverse;
}
@keyframes shift-in {
0% {transform:rotateX(0deg);}
25% {transform:rotateX(90deg);}
50% {transform:rotateX(120deg);}
75% {transform:rotateX(180deg);}
100% {transform:rotateX(360deg);}
}
</style>
该类以过渡名称为前缀，即 `shiftx-enter-active` 和 `.shiftx-leave-active`。动画使用关键帧从 0% 到 100% 定义。在每个关键帧中都定义了一个变换，如下面的代码片段所示。
@keyframes shift-in {
0% {transform:rotateX(0deg);}
25% {transform:rotateX(90deg);}
50% {transform:rotateX(120deg);}
75% {transform:rotateX(180deg);}
100% {transform:rotateX(360deg);}
}
以下是输出。
单击按钮后，它会从 0 旋转到 360 度然后消失。
自定义过渡类
VueJS 提供了一系列自定义类，可以将其作为属性添加到过渡元素。
- enter-class
- enter-active-class
- leave-class
- leave-active-class
当我们想要使用外部 CSS 库（例如 animate.css）时，自定义类基本上就会发挥作用。
示例
<html>
<head>
<link href = "https://cdn.jsdelivr.net.cn/npm/[email protected]" rel = "stylesheet" type = "text/css">
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "animate" style = "text-align:center">
<button @click = "show = !show"><span style = "font-size:25px;">Animate</span></button>
<transition
name = "custom-classes-transition"
enter-active-class = "animated swing"
leave-active-class = "animated bounceIn">
<p v-if = "show"><span style = "font-size:25px;">Example</span></p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#animate',
data: {
show: true
}
});
</script>
</body>
</html>
输出
输出
输出
上面的代码中应用了两个动画。一个是 `enter-active-class = “animated swing”`，另一个是 `leave-active-class = ”animated bounceIn"`。我们正在使用自定义动画类来应用来自第三方库的动画。
显式过渡持续时间
我们可以使用 VueJS 在元素上应用过渡和动画。Vue 等待 `transionend` 和 `animationend` 事件来检测动画或过渡是否完成。
有时过渡可能会导致延迟。在这种情况下，我们可以显式地应用持续时间，如下所示。
<transition :duration = "1000"></transition>
<transition :duration = "{ enter: 500, leave: 800 }">...</transition>
我们可以使用 `duration` 属性和 `:` 在过渡元素上，如上所示。如果需要分别为进入和离开指定持续时间，可以按照上面的代码片段所示进行操作。
JavaScript 钩子
可以使用 JavaScript 事件将过渡类调用为方法。让我们考虑一个示例以更好地理解。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<div id = "example-4">
<button @click = "show = !show">
<span style = "font-size:25px;">Toggle</span>
</button>
<transition v-on:before-enter = "beforeEnter"
v-on:enter = "enter"
v-on:leave = "leave"
v-bind:css = "false">
<p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#example-4',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
Velocity(el, { fontSize: '10px' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
});
</script>
</body>
</html>
输出
在上面的示例中，我们正在使用过渡元素上的 js 方法执行动画。
过渡上的方法应用如下：
<transition v-on:before-enter = "beforeEnter" v-on:enter = "enter" v-on:leave = "leave" v-bind:css = "false"> <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p> </transition>
添加了一个前缀 **v-on** 和方法调用的事件名称。这些方法在 Vue 实例中定义如下：
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '25px' }, { duration: 1000 })
Velocity(el, { fontSize: '10px' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 1500 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
在每个方法中都应用了所需的过渡。单击按钮时以及动画完成时都应用了不透明度动画。第三方库用于动画。
在过渡上添加了一个属性 `v-bind:css = "false"`，这是为了让 Vue 理解这是一个 JavaScript 过渡。
初始渲染时的过渡
为了在开始时添加动画，我们需要将 `appear` 属性添加到过渡元素。
让我们来看一个例子来更好地理解它。
示例
<html>
<head>
<link href = "https://cdn.jsdelivr.net.cn/npm/[email protected]" rel = "stylesheet" type = "text/css">
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "animate" style = "text-align:center">
<transition
appear
appear-class = "custom-appear-class"
appear-active-class = "animated bounceIn">
<h1>BounceIn - Animation Example</h1>
</transition>
<transition
appear
appear-class = "custom-appear-class"
appear-active-class = "animated swing">
<h1>Swing - Animation Example</h1>
</transition>
<transition
appear
appear-class = "custom-appear-class"
appear-active-class = "animated rubberBand">
<h1>RubberBand - Animation Example</h1>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#animate',
data: {
show: true
}
});
</script>
</body>
</html>
在上面的示例中，我们使用了来自 animate.css 库的三个不同的动画。我们将 `appear` 添加到过渡元素。
执行上述代码后，浏览器中的输出将如下所示。
组件上的动画
我们可以使用以下代码包装组件的过渡。我们在这里使用了动态组件。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
<link href = "https://cdn.jsdelivr.net.cn/npm/[email protected]" rel = "stylesheet" type = "text/css">
</head>
<body>
<div id = "databinding" style = "text-align:center;">
<transition appear
appear-class = "custom-appear-class"
appear-active-class = "animated wobble">
<component v-bind:is = "view"></component>
</transition>
</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;">Animation on Components</span></div>'
}
}
});
</script>
</body>
</html>
输出
VueJS - 指令
指令是 VueJS 的指令，用于以某种方式执行操作。我们已经看到了诸如 v-if、v-show、v-else、v-for、v-bind、v-model、v-on 等指令。
在本章中，我们将了解自定义指令。我们将创建全局指令，类似于我们对组件所做的操作。
语法
Vue.directive('nameofthedirective', {
bind(e1, binding, vnode) {
}
})
我们需要使用 `Vue.directive` 创建一个指令。它接受指令的名称，如上所示。让我们考虑一个例子来展示指令工作原理的细节。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-changestyle>VueJS Directive</div>
</div>
<script type = "text/javascript">
Vue.directive("changestyle",{
bind(e1,binding, vnode) {
console.log(e1);
e1.style.color = "red";
e1.style.fontSize = "30px";
}
});
var vm = new Vue({
el: '#databinding',
data: {
},
methods : {
},
});
</script>
</body>
</html>
在这个例子中，我们创建了一个自定义指令 **changestyle**，如下面的代码片段所示。
Vue.directive("changestyle",{
bind(e1,binding, vnode) {
console.log(e1);
e1.style.color = "red";
e1.style.fontSize = "30px";
}
});
我们将以下 changestyle 分配给一个 div。
<div v-changestyle>VueJS Directive</div>
如果我们在浏览器中查看，它将以红色显示文本 VueJs 指令，并且字体大小增加到 30 像素。
输出
我们使用了 bind 方法，它是指令的一部分。它接受三个参数 **el**，需要应用自定义指令的元素。绑定就像传递给自定义指令的参数一样，例如 `v-changestyle = ”{color:’green’}”`，其中 green 将在绑定参数中读取，vnode 是元素，即节点名。
在下一个示例中，我们输出了所有参数，它显示了每个参数提供的详细信息。
以下是一个将值传递给自定义指令的示例。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-changestyle = "{color:'green'}">VueJS Directive</div>
</div>
<script type = "text/javascript">
Vue.directive("changestyle",{
bind(e1,binding, vnode) {
console.log(e1);
console.log(binding.value.color);
console.log(vnode);
e1.style.color=binding.value.color;
e1.style.fontSize = "30px";
}
});
var vm = new Vue({
el: '#databinding',
data: {
},
methods : {
},
});
</script>
</body>
</html>
输出
文本的颜色更改为绿色。值使用以下代码片段传递。
<div v-changestyle = "{color:'green'}">VueJS Directive</div>
And it is accessed using the following piece of code.
Vue.directive("changestyle",{
bind(e1,binding, vnode) {
console.log(e1);
console.log(binding.value.color);
console.log(vnode);
e1.style.color=binding.value.color;
e1.style.fontSize = "30px";
}
});
过滤器
VueJS 支持有助于文本格式化的过滤器。它与 v-bind 和插值 ({{}}) 一起使用。我们需要在 JavaScript 表达式的末尾使用管道符号 | 来使用过滤器。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input v-model = "name" placeholder = "Enter Name" /><br/>
<span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
name : ""
},
filters : {
countletters : function(value) {
return value.length;
}
}
});
</script>
</body>
</html>
在上面的示例中，我们创建了一个简单的过滤器 countletters。Countletters 过滤器计算文本框中输入的字符数。为了使用过滤器，我们需要使用 filter 属性并定义使用的过滤器，如下面的代码片段所示。
filters : {
countletters : function(value) {
return value.length;
}
}
我们正在定义方法 **countletters** 并返回输入字符串的长度。
为了在显示中使用过滤器，我们使用了管道运算符和过滤器的名称，即countletters。
<span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>
以下是浏览器中的显示。
我们也可以使用以下代码片段向过滤器传递参数。
<span style = "font-size:25px;"><b>Letter count is : {{name | countletters('a1', 'a2')}}</b></span>
现在，countletters 将有三个参数，即 message、a1 和 a2。
我们还可以使用以下代码片段向插值传递多个过滤器。
<span style = "font-size:25px;"><b>Letter count is : {{name | countlettersA, countlettersB}}</b></span>
在过滤器属性中，countlettersA 和 countlettersB 将是两个方法，而 countlettersA 将把详细信息传递给 countlettersB。
VueJS - 路由
VueJS 没有内置的路由器功能。我们需要遵循一些额外的步骤来安装它。
从 CDN 直接下载
最新版本的 vue-router 可在 https://unpkg.com/vue-router/dist/vue-router.js 获取
Unpkg.com 提供基于 npm 的 cdn 链接。上述链接始终更新为最新版本。我们可以下载并托管它，并像下面这样使用 script 标签以及 vue.js：
<script src = "/path/to/vue.js"></script> <script src = "/path/to/vue-router.js"></script>
使用NPM
运行以下命令来安装 vue-router。
npm install vue-router
使用 GitHub
我们可以按照如下方式从 GitHub 克隆存储库：
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router cd node_modules/vue-router npm install npm run build
让我们从一个使用 vue-router.js 的简单示例开始。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>
</head>
<body>
<div id = "app">
<h1>Routing Example</h1>
<p>
<router-link to = "/route1">Router Link 1</router-link>
<router-link to = "/route2">Router Link 2</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
<script type = "text/javascript">
const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
const routes = [
{ path: '/route1', component: Route1 },
{ path: '/route2', component: Route2 }
];
const router = new VueRouter({
routes // short for `routes: routes`
});
var vm = new Vue({
el: '#app',
router
});
</script>
</body>
</html>
输出
要开始路由，我们需要添加 vue-router.js 文件。从 https://unpkg.com/vue-router/dist/vue-router.js 获取代码并将其保存到文件 vue-router.js 中。
该脚本在 vue.js 之后添加，如下所示：
<script type = "text/javascript" src = "js/vue.js"></script> <script type = "text/javascript" src = "js/vue-router.js"></script>
在 body 部分，定义了一个路由链接，如下所示：
<p> <router-link to = "/route1">Router Link 1</router-link> <router-link to = "/route2">Router Link 2</router-link> </p>
<router-link> 是一个组件，用于导航到要显示给用户的 HTML 内容。to 属性是目标，即选择要显示内容的源文件。
在上面的代码片段中，我们创建了两个路由链接。
看一下脚本部分，其中初始化了路由器。创建了两个常量，如下所示：
const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
它们具有模板，当单击路由链接时需要显示这些模板。
接下来是 routes 常量，它定义了要在 URL 中显示的路径。
const routes = [
{ path: '/route1', component: Route1 },
{ path: '/route2', component: Route2 }
];
Routes 定义路径和组件。当用户单击路由链接时，路径（即/route1）将显示在 URL 中。
Component 获取要显示的模板名称。routes 中的路径需要与路由链接的 to 属性匹配。
例如，<router-link to = ”path here”></router-link>
接下来，使用以下代码片段创建 VueRouter 实例。
const router = new VueRouter({
routes // short for `routes: routes`
});
VueRouter 构造函数将 routes 作为参数。路由对象使用以下代码片段分配给主 vue 实例：
var vm = new Vue({
el: '#app',
router
});
执行示例并在浏览器中查看显示。在检查和检查路由链接时，我们会发现它会向活动元素添加类，如下面的屏幕截图所示。
添加的类是class = “router-link-exact-active router-link-active”。活动链接获得如上图所示的类。需要注意的另一件事是，<router-link> 呈现为一个 a 标签。
路由链接的属性
让我们看看要传递给<router-link> 的更多属性。
to
这是给定给 <router-link> 的目标路径。单击后，to 的值将内部传递给 router.push()。该值需要是字符串或位置对象。使用对象时，我们需要像示例 2 中那样绑定它。
e.g. 1: <router-link to = "/route1">Router Link 1</router-link>
renders as
<a href = ”#/route”>Router Link </a>
e.g. 2: <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
e.g. 3: <router-link v-bind:to =
"{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>//router link with query string.
以下是示例 3 的输出。
在 URL 路径中，name = Tery 是查询字符串的一部分。例如：https://127.0.0.1/vueexamples/vue_router.html#/route1?name = Tery
replace
向路由链接添加 replace 将调用 router.replace() 而不是 router.push()。使用 replace，不会存储导航历史记录。
示例
<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}" replace>Router Link 1</router-link>
append
向 <router-link><router-link> 添加 append 将使路径相对。
如果我们想从路径为 /route1 的路由链接跳转到路径为 /route2 的路由链接，它将在浏览器中显示路径 /route1/route2。
示例
<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>
tag
目前 <router-link> 呈现为 a 标签。如果我们想将其呈现为其他标签，我们需要使用 tag = ”tagname” 指定。
示例
<p>
<router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>
我们已将标签指定为 span，这就是在浏览器中显示的内容。
现在显示的标签是 span 标签。当我们单击路由链接进行导航时，我们仍然会看到点击跳转。
active-class
默认情况下，当路由链接处于活动状态时添加的活动类是 router-link-active。我们可以通过设置相同的类来覆盖它，如下面的代码所示。
<style>
._active{
background-color : red;
}
</style>
<p>
<router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>
使用的类是 active_class = ”_active”。这是在浏览器中显示的输出。
exact-active-class
应用的默认 exactactive 类是 router-link-exact-active。我们可以使用 exact-active-class 来覆盖它。
示例
<p>
<router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
<router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>
这就是在浏览器中显示的内容。
event
目前，router-link 的默认事件是 click 事件。我们可以使用 event 属性更改它。
示例
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>
现在，当我们鼠标悬停在路由链接上时，它将进行导航，如下面的浏览器所示。将鼠标悬停在路由链接 1 上，我们将看到导航发生变化。
VueJS - 混入 (Mixins)
Mixin 主要用于组件。它们在组件之间共享可重用的代码。当组件使用 mixin 时，mixin 的所有选项都成为组件选项的一部分。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding"></div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
},
methods : {
},
});
var myMixin = {
created: function () {
this.startmixin()
},
methods: {
startmixin: function () {
alert("Welcome to mixin example");
}
}
};
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component();
</script>
</body>
</html>
输出
当 mixin 和组件包含重叠的选项时，它们将合并，如下面的示例所示。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding"></div>
<script type = "text/javascript">
var mixin = {
created: function () {
console.log('mixin called')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('component called')
}
});
</script>
</body>
</html>
现在 mixin 和 vue 实例具有相同的方法 created。这是我们在控制台中看到的输出。如您所见，vue 和 mixin 的选项将合并。
如果我们在 methods 中碰巧具有相同的函数名称，则主 vue 实例将具有优先级。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding"></div>
<script type = "text/javascript">
var mixin = {
methods: {
hellworld: function () {
console.log('In HelloWorld');
},
samemethod: function () {
console.log('Mixin:Same Method');
}
}
};
var vm = new Vue({
mixins: [mixin],
methods: {
start: function () {
console.log('start method');
},
samemethod: function () {
console.log('Main: same method');
}
}
});
vm.hellworld();
vm.start();
vm.samemethod();
</script>
</body>
</html>
我们将看到 mixin 具有一个 methods 属性，其中定义了 helloworld 和 samemethod 函数。同样，vue 实例具有一个 methods 属性，其中再次定义了两个方法 start 和 samemethod。
调用每个以下方法。
vm.hellworld(); // In HelloWorld vm.start(); // start method vm.samemethod(); // Main: same method
如上所示，我们调用了 helloworld、start 和 samemethod 函数。samemethod 也存在于 mixin 中，但是，将优先考虑主实例，如下面的控制台所示。
VueJS - 渲染函数
我们已经看到了组件及其用法。例如，我们有一些需要在整个项目中重用的内容。我们可以将其转换为组件并使用它。
让我们来看一个简单组件的示例，并了解其 render 函数需要做什么。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
template : '<h1>Hello World</h1>',
data: function() {
},
methods:{
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>
考虑上面打印“Hello World”的简单组件示例，如下面的屏幕截图所示。
现在，如果我们想重用该组件，我们可以通过再次打印它来实现。例如，
<div id = "component_test"> <testcomponent></testcomponent> <testcomponent></testcomponent> <testcomponent></testcomponent> <testcomponent></testcomponent> </div>
输出将如下所示。
但是，现在我们需要对组件进行一些更改。我们不想打印相同的文本。我们该如何更改它？如果我们在组件内部键入一些内容，它是否会被考虑？
让我们考虑下面的示例，看看会发生什么。
<div id = "component_test"> <testcomponent>Hello Jai</testcomponent> <testcomponent>Hello Roy</testcomponent> <testcomponent>Hello Ria</testcomponent> <testcomponent>Hello Ben</testcomponent> </div>
输出与我们之前看到的一样。它不会像我们想要的那样更改文本。
组件确实提供了一些称为插槽 (slots) 的东西。让我们使用它，看看是否能得到想要的结果。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent>Hello Jai</testcomponent>
<testcomponent>Hello Roy</testcomponent>
<testcomponent>Hello Ria</testcomponent>
<testcomponent>Hello Ben</testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
template : '<h1><slot></slot></h1>',
data: function() {
},
methods:{
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>
如上面的代码所示，我们在模板中添加了插槽，因此它现在采用要发送到组件中的值，如下面的屏幕截图所示。
现在，让我们考虑一下我们想要更改颜色和大小。例如，目前我们使用的是 h1 标签，我们想将同一个组件的 HTML 标签更改为 p 标签或 div 标签。我们如何才能灵活地进行如此多的更改？
我们可以通过 render 函数来实现。render 函数有助于使组件动态化，并通过保持通用性和帮助使用同一个组件传递参数来使用它。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
<testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent>
<testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent>
<testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
render :function(createElement){
var a = this.elementtype.split(",");
return createElement(a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
},
props:{
elementtype:{
attributes:String,
required:true
}
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>
在上面的代码中，我们更改了组件并使用以下代码片段添加了带有 props 属性的 render 函数。
Vue.component('testcomponent',{
render :function(createElement){
var a = this.elementtype.split(",");
return createElement(a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
},
props:{
elementtype:{
attributes:String,
required:true
}
}
});
props 看起来像这样。
props:{
elementtype:{
attributes:String,
required:true
}
}
我们定义了一个名为 elementtype 的属性，它采用字符串类型的属性字段。另一个必需字段，它提到该字段是必需的。
在 render 函数中，我们使用了 elementtype 属性，如下面的代码片段所示。
render :function(createElement){
var a = this.elementtype.split(",");
return createElement(a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
}
render 函数采用 createElement 作为参数并返回相同的参数。createElement 创建 DOM 元素的方式与 JavaScript 中相同。我们还使用 attrs 字段中的值以逗号分隔 elementtype。
createElement 将第一个参数作为要创建的 elementtag。它使用以下代码片段传递给组件。
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
组件需要采用 props 字段，如上所示。它以 : 开头，后面是 props 的名称。在这里，我们传递元素标签、颜色、字体大小和元素的 id。
在 render 函数中，在 createElement 中，我们以逗号分隔，因此第一个元素是 elementtag，它被传递给 createElemet，如下面的代码片段所示。
return createElement(
a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
a[0] 是 html 元素标签。下一个参数是元素标签的属性。它们在以下代码片段的 attr 字段中定义。
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
我们为元素标签定义了两个属性 - id 和 style。对于 id，我们传递 a[3]，这是我们在以逗号分隔后得到的值。使用 style，我们定义了颜色和字体大小。
最后一个是插槽，即我们在以下代码片段的组件中给出的消息。
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
我们使用以下代码片段在 createElement 中定义了要打印的文本。
this.$slots.default
它采用组件字段中分配的默认值。
以下是我们在浏览器中获得的输出。
这些元素也显示了结构。这些是我们定义的组件：
<div id = "component_test"> <testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent> <testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent> <testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent> <testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent> </div>
VueJS - 响应式接口
VueJS 提供了选项，可以为动态添加的属性添加反应性。假设我们已经创建了 vue 实例，并且需要添加 watch 属性。可以按如下方式完成：
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
setTimeout(
function(){
vm.counter = 20;
},2000
);
</script>
</body>
</html>
在 data 对象中定义了一个属性 counter 为 1。当我们单击按钮时，counter 会递增。
Vue 实例已创建。要向其中添加 watch，我们需要按如下方式进行：
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
我们需要使用 $watch 在 vue 实例之外添加 watch。添加了一个 alert，它显示 counter 属性的值变化。还添加了一个 timer 函数，即 setTimeout，它将 counter 值设置为 20。
setTimeout(
function(){
vm.counter = 20;
},2000
);
每当 counter 更改时，watch 方法中的 alert 将被触发，如下面的屏幕截图所示。
VueJS 无法检测属性的添加和删除。最好的方法是在 Vue 实例中预先声明需要反应性的属性。如果我们需要在运行时添加属性，我们可以使用 Vue 全局方法 Vue.set 和 Vue.delete。
Vue.set
此方法有助于在对象上设置属性。它用于解决 Vue 无法检测属性添加的限制。
语法
Vue.set( target, key, value )
其中，
target：可以是对象或数组
key：可以是字符串或数字
value：可以是任何类型
让我们来看一个例子。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
vm.products.qty = "1";
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>
在上面的示例中，一开始使用以下代码片段创建了一个变量 myproduct。
var myproduct = {"id":1, name:"book", "price":"20.00"};
它按如下方式赋给 Vue 实例中的 data 对象：
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
假设我们想在创建 Vue 实例后向 myproduct 数组添加另一个属性。可以按如下方式完成：
vm.products.qty = "1";
让我们在控制台中查看输出。
如上所示，在 products 中添加了数量。get/set 方法（基本上添加了反应性）可用于 id、name 和 price，而不可用于 qty。
我们不能仅通过添加 vue 对象来实现反应性。VueJS 大多希望其所有属性在一开始就创建。但是，如果我们需要稍后添加它，我们可以使用 Vue.set。为此，我们需要使用 vue 全局方法，即 Vue.set。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
Vue.set(myproduct, 'qty', 1);
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>
我们使用 Vue.set 通过以下代码片段将 qty 添加到数组中。
Vue.set(myproduct, 'qty', 1);
我们已在控制台中打印 Vue 对象，以下是输出结果。
现在，我们可以看到使用 Vue.set 添加的 qty 的 get/set 方法。
Vue.delete
此函数用于动态删除属性。
示例
Vue.delete( target, key )
其中，
target：可以是对象或数组
键：可以是字符串或数字
要删除任何属性，我们可以使用 Vue.delete，如下面的代码所示。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">Counter: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Me</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
el: '#app',
data: {
counter: 1,
products: myproduct
}
});
Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
</script>
</body>
</html>
在上面的示例中，我们使用 Vue.delete 通过以下代码片段从数组中删除 price。
Vue.delete(myproduct, 'price');
以下是我们在控制台中看到的输出。
删除后，我们只能看到 id 和 name，因为 price 已被删除。我们还可以注意到 get/set 方法也被删除了。
VueJS - 例子
示例 1：货币转换器
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
#databinding{
padding: 20px 15px 15px 15px;
margin: 0 0 25px 0;
width: auto;
background-color: #e7e7e7;
}
span, option, input {
font-size:25px;
}
</style>
<div id = "databinding" style = "">
<h1>Currency Converter</h1>
<span>Enter Amount:</span><input type = "number" v-model.number = "amount" placeholder = "Enter Amount" /><br/><br/>
<span>Convert From:</span>
<select v-model = "convertfrom" style = "width:300px;font-size:25px;">
<option v-for = "(a, index) in currencyfrom" v-bind:value = "a.name">{{a.desc}}</option>
</select>
<span>Convert To:</span>
<select v-model = "convertto" style = "width:300px;font-size:25px;">
<option v-for = "(a, index) in currencyfrom" v-bind:value = "a.name">{{a.desc}}</option>
</select><br/><br/>
<span> {{amount}} {{convertfrom}} equals {{finalamount}} {{convertto}}</span>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
name:'',
currencyfrom : [
{name : "USD", desc:"US Dollar"},
{name:"EUR", desc:"Euro"},
{name:"INR", desc:"Indian Rupee"},
{name:"BHD", desc:"Bahraini Dinar"}
],
convertfrom: "INR",
convertto:"USD",
amount :""
},
computed :{
finalamount:function() {
var to = this.convertto;
var from = this.convertfrom;
var final;
switch(from) {
case "INR":
if (to == "USD") {
final = this.amount * 0.016;
}
if (to == "EUR") {
final = this.amount * 0.013;
}
if (to == "INR") {
final = this.amount;
}
if (to == "BHD") {
final = this.amount * 0.0059;
}
break;
case "USD":
if (to == "INR") {
final = this.amount * 63.88;
}
if (to == "EUR") {
final = this.amount * 0.84;
}
if (to == "USD") {
final = this.amount;
}
if (to == "BHD") {
final = this.amount * 0.38;
}
break;
case "EUR":
if (to == "INR") {
final = this.amount * 76.22;
}
if (to == "USD") {
final = this.amount * 1.19;
}
if (to == "EUR") {
final = this.amount;
}
if (to == "BHD") {
final = this.amount * 0.45;
}
break;
case "BHD":
if (to == "INR") {
final = this.amount *169.44;
}
if (to == "USD") {
final = this.amount * 2.65;
}
if (to == "EUR") {
final = this.amount * 2.22;
}
if (to == "BHD") {
final = this.amount;
}
break
}
return final;
}
}
});
</script>
</body>
</html>
输出（转换为美元）
输出：转换为巴林第纳尔
说明 − 在上面的示例中，我们创建了一个货币转换器，用于将一种货币的值转换为另一种货币的选定值。我们创建了两个货币下拉菜单。当我们在文本框中输入要转换的金额时，转换后的相同金额将显示在下方。我们使用计算属性来执行必要的货币转换计算。
示例 2：客户详情
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<style>
#databinding{
padding: 20px 15px 15px 15px;
margin: 0 0 25px 0;
width: auto;
}
span, option, input {
font-size:20px;
}
.Table{
display: table;
width:80%;
}
.Title{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row{
display: table-row;
}
.Cell{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
width:30%;
}
</style>
<div id = "databinding" style = "">
<h1>Customer Details</h1>
<span>First Name</span>
<input type = "text" placeholder = "Enter First Name" v-model = "fname"/>
<span>Last Name</span>
<input type = "text" placeholder = "Enter Last Name" v-model = "lname"/>
<span>Address</span>
<input type = "text" placeholder = "Enter Address" v-model = "addr"/>
<button v-on:click = "showdata" v-bind:style = "styleobj">Add</button>
<br/>
<br/>
<customercomponent
v-for = "(item, index) in custdet"
v-bind:item = "item"
v-bind:index = "index"
v-bind:itr = "item"
v-bind:key = "item.fname"
v-on:removeelement = "custdet.splice(index, 1)">
</customercomponent>
</div>
<script type = "text/javascript">
Vue.component('customercomponent',{
template : '<div class = "Table"><div class = "Row" v-bind:style = "styleobj"><div class = "Cell"><p>{{itr.fname}}</p></div><div class = "Cell"><p>{{itr.lname}}</p></div><div class = "Cell"><p>{{itr.addr}}</p></div><div class = "Cell"><p><button v-on:click = "$emit(\'removeelement\')">X</button></p></div></div></div>',
props: ['itr', 'index'],
data: function() {
return {
styleobj : {
backgroundColor:this.getcolor(),
fontSize : 20
}
}
},
methods:{
getcolor : function() {
if (this.index % 2) {
return "#FFE633";
} else {
return "#D4CA87";
}
}
}
});
var vm = new Vue({
el: '#databinding',
data: {
fname:'',
lname:'',
addr : '',
custdet:[],
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods :{
showdata : function() {
this.custdet.push({
fname: this.fname,
lname: this.lname,
addr : this.addr
});
this.fname = "";
this.lname = "";
this.addr = "";
}
}
});
</script>
</body>
</html>
输出
删除后的输出
说明 − 在上面的示例中，我们有三个文本框用于输入 - 名字、姓氏和地址。有一个添加按钮，它将文本框中输入的值以表格格式添加到表中，并带有一个删除按钮。
表格格式是使用组件创建的。点击按钮使用 emit 事件与父组件交互，以从数组中删除元素。输入的值存储在数组中，并使用prop属性与子组件共享。