13 让我们使用简写

原文: https://javabeginnerstutorial.com/vue-js/13-shorthands-for-v-bind-and-v-on/

欢迎回来! 有人说简写吗? 是的,这就是我们今天要关注的重点。 我们已经使用 Vue 指令已有一段时间了。 v-前缀有多种帮助。 它直观地表示我们正在处理代码中与 Vue 相关的属性(最重要的原因)。

到目前为止,您应该已经了解v-bindv-on是我们模板中最常用的两个指令。 为什么? 因为我们一直在处理事件(特别是单击)和数据绑定! 因此,对于这两个最常用的指令,Vue 为我们提供了捷径或编写它们的简便方法。

起始代码

Index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Hello Vue!</title>
  5. <!-- including Vue with development version CDN -->
  6. <scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <divid="app">
  10. <h2>Welcome</h2>
  11. </div>
  12. <!-- including index.js file -->
  13. <scriptsrc="index.js"></script>
  14. </body>
  15. </html>

Index.js

  1. newVue({
  2. el:"#app",
  3. data:{
  4. },
  5. // define all custom methods within the 'methods' object
  6. methods:{
  7. }
  8. });

v-bind的简写

让我们使用v-bind属性将 HTML <a>标记的href属性绑定到“https://www.google.com” URL,

Index.html(代码段)

  1. <av-bind:href="url"target="_blank">Google</a>

然后在 Vue 实例的数据对象中定义“url”,

Index.js(代码段)

  1. data:{
  2. url:"https://www.google.com"
  3. }

这段代码工作得很好。 单击链接“Google”,将打开一个新标签,并导航到 Google 页面。 但是我们想看起来很酷。 不是吗?因此,编写v-bind指令的简短方法是一次性删除v-bind一词,而仅使用冒号

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

刚开始时可能看起来有些混乱,但是一旦您掌握了它,您很快就会感到赞赏。 这两个代码段(带和不带简写)的工作原理完全相同。 区别只是少了一些字符和更易读的代码。

如下图所示,即使是简写形式,所有受 Vue.js 支持的浏览器(在我们的示例中为 Chrome)都可以正确解析它,并将url的值绑定到href属性。 请注意,冒号(v-bind的简写语法)没有出现在最终呈现的 HTML 中,可以在 Chrome DevTools 扩展坞的“元素”窗格中清楚地看到。

v-bind

v-on的简写

为了理解v-on指令的简写语法,让我们有一个按钮。 单击它后,我们将触发名为“greet”的方法,以在消息HiHello之间切换。

完整的语法是

Index.html(代码段)

  1. <buttonv-on:click="greet">Click for a different greeting</button>

Index.js(代码段)

  1. data:{
  2. message:"Hi",
  3. url:"https://www.google.com"
  4. },
  5. methods:{
  6. greet(){
  7. this.message ==="Hi"?this.message ="Hello":this.message ="Hi";
  8. }
  9. }

好的。 此处的缩写是将单词v-on和冒号替换为@符号。 就这样! 它是如此简单!!

Index.html(代码段)

  1. <!-- Using v-on shorthand --><button @click="greet">Click for a different greeting</button>

最终代码

Index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Hello Vue!</title>
  5. <!-- including Vue with development version CDN -->
  6. <scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <divid="app">
  10. <h2>Welcome</h2>
  11. <!-- Using v-on shorthand -->
  12. <button @click="greet">Click for a different greeting</button>
  13. <p> {{ message }} </p>
  14. <!-- Using v-bind shorthand -->
  15. <a :href="url"target="_blank">Google</a>
  16. </div>
  17. <!-- including index.js file -->
  18. <scriptsrc="index.js"></script>
  19. </body>
  20. </html>

Index.js

  1. newVue({
  2. el:"#app",
  3. data:{
  4. message:"Hi",
  5. url:"https://www.google.com"
  6. },
  7. // define all custom methods within the 'methods' object
  8. methods:{
  9. greet(){
  10. // 'this' keyword refers to the current Vue instance
  11. this.message ==="Hi"?this.message ="Hello":this.message ="Hi";
  12. }
  13. }
  14. });

代码看起来更加简洁,优雅且不那么冗长(显然!)。 您将在处理事件负载的实际应用中更好地看到它。 请记住,使用简写语法完全是可选的,完全由您决定。 上面讨论的所有代码以及注释都可以在 GitHub 仓库中找到。

警告:我将在以后的所有代码示例中使用这些简写形式。 与他们合作的次数越多,您就越感到舒适!

为什么要使用简写?

让我们了解使用这些简写来说服您的原因,

  1. 由于经常以完整形式使用这些指令,因此代码变得冗长。
  2. 在将 Vue.js 用作管理所有前端代码的框架的应用(例如 SPA)中,很明显正在使用 Vue,而前缀v-并不那么重要。
  3. 干净,易读的代码是每个开发人员最终想要的。

这使我们到了本文的结尾。 祝你今天愉快。