推荐
VueJS – 开发示例（18）
示例 1：货币转换器 <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <style> #databi...
推荐
VueJS – 响应接口（17）
VueJS 提供了向属性添加响应的选项，这些属性是动态添加的。考虑到我们已经创建了 vue 实例，需要添加 watch 属性。可以按如下方式完成 – 例子 <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vu...
推荐
VueJS – 渲染函数（vue渲染函数有什么作用）16
我们已经看到了组件及其用法。例如，我们有一个内容需要在整个项目中重复使用。我们可以将其转换为组件并使用它。 让我们看一个简单组件的例子，看看渲染函数在其中做了什么。 例子 <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/...
推荐
VueJS – Mixins混入（15）
Mixin 基本上是和组件一起使用的。它们在组件之间共享可重用的代码。当组件使用 mixin 时，mixin 的所有选项都成为组件选项的一部分。 例子 <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js">...
推荐
VueJS – 路由（14）
VueJS 没有内置的路由器功能。我们需要执行一些额外的步骤来安装它。 直接从 CDN 下载 最新版本的 vue-router 可在https://unpkg.com/vue-router/dist/vue-router.js 获得 Unpkg.com 提供基于 npm 的 CDN 链接。上面的链接总是更新到最新版本。我们可以下载并托管它，并将其与脚本标签和 vue.js 一起使用，如下所示 &#...
推荐
VueJS – 指令（13）
指令是 VueJS 以某种方式做事的指令。我们已经看到了诸如 v-if、v-show、v-else、v-for、v-bind、v-model、v-on 等指令。 在本章中，我们将了解自定义指令。我们将创建类似于我们为组件所做的那样的全局指令。 语法 Vue.directive('nameofthedirective', { bind(e1, binding, vnode) { } }) 我们需要使...
推荐
VueJS – 过渡和动画（12）
在本章中，我们将讨论 VueJS 中可用的过渡和动画功能。 过渡 当在 DOM 中添加/更新 HTML 元素时，VueJS 提供了各种方法来将它们应用到 HTML 元素。VueJS 有一个内置的过渡组件，需要包裹在需要过渡的元素上。 语法 <transition name = "nameoftransition"> <div></div> </transi...
推荐
VueJS – 条件渲染（11）
在本章中，我们将学习条件渲染和列表渲染。在条件渲染中，我们将讨论使用 if、if-else、if-else-if、show 等。在列表渲染中，我们将讨论如何使用 for 循环。 条件渲染 让我们开始并首先处理一个示例来解释条件渲染的细节。对于条件渲染，我们希望只有在满足条件时才输出，并且在 if、if-else、if-else-if、show 等的帮助下完成条件检查。 v-if 例子 <ht...
推荐
VueJS – 事件（监听 VueJS 中的事件）10
v-on是添加到 DOM 元素的属性，用于监听 VueJS 中的事件。 点击事件 例子 <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> &...
推荐
VueJS – 绑定（使用 v-bind 指令进行数据绑定）9
在本章中，将学习如何在VueJS 提供的名为v-bind的绑定指令的帮助下，对 HTML 属性进行操作或赋值、更改样式和分配类。 让我们考虑一个例子来理解为什么我们需要以及何时使用 v-bind 指令进行数据绑定。 例子 <html> <head> <title>VueJs Instance</title> <script type = "te...
推荐
VueJS – Watch属性（在 VueJS 中使用 Watch 属性）8
在本章中，我们将了解 Watch 属性。通过一个例子，我们将看到我们可以在 VueJS 中使用 Watch 属性。 例子 <html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script>...
推荐
VueJS – 计算属性（7）
我们已经看到了 Vue 实例和组件的方法。计算属性类似于方法，但与方法相比有一些不同，我们将在本章中讨论。 在本章结束时，我们将能够决定何时使用方法以及何时使用计算属性。 让我们通过一个例子来理解计算属性。 例子 <html> <head> <title>VueJs Instance</title> <script type = "text/j...