---
# System prepended metadata

title: Vue
tags: [notes]

---

###### tags: `notes`

# Vue

## Introduction

## Directive

Directive in Vue are prefixed with ```v-```

### Declarative Rendering ```v-bind:<attribute>```
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.
* Ex1
```
//HTML
<div id="app-1" v-bind:title="msg">
    <span v-bind:style="style">Hover me to get greeting</span>
<div>

//Vue
var app1 = new Vue({
    el: "#app-1",
    data: {
        msg: "hello",
        style: "color: red"
    }
})
```
* Ex2
```
//HTML
<div id="app-2">{{message}}<div>

//Vue
var app2 = new Vue({
    el: "#app-2",
    data: {
        message: "hello"
    }
})
```
#### Difference of v-text, {{}}, and v-html

In most cases, v-text and {{}} will render the same result
Usage:
```
//HTML
<div id="app">{{msg}}</div>
<div id="app" v-text="msg"></div>

//Vue
var app = new Vue({
    el: "#app",
    data: {
        msg: "hello"
    }
})
```

However, if there's another tag inside this ```#app```, it will be covered by ```v-text```. In other words, v-text will replace all elements inside this element.

```
//HTML
<div id="app" v-text="msg">
    <span>This will disappear</span>
</div>

//Vue
var app = new Vue({
    el: "#app",
    data: {
        msg: "this will be shown"
    }
})
```

```v-html``` could show html syntax, but ```v-text``` and {{}} will include tags.

For example, 

```
//HTML
<div id="app">
    <div v-text="html"></div>
    <div>{{html}}</div>
    <div v-html="html"></div>
</div>

//Vue
var app = new Vue({
    el: "#app",
    data: {
        html: "<div>This uses HTML syntax.</div>"
    }
})
```
Result:
![](https://i.imgur.com/EqcAZXL.png)


### Conditions ```v-if```
```
//HTML
<div id="app-3" v-if="seen">You can see me now</div>

//Vue
var app3 = new Vue({
    el: "#app-3",
    data: {
        seen: true
    }
})
```
### Loops ```v-for```
```
//HTML
<div id="app-4">
    <ol>
        <li v-for="todo in todos"></li>
    </ol>
</div>

//Vue
var app4 = new Vue({
    el: "#app-4",
    data: {
        todos: [
          {text: 'Learn Vue'},
          {text: 'Learn PHP'},
          {text: 'Learn Docker'}
        ]
    }
})
```

### Event Handling ```v-on```
Another example is the v-on directive, which listens to DOM events
```
<a v-on:click="doSomething"> ... </a>
```
## Reference
https://ithelp.ithome.com.tw/articles/10202232