扩展Vue.js外文翻译资料

 2022-08-27 10:08

CHAPTER 26

Extending Vue.js

Vue.js provides all the features that are required for most web application projects. But if you find that you need to extend Vue.js, then there are several different techniques available, and they are the topic of this chapter. I show you how to supplement the built-in directives with your own custom code, how to define common features for components using mixins, and how to group a wider range of related features using a plugin. Table 26-1 puts this chapter in context.

Table 26-1. Putting the Vue.js Features in Context

Question Answer

What are they? The features described in this chapter allow you to extend the functionality provided by Vue.js.

Why are they useful? These features can be useful if you have common code that is

required throughout an application and for which you cannot use dependency injection. These features can also be useful if you have common functionality that is required by multiple application projects.

How are they used? Directives are created using a series of functions that are invoked

as the state of the element they are applied to changes. Mixins are defined as groups of features that are merged with those defined by a component when a new instance is created. Plugins are JavaScript modules that can contain a wide range of Vue.js features that can be used throughout an application.

Are there any pitfalls or limitations? These are advanced features that should be used with care and

that are not required by most features. Before using these features, consider whether the desired result can be achieved using the features from earlier chapters.

Are there any alternatives? These are optional features that are not required in most projects,

where the built-in functionality provided by Vue.js will be sufficient.

copy; Adam Freeman 2018

A. Freeman, Pro Vue.js 2, https://doi.org/10.1007/978-1-4842-3805-9_26

687

Table 26-2 summarizes the chapter.

Table 26-2. Chapter Summary

Problem Solution Listing

Define a custom directive Implement one or more hook functions and register

the directive using the directives property of a component

7–8, 16–18

Get information about how a custom directive has been applied

Read the properties of the binding object 9–14

Pass data between hook functions Use data properties on the HTML element to which 15

the component has been applied

Define base features for components

Create a mixed set of related features

Define a mixin 19–22

Create a plugin 23–31

Preparing for This Chapter

To create the project required for the examples in this chapter, run the command shown in Listing 26-1 in a convenient location.

Listing 26-1. Creating the Example Project

vue create extendingvue --default

Once the setup process has finished, run the command shown in Listing 26-2 in the extendingvue

folder to add the Bootstrap CSS package to the project.

Listing 26-2. Adding the Bootstrap CSS Package

npm install bootstrap@4.0.0

Add the statement shown in Listing 26-3 to the main.js file in the src folder to incorporate the

Bootstrap package into the application.

Listing 26-3. Incorporating the Bootstrap Package in the main.js File in the src Folder

import Vue from vue import App from ./App.vue

import 'bootstrap/dist/css/bootstrap.min.css';

Vue.config.productionTip = false new Vue({

render: h =gt; h(App)

}).$mount(#app)

I added a file called Numbers.vue to the src/components folder with the content shown in Listing 26-4.

Listing 26-4. The Contents of the Numbers.vue File in the src/components Folder

lt;templategt;

lt;div class='mx-5 p-2 border border-dark'gt;

lt;h3 class='bg-success text-white text-center p-2'gt;Numberslt;/h3gt;

lt;div class='container-fluid'gt;

lt;div class='row'gt;

lt;div class='col'gt;

lt;input class='form-control' v-model.number='first' /gt;

lt;/divgt;

lt;div class='col-1 h3'gt; lt;/divgt;

lt;div class='col'gt;

lt;input class='form-control' v-model.number='second' /gt;

lt;/divgt;

lt;div class='col h3'gt;= {{ total }} lt;/divgt;

lt;/divgt;

lt;/divgt;

lt;/divgt;

lt;/templategt;

lt;scriptgt;

export default {

data: function () { return {

first: 10,

second: 20

}

},

computed: {

total() {

return this.first this.second;

}

}

}

lt;/scriptgt;

This is the same component I used at the start of Chapter 25, without the transitions that I added in later examples. To integrate this component into the application, replace the contents in the App.vue file, as shown in Listing 26-5.

Listing 26-5. The Contents of the App.vue File in the src Folder

lt;templategt;

lt;div class='m-2'gt;

lt;numbers /gt;

lt;/divgt;

lt;/templategt;

lt;scriptgt;

import N

剩余内容已隐藏,支付完成后下载完整资料


第26章

扩展Vue.js

vue.js提供了大多数web应用程序项目所需的所有功能。 但是如果您发现需要扩展Vue.js,那么有几种不同的技术可用,它们是本章的主题。 我向您展示了如何用您自己的自定义代码补充内置指令,如何使用mixins为组件定义通用特性,以及如何使用插件对更广泛的相关特性进行分组。 表26-1 把这一章放在上下文中。

表26-1。将Vue.js功能放在上下文中

问题 回答

他们是什么? 本章中描述的特性允许您扩展Vue.js提供的功能。

为什么它们有用? 如果您有共同的代码,这些功能可能是有用的

整个应用程序都需要,并且不能为此使用依赖项注入。 如果您有多个应用程序项目所需要的共同功能,这些功能也可能是有用的。

它们是如何使用的? 指令是使用被调用的一系列函数创建的

作为元素的状态,它们被应用于更改。 mixins被定义为在创建新实例时与组件定义的特征组合并。 插件是Java脚本模块,可以包含广泛的Vue.js功能,可以在整个应用程序中使用。

是否有任何陷阱或限制? 这些都是高级功能,应该小心使用和

这是大多数功能所不需要的。 在使用这些特性之前,考虑是否可以使用前面章节的特性来实现所需的结果。

有其他选择吗? 这些是大多数项目不需要的可选特性,

其中Vue.js提供的内置功能就足够了。

copy;亚当·弗里曼2018年

A.弗里曼,ProVue.js2,https://doi.org/10.1007/978-1-4842-3805-9_26

687

26-2 总结这一章。

表26-2。章节摘要

问题 解决办法 清单

定义自定义指令 实现一个或多个挂钩功能并注册

使用组件的指令属性的指令

7–8, 16–18

获取有关如何应用自定义指令的信息

读取绑定对象的属性 9–14

在钩子函数之间传递数据 使用HTML元素上的数据属性 15

该组件已被应用

定义组件的基本特性

创建一组混合的相关特性

定义一个混合体 19–22

创建一个插件 23–31

为本章做准备

要创建本章示例所需的项目,请运行清单中所示的命令26-1 在一个方便的位置。

清单26-1。创建示例项目

创建扩展-默认

一旦安装过程完成,运行清单中所示的命令26-2 在扩展中

文件夹,以添加引导CSS包到项目。

清单26-2。添加引导CSS包

NPM安装引导@4.0.0

添加清单中所示的语句26-3 到src文件夹中的main.js文件以合并

引导包进入应用程序。

清单26-3。将Bootstrap包合并到src文件夹中的main.js文件中

import Vue from vue import App from ./App.vue

导入“引导/Dist/CSS/bootstrap.min.css“;

Vue.config.productionTip = false new Vue({

render: h =gt; h(App)

}).$mount(#app)

我在src/components文件夹中添加了一个名为Numbers.vue的文件,其内容如清单所示26-4.

清单26-4。src/components Folder中Numbers.vue文件的内容

lt;templategt;

lt;div class='mx-5 p-2 border border-dark'gt;

lt;h3 class='bg-success text-white text-center p-2'gt;Numberslt;/h3gt;

lt;div class='container-fluid'gt;

lt;div class='row'gt;

lt;div class='col'gt;

lt;input class='form-control' v-model.number='first' /gt;

lt;/divgt;

lt;div class='col-1 h3'gt; lt;/divgt;

lt;div class='col'gt;

lt;input class='form-control' v-model.number='second' /gt;

lt;/divgt;

lt;div class='col h3'gt;= {{ total }} lt;/divgt;

lt;/divgt;

lt;/divgt;

lt;/divgt;

lt;/templategt;

lt;scriptgt;

export default {

data: function () { return {

first: 10,

second: 20

}

},

computed: {

total() {

return this.first this.second;

}

}

}

lt;/scriptgt;

这是我在章节开始时使用的相同组件25没有我在后面的示例中添加的转换。 要将该组件集成到应用程序中,请替换App.vue文件中的内容,如清单所示26-5.

清单26-5。src文件夹中App.vue文件的内容

lt;templategt;

lt;div class='m-2'gt;

lt;numbers /gt;

lt;/divgt;

lt;/templategt;

lt;scriptgt;

import Numbers from './components/Numbers'

export default { name: App,

components: { Numbers }

}

lt;/scriptgt;

运行清单中显示的命令26-6 在“转换”文件夹中启动开发工具。

清单26-6。启动开发工具

下午跑发球

将执行最初的捆绑过程,之后您将看到一条消息,告诉您项目已成功编译,HTTP服务器正在监听端口8080上的请求。 打开一个新的浏览器窗口并导航到http://localhost:8080以查看如图所示的内容26-1.

图26-1。运行示例应用程序

创建自定义指令

Vue.js提供的内置指令涵盖了大多数应用程序中需要的关键任务,但是如果您需要直接使用应用程序呈现的HTML元素,并且需要在整个应用程序中这样做,您也可以创建自己的指令。 我添加了一个src/directions文件夹,并在其中添加了一个名为colorize.js的文件,其内容如清单所示26-7.

提示注意,我已经创建了一个javascript文件。 只使用.vue文件编写组件,它允许混合htML、CSS和javascript。 指令只使用javascript编写。

清单26-7。src/directions文件夹中colorize.js文件的内容

export default { update(el, binding) {

if (binding.value gt; 100) {

el.classList.add('bg-danger', 'text-white');

} else {

el.classList.remove('bg-danger', 'text-white');

}

}

}

我将很快解释自定义指令是如何工作的,但在深入研究它是如何工作的之前,它有助于展示这个代码是做什么的。 在清单中26-8我注册了该指令并将其应用于HTML元素。

为什么你可能不需要自定义指令

Vue.js应用程序中的基本构建块是组件,当您想向项目添加功能时,应该创建这个组件。 指令更难处理,具有更有限的可用特性,并且可能需要使用javascriptAPI操作htML元素,这可能是一个繁琐的过程。

如果您想在较低的级别上操作htML元素,则指令可能是有用的,但在大多数情况下,这是可以使用内置指令来完成的,因为最常见的所需更改由诸如v-bind等指令支持,如本章所述12. 如果您发现自己创建了一个自定义指令,那么值得花点时间问自己是否能够使用其他Vue.js功能之一实现相同的结果。

清单26-8。在src/Components文件夹中的Numbers.vue文件中注册和应用指令

lt;templategt;

lt;div class='mx-5 p-2 border border-dark'gt;

lt;h3 class='bg-success text-white text-center p-2'gt;Numberslt;/h3gt;

lt;div class='container-fluid'gt;

lt;div class='row'gt;

lt;div class='col'gt;

lt;input class='form-control' v-model.number='first' /gt;

lt;/divgt;

lt;div class='col-1 h3'gt; lt;/divgt;

lt;div class='col'gt;

lt;input class='form-control' v-model.number='second' /gt;

lt;/divgt;

lt;div v-colorize='total' class='col h3'gt;= {{ total }} lt;/divgt;

lt;/divgt;

lt;/divgt;

lt;

剩余内容已隐藏,支付完成后下载完整资料


资料编号:[405836],资料为PDF文档或Word文档,PDF文档可免费转换为Word

原文和译文剩余内容已隐藏,您需要先支付 30元 才能查看原文和译文全部内容!立即支付

以上是毕业论文外文翻译,课题毕业论文、任务书、文献综述、开题报告、程序设计、图纸设计等资料可联系客服协助查找。