Skip to content

J
jbt-zh

OpenDocCN / jbt-zh
9 个月 前同步成功

通知 0
Star 8
Fork 1
J
jbt-zh

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
157.md 6.6 KB
Newer Older
W
init  
wizardforcel 已提交
1 2 3 4 
# 13.让我们使用速记

> 原文： [https://javabeginnerstutorial.com/vue-js/13-shorthands-for-v-bind-and-v-on/](https://javabeginnerstutorial.com/vue-js/13-shorthands-for-v-bind-and-v-on/)
W
2020-06-13 19:17:44  
wizardforcel 已提交
5 
欢迎回来！ 有人说速记吗？ 是的，这就是我们今天要关注的重点。 我们已经使用 [Vue 指令](https://javabeginnerstutorial.com/js/vue-js/what-is-vuejs/)已有一段时间了。 `v-`前缀有多种帮助。 它直观地表示我们正在处理代码中与 Vue 相关的属性（最重要的原因）。
W
init  
wizardforcel 已提交
6
W
2020-06-13 19:17:44  
wizardforcel 已提交
7 
到目前为止，您应该已经了解`v-bind`和`v-on`是我们模板中最常用的两个指令。 为什么？ 因为我们一直在处理[事件](https://javabeginnerstutorial.com/vue-js/11-listening-to-dom-events-and-event-modifiers/)（特别是单击）和[数据绑定](https://javabeginnerstutorial.com/vue-js/6-data-binding-p2/)！ 因此，对于这两个最常用的指令，Vue 为我们提供了捷径或编写它们的简便方法。
W
init  
wizardforcel 已提交
8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 

## 起始码

Index.html

```java
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Vue!</title>
    <!-- including Vue with development version CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>Welcome</h2>
    </div>
    <!-- including index.js file -->
    <script src="index.js"></script>
  </body>
</html>
```

Index.js

```java
new Vue({
  el: "#app",
  data: {
  },
  // define all custom methods within the 'methods' object
  methods: {
  }
});
```
W
2020-06-13 19:17:44  
wizardforcel 已提交
44 
## v-bind 的简写
W
init  
wizardforcel 已提交
45
W
2020-06-24 11:35:11  
wizardforcel 已提交
46 
让我们使用`v-bind`属性将 HTML `<a>`标记的`href`属性绑定到“`https://www.google.com`” URL，
W
init  
wizardforcel 已提交
47
W
2020-06-23 18:01:50  
wizardforcel 已提交
48 
*`Index.html`（摘要）*
W
init  
wizardforcel 已提交
49 50 51 52 53 

```java
<a v-bind:href="url" target="_blank">Google</a>
```
W
2020-06-24 11:35:11  
wizardforcel 已提交
54 
然后在 Vue 实例的数据对象中定义“`url`”，
W
init  
wizardforcel 已提交
55
W
2020-06-23 18:01:50  
wizardforcel 已提交
56 
*`Index.js`（摘要）*
W
init  
wizardforcel 已提交
57 58 59 60 61 62 63 

```java
data: {
    url: "https://www.google.com"
}
```
W
2020-06-24 11:35:11  
wizardforcel 已提交
64 
这段代码工作得很好。 单击链接“`Google`”，将打开一个新标签，并导航到 Google 页面。 但是我们想看起来很酷。 不是吗 因此，编写`v-bind`指令的简短方法是一次性删除`v-bind`一词，而仅使用**冒号**。
W
init  
wizardforcel 已提交
65 66 67 68 69 70 71 72 

```java
<!— Cool way of writing v-bind -->
<a :href="url" target="_blank">Google</a> 
```

刚开始时可能看起来有些混乱，但是一旦您掌握了它，您很快就会感到赞赏。 这两个代码段（带和不带速记）的工作原理完全相同。 区别只是少了一些字符和更易读的代码。
W
2020-06-13 19:17:44  
wizardforcel 已提交
73 
如下图所示，即使是简写形式，所有受 Vue.js 支持的浏览器（在我们的示例中为 Chrome）都可以正确解析它，并将`url`的值绑定到`href`属性。 请注意，冒号（v-bind 的简写语法）没有出现在最终呈现的 HTML 中，可以在 Chrome DevTools 扩展坞的“元素”窗格中清楚地看到。
W
init  
wizardforcel 已提交
74 75 76 

![v-bind](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20578%20354'%3E%3C/svg%3E)
W
2020-06-24 15:53:32  
wizardforcel 已提交
77 
<noscript><img alt="v-bind" class="alignnone size-full wp-image-14134" height="354" src="img/51f44e5135c07d36919a60b077148ebd.png" width="578"/><h2>v-on 的简写</h2><p>为了理解<code>v-on</code>指令的简写语法，让我们有一个按钮。 单击它后，我们将触发名为“<code>greet</code>”的方法，以在消息<code>Hi</code>和<code>Hello</code>之间切换。</p><p>完整的语法是</p><p><em>Index.html (snippet)</em></p><pre><code class="language-html">&lt;button v-on:click="greet"&gt;Click for a different greeting&lt;/button&gt;</code></pre><p><em>Index.js (snippet)</em></p><pre><code class="language-javascript">data: { message: "Hi", url: "https://www.google.com" }, methods: { greet() { this.message === "Hi" ? this.message = "Hello" : this.message = "Hi"; } }</code></pre><p>好的。 此处的缩写是将单词<code>v-on</code>和冒号替换为<code>@</code>符号。 就这样！ 它是如此简单！！</p><p><em>Index.html (snippet)</em></p><pre><code class="language-html">&lt;!-- Using v-on shorthand --&gt; &lt;button @click="greet"&gt;Click for a different greeting&lt;/button&gt; </code></pre><h2>最终密码</h2><p>Index.html</p><pre><code class="language-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello Vue!&lt;/title&gt; &lt;!-- including Vue with development version CDN --&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;h2&gt;Welcome&lt;/h2&gt; &lt;!-- Using v-on shorthand --&gt; &lt;button @click="greet"&gt;Click for a different greeting&lt;/button&gt; &lt;p&gt; {{ message }} &lt;/p&gt; &lt;!-- Using v-bind shorthand --&gt; &lt;a :href="url" target="_blank"&gt;Google&lt;/a&gt; &lt;/div&gt; &lt;!-- including index.js file --&gt; &lt;script src="index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre><p>Index.js</p><pre><code class="language-javascript">new Vue({ el: "#app", data: { message: "Hi", url: "https://www.google.com" }, // define all custom methods within the 'methods' object methods: { greet() { // 'this' keyword refers to the current Vue instance this.message === "Hi" ? this.message = "Hello" : this.message = "Hi"; } } });</code></pre><p>代码看起来更加简洁，优雅且不那么冗长（显然！）。 您将在处理事件负载的实际应用中更好地看到它。 请记住，使用速记语法完全是可选的，完全由您决定。 上面讨论的所有代码以及注释都可以在<a href="https://github.com/JBTAdmin/vuejs"> GitHub 仓库</a>中找到。</p><p><em>警告：我将在以后的所有代码示例中使用这些简写形式。 与他们合作的次数越多，您就越感到舒适！ </em></p><p><strong>为什么要使用速记？ </strong></p><p>让我们了解使用这些速记来说服您的原因，</p><ol><li>由于经常以完整形式使用这些指令，因此代码变得冗长。</li><li>在将 Vue.js 用作管理所有前端代码的框架的应用（例如<a href="https://en.wikipedia.org/wiki/Single-page_application"> SPA </a>）中，很明显正在使用 Vue，而前缀<code>v-</code>并不那么重要。</li><li>干净，易读的代码是每个开发人员最终想要的。</li></ol><p>这使我们到了本文的结尾。 祝你今天愉快。</p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/14-two-way-binding-v-model/" title="14\. Two-way data binding with v-model"> 14.使用 v 模型</a>的双向数据绑定</h5></div></div> </body> </html></noscript>