Question

有人可以帮我理解Vue.js指令的arg和modifiers的良好用例吗？由于我们已经可以将数据作为指令value中的对象传递，因此我很难看到arg和modifiers的值。

例如，我可以执行以下操作：

<div v-myDirective:foo.a.b="some value"> ...

但我可以很容易地完成同样的事情：

<div v-myDirective="{arg: 'foo', a:true, b:true, value: 'some value'}"> ...

那么arg的意思是什么？我意识到第一个用例不那么冗长，但它似乎是一个非常具体的用例，我不知道所有额外选项的重点是什么使得指令规范更加复杂。

是否有一个我遗漏的明显用例？

Answer 1

两者的用例是相同的。但第一个只是一个简短的代码：

<div v-myDirective:foo.a.b="some value">

但请记住foo.a.b有a和b修饰符，当指令出现在指令中时，指令会返回true。

当您使用foo.a时，b修饰符不存在，并返回false。

if (binding.modifiers.a) {
  // do something a
}
if (binding.modifiers.b) {
  // do something b
}

但是在对象语法中，你可以做更多的事情，而不仅仅是真正的价值检查。

<div v-myDirective="{arg: 'foo', a:'some string', b:100, value: 'some value'}">

这样，您可以检查a是否有某些字符串＆＃39;并且b在你的指令函数中有100个。

if (binding.value.a == 'some string') {
  // do something a
}
if (binding.value.b == 100) {
  // do something b
}

我们大多数人都喜欢简短的语法，我也喜欢。因此，每当您需要检查是否存在修饰符时，请使用简写语法。当您需要更复杂的检查而不仅仅是真值检查时，请使用对象语法。

Answer 2

编程可用性/便利性，就是这样。

人们更喜欢v-directive:foo="bar"而不是v-directive="{foo: bar}"的原因是人们更喜欢:prop="val"而不是v-bind:prop="val"。便利性。

与v-on:click和@click相同。

使用声明方式（而不是“值”方式）可以更具可读性，并且对最终用户（程序员）更有意义。声明式方法将指令分离得更好什么是“元数据”和什么是“有效负载”。

如果最终用户是设计师（不习惯JavaScript的对象表示法），我认为这会产生更大的差异。

“价值”符号越多，您就越容易出错：

v-directive="{a: 1, b: '123', c: message, d: 'false'}"

人们是否真的记得正确引用'123'所以它意味着一个字符串？他们会在不引用a的价值的情况下这样做吗？他们会永远记得他们应该引用一个但不引用另一个吗？用户是否清楚message的值是this.message而不是字符串"message"？如果d是一个布尔属性，引用它有多糟糕（不小心）？

最后，可能指向Vue设计师的另一个重点是，他们试图提供自定义指令 可用于本机指令。所有这些修饰符/参数都存在于本机指令中（例如v-bind:address.sync="myAddressProp"）。

什么是vue.js指令中arg的一个很好的用例？

2 个答案: