📅  最后修改于: 2020-10-17 04:52:01        🧑  作者: Mango

VueJS是用于开发交互式Web界面的渐进式JavaScript框架。重点更多地放在视图部分，即前端。与其他项目和库集成非常容易。 VueJS的安装非常简单，初学者可以轻松理解并开始构建自己的用户界面。内容分为不同的章节，其中包含相关主题以及简单而有用的示例。听众本教程适用于希望以简单易用的方式学习VueJS及其编程概念基础的软件程序员。本教程将使读者对VueJS的各种功能有足够的了解，从那里他们...

📅  最后修改于: 2020-10-17 04:56:32        🧑  作者: Mango

VueJS是用于开发交互式Web界面的开源渐进式JavaScript框架。它是用于简化Web开发的著名框架之一。 VueJS专注于视图层。可以轻松将其集成到大型项目中进行前端开发，而不会出现任何问题。VueJS的安装非常容易开始。任何开发人员都可以在很短的时间内轻松理解并构建交互式Web界面。 VueJS由Google的前员工Evan You创建。 VueJS的第一版于2014年2月发布。最近在G...

📅  最后修改于: 2020-10-17 04:56:58        🧑  作者: Mango

有很多安装VueJS的方法。前面讨论了如何进行安装的一些方法。直接在HTML文件中使用<script>标记转到VueJS的主页https://vuejs.org/v2/guide/installation.html并根据需要下载vue.js。有两个版本可供使用-生产版本和开发版本。未最小化开发版本，而最小化了生产版本，如以下屏幕快照所示。开发版本将在项目开发期间提供警告和调试模式。使用CDN我们也...

📅  最后修改于: 2020-10-17 04:57:19        🧑  作者: Mango

Vue是用于构建用户界面的JavaScript框架。它的核心部分主要集中在视图层，并且很容易理解。我们将在本教程中使用的Vue版本是2.0。由于Vue基本上是为前端开发而构建的，因此在接下来的章节中，我们将处理许多HTML，JavaScript和CSS文件。为了理解细节，让我们从一个简单的例子开始。在此示例中，我们将使用vuejs的开发版本。例输出这是我们使用VueJS创建的第一个应用程序。如以上...

📅  最后修改于: 2020-10-17 04:58:01        🧑  作者: Mango

要开始使用VueJS，我们需要创建Vue实例，称为根Vue Instance。句法让我们看一个示例，以了解Vue构造函数中需要包含哪些内容。vue_instance.js对于Vue，有一个名为el的参数。它采用DOM元素的ID。在上面的示例中，我们有ID#vue_det。它是.html中存在的div元素的ID。现在，我们要做的任何事情都会影响div元素，而不会影响它之外的任何内容。接下来，我们定义...

📅  最后修改于: 2020-10-17 04:58:42        🧑  作者: Mango

Vue组件是VueJS的重要功能之一，它可以创建可在HTML中重用的自定义元素。让我们来看一个示例并创建一个组件，这将使人们更好地了解组件如何与VueJS一起工作。例vue_component.js在.html文件中，我们创建了两个id为component_test和component_test1的div。在上面显示的.js文件中，使用div ID创建了两个Vue实例。我们创建了一个可与两个视图实...

📅  最后修改于: 2020-10-17 04:59:24        🧑  作者: Mango

我们已经看到了Vue实例和组件的方法。计算属性类似于方法，但与方法相比有一些区别，我们将在本章中讨论。在本章的最后，我们将能够决定何时使用方法以及何时使用计算属性。让我们使用示例来了解计算属性。例vue_computeprops.js在这里，我们用名字和姓氏创建了.html文件。名和姓是一个使用属性名和姓绑定的文本框。我们正在调用计算方法getfullname，该方法返回输入的名字和姓氏。当我们在...

📅  最后修改于: 2020-10-17 04:59:45        🧑  作者: Mango

在本章中，我们将学习Watch属性。通过示例，我们将看到可以在VueJS中使用Watch属性。例在上面的代码中，我们创建了两个文本框，一个带有km，另一个带有meter。在data属性中，km和meter初始化为0。创建了一个具有两个功能kmandmeter的watch对象。在这两个功能中，都完成了从公里到米以及从米到公里的转换。当我们在任何一个texbox中输入值时，无论哪个被更改，Watch都...

📅  最后修改于: 2020-10-17 05:01:20        🧑  作者: Mango

在本章中，将学习如何在VueJS附带的名为v-bind的绑定指令的帮助下，对HTML属性进行操作或为HTML属性分配值，更改样式以及分配类。让我们考虑一个示例，以了解为什么需要以及何时使用v-bind指令进行数据绑定。例在上面的示例中，我们显示了一个title变量和三个锚链接。我们还为数据对象的href分配了一个值。现在，如果我们在浏览器中检查输出并检查，我们将看到前两个锚链接没有正确的href，...

📅  最后修改于: 2020-10-17 05:02:54        🧑  作者: Mango

v-on是添加到DOM元素以侦听VueJS中事件的属性。点击事件例输出以下代码用于为DOM元素分配click事件。v-on有一个简写形式，这意味着我们也可以按以下方式调用该事件：单击按钮后，它将调用方法“ displaynumbers”，该方法将接收事件，并且我们已经在浏览器中对控制台进行了操作，如上所示。现在，我们将再检查一次事件mouseover mouseout。例在上面的示例中，我们创建了...

📅  最后修改于: 2020-10-17 05:03:30        🧑  作者: Mango

指令是VueJS以某种方式执行操作的指令。我们已经看到了诸如v-if，v-show，v-else，v-for，v-bind，v-model，v-on等指令。在本章中，我们将介绍自定义指令。我们将创建与组件操作类似的全局指令。句法我们需要使用Vue.directive创建指令。它采用指令名称，如上所示。让我们考虑一个示例，以显示指令工作的详细信息。例在此示例中，我们创建了一个自定义指令changes...

📅  最后修改于: 2020-10-17 05:04:21        🧑  作者: Mango

VueJS没有内置的路由器功能。我们需要执行一些其他步骤来安装它。从CDN直接下载最新版本的vue-router可在https://unpkg.com/vue-router/dist/vue-router.js中获得Unpkg.com提供基于npm的CDN链接。上面的链接始终更新为最新版本。我们可以下载并托管它，并将其与script标签以及vue.js一起使用，如下所示-使用NPM运行以下命令以安...

📅  最后修改于: 2020-10-17 05:04:44        🧑  作者: Mango

Mixins基本上与组件一起使用。它们在组件之间共享可重用的代码。当组件使用mixin时，mixin的所有选项都将成为组件选项的一部分。例输出当mixin和组件包含重叠选项时，它们将合并，如以下示例所示。现在，mixin和vue实例创建了相同的方法。这是我们在控制台中看到的输出。如图所示，vue和mixin的选项将合并。如果我们碰巧在方法中具有相同的函数名称，则主vue实例将具有优先权。例我们将看...

📅  最后修改于: 2020-10-17 05:05:31        🧑  作者: Mango

我们已经看到了组件及其用法。例如，我们有一个内容需要在整个项目中重复使用。我们可以将其转换为组件并将其使用。让我们看一个简单组件的示例，并查看render函数必须在其中执行的操作。例考虑上面的示例简单示例，该示例可打印Hello World，如以下屏幕截图所示。现在，如果我们想重用该组件，只需再次打印即可。例如，输出将是以下内容。但是，现在我们需要对该组件进行一些更改。我们不希望打印相同的文本。我...

📅  最后修改于: 2020-10-17 05:06:12        🧑  作者: Mango

VueJS提供了向属性添加反应性的选项，这些属性是动态添加的。考虑到我们已经创建了vue实例，需要添加watch属性。它可以做到如下-例在数据对象中有一个定义为1的属性计数器。当我们点击按钮时，计数器增加。Vue实例已创建。要添加监视，我们需要执行以下操作-我们需要使用$ watch在vue实例之外添加watch。添加了一个警报，该警报显示counter属性的值更改。还添加了一个计时器函数，即se...