vue中“:”、“.”、“@”意义

向右看齐 2022-12-13 04:54 189阅读 0赞

## “:” 是指令 “v-bind”的缩写，“@”是指令“v-on”的缩写；“.”是修饰符。详细如下 ##

### `v-bind` 指令可以用于响应式地更新 HTML 特性： ###

<table> 
 <tbody> 
  <tr> 
   <td> 
    <table> 
     <tbody> 
      <tr> 
       <td> <pre>
&nbsp;</pre> 
        <ol> 
         <li> <p><code>&lt;div&nbsp;id="app-2"&gt;</code></p> </li> 
         <li> <p><code>&lt;span&nbsp;v-bind:title="message"&gt;</code></p> </li> 
         <li> <p><code>鼠标悬停几秒钟查看此处动态绑定的提示信息！</code></p> </li> 
         <li> <p><code>&lt;/span&gt;</code></p> </li> 
         <li> <p><code>&lt;/div&gt;</code></p> </li> 
        </ol></td> 
      </tr> 
     </tbody> 
    </table> 
    <table> 
     <tbody> 
      <tr> 
       <td> <pre>
&nbsp;</pre> 
        <ol> 
         <li> <p><code>var app2 = new Vue({ </code></p> </li> 
         <li> <p><code>el: '#app-2',</code></p> </li> 
         <li> <p><code>data: { </code></p> </li> 
         <li> <p><code>message: '页面加载于 ' + new Date().toLocaleString()</code></p> </li> 
         <li> <p><code>}</code></p> </li> 
         <li> <p><code>})</code></p> </li> 
        </ol></td> 
      </tr> 
     </tbody> 
    </table></td> 
  </tr> 
 </tbody> 
</table>

该指令的意思是：“将这个元素节点的 `title` 特性和 Vue 实例的 `message` 属性保持一致”。如果你再次打开浏览器的 JavaScript 控制台，输入 `app2.message = '新消息'`，就会再一次看到这个绑定了 `title` 特性的 HTML 已经进行了更新。

### `v-on` 指令，它用于监听 DOM 事件： ###

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;a&nbsp;v-on:click="doSomething"&gt;...&lt;/a&gt;</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

# #

`v-` 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，`v-` 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的[单页面应用程序 (SPA - single page application)][_SPA - single page application] 时，`v-` 前缀也变得没那么重要了。因此，Vue.js 为 `v-bind` 和 `v-on` 这两个最常用的指令，提供了特定简写：

### [`v-bind` 缩写][v-bind] ###

### [`v-on` 缩写][v-on] ###

<table> 
 <tbody> 
  <tr> 
   <td> <pre>
&nbsp;</pre> 
    <ol> 
     <li> <p><code>&lt;!-- 完整语法 --&gt;</code></p> </li> 
     <li> <p><code>&lt;a&nbsp;v-on:click="doSomething"&gt;...&lt;/a&gt;</code></p> </li> 
     <li>&nbsp;</li> 
     <li> <p><code>&lt;!-- 缩写 --&gt;</code></p> </li> 
     <li> <p><code>&lt;a&nbsp;@click="doSomething"&gt;...&lt;/a&gt;</code></p> </li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

它们看起来可能与普通的 HTML 略有不同，但 `:` 与 `@` 对于特性名来说都是合法字符，在所有支持 Vue.js 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。

[修饰符][Link 1]

修饰符 (Modifiers) 是以半角句号 `.` 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，`.prevent` 修饰符告诉 `v-on` 指令对于触发的事件调用 `event.preventDefault()`：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;form&nbsp;v-on:submit.prevent="onSubmit"&gt;...&lt;/form&gt;</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

[_SPA - single page application]: https://en.wikipedia.org/wiki/Single-page_application
[v-bind]: https://cn.vuejs.org/v2/guide/syntax.html#v-bind-%E7%BC%A9%E5%86%99
[v-on]: https://cn.vuejs.org/v2/guide/syntax.html#v-on-%E7%BC%A9%E5%86%99
[Link 1]: https://cn.vuejs.org/v2/guide/syntax.html#%E4%BF%AE%E9%A5%B0%E7%AC%A6