0
0

More than 3 years have passed since last update.

Vue.js ディレクティブの省略記号

Posted at

Vue.jsのディレクティブについて

省略記号は2つのみ(公式より)
https://jp.vuejs.org/v2/guide/syntax.html

v-bind と v-onの2つ

結論

v-bind:は「:」

v-on:〇〇は「@〇〇」

に省略可能

以下は公式より


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

 v-bind 省略記法
<!-- 完全な構文 -->
<a v-bind:href="url"> ... </a>

<!-- 省略記法 -->
<a :href="url"> ... </a>

<!-- 動的引数の省略記法 (2.6.0 以降) -->
<a :[key]="url"> ... </a>

v-on 省略記法
<!-- 完全な構文 -->
<a v-on:click="doSomething"> ... </a>

<!-- 省略記法 -->
<a @click="doSomething"> ... </a>

<!-- 動的引数の省略記法 (2.6.0 以降) -->
<a @[event]="doSomething"> ... </a>

</body>
</html>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0