###### 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"
    }
})

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