我有一个小的Loading组件,我的默认文本是'Loading ...'.插槽的好候选者,所以我有这样的东西作为我的模板:
<p class="loading"><i class="fa fa-spinner fa-spin"></i><slot>Loading...</slot></p>
这允许我用例如更改加载消息<loading>Searching...</loading>.但是,我想要的行为不仅仅是在没有提供插槽内容的情况下显示默认消息,而且如果插槽内容为空或空白.目前,如果我这样做<loading>{{loadingMessage}}</loading>并且loadingMessage为null,则不显示任何文本(我希望显示默认文本).理想情况下我需要测试this.$slots.default.这告诉我是否传入了内容,但是如何判断它是否为空？this.$slots.default.text返回undefined.
作为学习练习，我一直在调整现有的、可运行的 Web 应用程序以使用 Vue.js（我对另一个项目感兴趣的技术）。我只是想知道在处理大表（例如 1000-1500 行）方面是否有一些我需要了解的提示和技巧。
在我现有的 Web 应用程序中，我只是循环遍历产品的 Javascript 数组，通过字符串连接为表体构建 HTML，然后通过 JQuery 将其插入到空表中。这在性能方面工作得很好，当然它看起来有点凌乱并且可维护性不是很好。
对于我的 Vue.js 版本，我改为使用模板块，即：
<template v-for="product in productList">
生成的 HTML 看起来是相同的。但是由于某种原因，Vue.js 版本的响应有点迟钝。例如，当我单击其中一个产品行中的选择时，需要半秒钟左右的时间才会出现选项，并且选择了一个后，更新行类也有类似的延迟。
由于各种原因，我无法将实际的源代码放在像 Fiddle 这样的东西上，尽管我正在尝试创建一个简化的可重现示例。不过，我只是想知道 Vue 管理的表和直接的 HTML 表之间可能有什么区别，以便我可以了解导致这种意外缓慢的原因。
哦，如果您认为拥有这么多行的表格是个坏主意，那么这适用于具有已知的、经过测试的客户端的内部 Web 应用程序，并且纯 HTML 版本的性能很好。
我有一个名为'field'的美化输入组件,其中我声明了许多道具,因此:
props: ['value','cols','label','group','name']
鉴于这实际上是输入的花哨包装器,我可能还想传递其他一些属性,例如"占位符".我真的不想在道具中声明所有这些(虽然列表足够有限,当然可以这样做).我更喜欢做的是传递一个数组,也许叫做'attrs',它可以包含任意一组属性.现在我知道可以做到这一点,但我的问题是如何在父母中创建这个？我是否可以使用以下内容(尽管显然需要绑定)？
<field :attrs="['placeholder':'Whatever','length':42]"></field>
我一直在开发一个通用的Field组件,用于我正在开发的Vue Web应用程序中的表单.例如,在我的EditProduct组件中,我有Field组件的多个实例,其中一些类型为'checkbox',一些'text'等.有效的复选框变体的作用是生成如下内容:
<div class="col-xs-2">
<label>
<input id='organic' name='organic' type="checkbox" v-model="product.organic"/> Organic
</label>
</div>
由此:
<field :cols="2" name="organic" v-model="product.organic" type="checkbox"></field>
这很简单,但显示了一般的想法.我希望能够做的是传递像'更改'处理函数名称作为道具的东西,如下所示:
<field :cols="2" name="organic" v-model="product.organic" type="checkbox" change="this.handleSomething"></field>
这将调用EditProduct组件中的函数.不过,我不知道如何让它发挥作用.我的Field组件中已经有一个更改处理程序方法,用于发出通知事件:
methods: {
handleCheckbox: function (event) {
this.$emit('input', event.target.checked);
if(this.change){
//do something here...
}
}
},
我的想法是在这里测试"更改"道具的存在然后做一些事情,但此时我所拥有的只是一个包含函数名称的字符串.我如何实际使用它来调用一个函数,最好使用派生自$ event的参数(例如$ event.target.checked)？
我想这可能是我偶然发现的一个错误,不确定.我收到一个组件的Vue.js警告:
vue.js:2611 [Vue warn]:不能
<template>用作组件根元素,因为它可能包含多个节点:
问题似乎是这样的:
<template id="tpl-field">
<template v-if="fieldType==='checkbox-inline'">
<label class="checkbox-inline">[SNIP]</label>
</template>
<template v-else>
[SNIP]
</template>
</template>
所以我有两个模板节点,这似乎是它窒息的多个节点(当然每个模板节点只包含一个节点).然而,这是Vue中的if-else - 如果其中一个节点存在,则另一个节点在逻辑上不可能.
这里的问题演示:https://jsfiddle.net/jonmor51/Ldz3k0jp/1/.如果我将所有内容都包装在div中,它就可以了.但没有,它失败了.(不幸的是,在我想要使用它的上下文中,即对于Bootstrap网格中的内联复选框,包装div会破坏事物).
这实际上是一个代码风格的问题，尽管我使用 Vue.js 来开发我的前端，所以我用 Vue 术语来表达它。
我正在使用 Vue.js 开发一个相当复杂的 Web 应用程序。即使使用单个文件组件，我也发现我的一些组件（例如 CustomerEditor）变得庞大且笨重，并且越来越难以编辑。现在，我有 Java 背景（实际上是近年来的 Grails/Groovy），我的本能总是将任何可能在多个地方可用的东西隔离到它自己的类中，以便尽可能地保留干原则。
我一直在使用 Vue.js 来做到这一点，将事物分解成更小的组件，我看到了重用的可能性。即便如此，有些文件仍然很大。所以现在我正在考虑一些我以前从未真正做过的事情，将一些组件分割成更小的组件，即使这些较小的组件只会在这个地方使用一次，只是为了使代码更具可读性/可编辑性。我不得不说，这感觉是一条相当奇怪的道路，我只是想知道这是否是其他人的常见做法？
IntelliJ IDEA 对于 Grails 开发工作来说非常棒。不过，它对资源（尤其是内存）的要求相当高，并且需要很长时间才能启动，所以偶尔我喜欢使用 Visual Studio Code 来代替轻度编辑。我正在尝试为 Grails 开发最有效地调整它。任何提示将是最受欢迎的。我特别想知道的一件事是是否有某种方法可以为 .gsp 文件设置美化器/格式化程序。
我正在寻找Vue.js 2.0日期选择器组件的建议.我的要求很简单.
到目前为止我一直在使用https://github.com/charliekassel/vuejs-datepicker,这很好,但没有范围选项(除非我错过了它).这看起来很有希望 - https://github.com/mengxiong10/vue2-datepicker - 但我没有立即看到如何在选择日期时触发方法.
在我的 Vue 2 应用程序中，我有一个菜单栏，其菜单项使用路由器链接。这些菜单项之一是“客户”，它将用户带到客户编辑器。现在，如果用户在客户编辑器中单击相同的“客户”菜单项，则不会发生任何事情。我认为这是因为文档中提到的这种行为：“在 HTML5 历史模式下，路由器链接将拦截点击事件，以便浏览器不会尝试重新加载页面。”
现在，这是完全可以理解的，而且在大多数情况下，这将是我想要的行为。但实际上在这里我希望重新加载组件，回到干净的状态。或者更准确地说，对于发生的某些事件，我可以在客户编辑器中处理这些事件以设置我希望它们成为的样子。事实上，我认为情况会是这样，但是当我设置手表时，因此
watch: {
'$route' (to, from) {
console.log("Route changed");
}
},
我没有看到任何记录到控制台的内容。可能发生了一些我没有处理的事件，而 Vue 只是简单地重用了该组件。但是我怎样才能阻止它这样做呢？
是否有可能以某种方式为 Eleventy 进行常规配置，以便输入文件夹中的“my_file.html”与 _site 文件夹中的“my_file.html”一样，而不是“/my_file/index.html”？
我知道我可以使用永久链接逐个文件地进行操作。但如果可能的话，我希望它为整个站点配置。