vue基础（5）--directive原生指令

import Vue from 'vue'

new Vue({
    el:'#root',
    template:`
        <div>
            <div v-once>Text:{{text}}</div>
            <div v-show="true" v-text="text">Text:{{text}}
                <div v-html="html"></div>                
            </div>
            <button v-on:click="clickEvent"></button>
            <input  type="text" v-model="text"/>
            <input type="checkbox" :value="1" v-model="arr"/>

            <input type="radio" value="one" v-model.number="picked"/>
            <input type="radio" value="one" v-model.lazy="picked"/>
            <input type="radio" value="two" v-model="picked"/>
            <ul>
                <li v-for="(item,index) in arr" :key="item">{{item}}</li>
            </ul>
            <ul>
                <li v-for="(val,key) in obj" :key="val">{{key}}</li>
            </ul>
        </div>`,
    data:{
        text:0,
        active:false,
        html:`<span>this is html`</span>`,
        arr:[1,2,3],
        obj:{
            a:'123',
            b:'456',
            c:'789'
        },
        picked:{
        }
    }
})

比较简单，做个记录

v-text、 v-html、 v-on、 @、 v-show、v-if、v-else、v-for、v-model

1. v-if动态更改dom，引起重绘，耗性能，少用。
   
2. v-for，可用数组，对象。 绑定唯一：key 缓存用
   
3. v-model 绑定dom对象的值 。特殊处理v-model.number、v-model.lazy