Skip to content

Commit

Permalink
Updated code example to include closing tag. (#1216)
Browse files Browse the repository at this point in the history
* Updated code example to include closing tag.

* Update syntax examples with ellipses to imply content
  • Loading branch information
cpsloal authored and chrisvfritz committed Oct 14, 2017
1 parent ea89dd6 commit 6b57036
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions src/v2/guide/syntax.md
Original file line number Diff line number Diff line change
Expand Up @@ -95,15 +95,15 @@ Here, the `v-if` directive would remove/insert the `<p>` element based on the tr
Some directives can take an "argument", denoted by a colon after the directive name. For example, the `v-bind` directive is used to reactively update an HTML attribute:

``` html
<a v-bind:href="url"></a>
<a v-bind:href="url"> ... </a>
```

Here `href` is the argument, which tells the `v-bind` directive to bind the element's `href` attribute to the value of the expression `url`.

Another example is the `v-on` directive, which listens to DOM events:

``` html
<a v-on:click="doSomething">
<a v-on:click="doSomething"> ... </a>
```

Here the argument is the event name to listen to. We will talk about event handling in more detail too.
Expand All @@ -113,7 +113,7 @@ Here the argument is the event name to listen to. We will talk about event handl
Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way. For example, the `.prevent` modifier tells the `v-on` directive to call `event.preventDefault()` on the triggered event:

``` html
<form v-on:submit.prevent="onSubmit"></form>
<form v-on:submit.prevent="onSubmit"> ... </form>
```

You'll see other examples of modifiers later, [for `v-on`](events.html#Event-Modifiers) and [for `v-model`](forms.html#Modifiers), when we explore those features.
Expand All @@ -126,20 +126,20 @@ The `v-` prefix serves as a visual cue for identifying Vue-specific attributes i

``` html
<!-- full syntax -->
<a v-bind:href="url"></a>
<a v-bind:href="url"> ... </a>

<!-- shorthand -->
<a :href="url"></a>
<a :href="url"> ... </a>
```

### `v-on` Shorthand

``` html
<!-- full syntax -->
<a v-on:click="doSomething"></a>
<a v-on:click="doSomething"> ... </a>

<!-- shorthand -->
<a @click="doSomething"></a>
<a @click="doSomething"> ... </a>
```

They may look a bit different from normal HTML, but `:` and `@` are valid chars for attribute names and all Vue.js supported browsers can parse it correctly. In addition, they do not appear in the final rendered markup. The shorthand syntax is totally optional, but you will likely appreciate it when you learn more about its usage later.

0 comments on commit 6b57036

Please sign in to comment.