vue.js的常用指令

1、v-html 、v-text
標籤內繫結內容，v-html可以顯示含有標籤的
2、v-model
一般用在表達輸入，很輕鬆的實現表單控制元件和資料的雙向繫結
3、v-show
他跟元素的顯示和隱藏有關係,v-show指令取值為true/false，分別對應著顯示/隱藏
4、v-if 、v-else-if、v-else

<div id="app-3"v-bind:title='tit'>
     <p v-if="seen">現在你看到我了if</p>
     <p v-else-if="seen2"
 
>現在你看到我了elseif</p>
     <p v-else>現在你看到我了else</p>
</div>

script:

var app3 = new Vue({
        el: '#app-3',
        data: {
            seen: false,
            seen2:true,
            tit:'標題資訊'
        }
    })

5.v-on : 繫結事件
v-on : click 可以簡寫為@click,@繫結一個事件。
6.v-once 只渲染一次

<div id="app-7">
    <input type="text" v-model='mg'/>
    <p v-once>{{mg}}</p>
</div>

<script>
    var app7 = new Vue({
        el: '#app-7',
        data: {
            mg: 'hello vue!'
        }
    })

7.v-bind: 繫結屬性
可以直接簡寫為 ： 這樣的方式然後繫結動態屬性比較常見的有a標籤的href,img標籤的src。
8.v-for
把陣列的值展現到檢視上

<div id="app-4">
    <ul>
        <li v-for="(todo,index) in todos">
            {{ index+':'+todo.text }}
        </li>
    </ul>
</div>

<script>
    var app4 = new Vue({
        el: '#app-4',
        data: {
            todos: [
                {text: '學習 JavaScript'},
                {text: '學習 Vue'},
                {text: '整個牛專案'}
            ]
        }
    })