賬號：<input type="type" v-model = "userInfo.account"> <br/><br/>
密碼：<input type="type" v-model = "userInfo.possword"> <br/><br/>

<!-- vue實例中的data數(shù)據(jù) -->
 data:{
	userInfo:{
     	account:'',
         possword:''
     }
 }

性別：
男<input type="radio" name="sex" v-model = "userInfo.sex"  value="male">
女<input type="radio" name="sex" v-model = "userInfo.sex" value="female"> <br/><br/>
    
<!-- vue實例中的data數(shù)據(jù) -->
 data:{
	userInfo:{
     	sex:''
     }
 }

愛好:
學(xué)習<input type="checkbox" v-model = "userInfo.hobby" value="study">
運動<input type="checkbox" v-model = "userInfo.hobby" value="sport">
打游戲<input type="checkbox" v-model = "userInfo.hobby" value="games">  <br/><br/>

<!-- vue實例中的data數(shù)據(jù) -->
 data:{
	userInfo:{
     	hobby:[]
     }
 }

<input type="checkbox" v-model = 'userInfo.agree'>接受并訂閱

<!-- vue實例中的data數(shù)據(jù) -->
 data:{
	userInfo:{
     	agree:''
     }
 }

所屬地區(qū)：
<select v-model="userInfo.city">
    <option value="">請選擇所屬地區(qū)</option>
    <option value="江西">江西</option>
    <option value="廣東">廣東</option>
    <option value="貴州">貴州</option>
    <option value="貴州">湖南</option>
</select> <br/><br/>

<!-- vue實例中的data數(shù)據(jù) -->
 data:{
	userInfo:{
     	city:''
     }
 }

<input type = "text">

<input type = "radio">

 <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>

年齡：<input type="number" v-model.number = "userInfo.age"> <br/><br/>

賬號：<input type="type" v-model.trim = "userInfo.account"> <br/><br/>

v-bind：單向綁定			v-model：雙向綁定 			v-for：遍歷數(shù)組			v-on：監(jiān)聽事件
v-if：條件渲染(控制結(jié)點是否存在)		v-show：條件渲染(控制結(jié)點是否展示)		v-else：配合v-if使用

<div v-text = "name"></div>
<div>{{name}}</div>
<!-- vue實例中的data數(shù)據(jù) -->
data:{
	name:'zhs'
}

<div v-text = "name"></div>
<div>你好，{{name}}</div>

<div v-text = "str"></div>
<!-- vue實例中的data數(shù)據(jù) -->
data:{
	str:"<h3> 你好！</h3>"
}

<div v-text = "str"></div>
<!-- vue實例中的data數(shù)據(jù) -->
data:{
	str:"<a href = "www.baidu.com"> 點我跳轉(zhuǎn)百度</h3>"
}

<style>
    //只有是這個v-clock屬性的都有下面的樣式
	[v-clock]{
    	display:none;
	}    
</style>
<div id = "root">
	<h1 v-clock>{{name}}</h1>
</div>
<!-- vue實例中的data數(shù)據(jù) -->
data:{
	name:'zhs'
}

<div id = "root">
	<h1 v-once>初始值為：{{n}}</h1>
    <h1>當前n的值為：{{n}}</h1>
    <button @click="n++">點我n+1</button>
</div>
<!-- vue實例中的data數(shù)據(jù) -->
data:{
	n:1
}

<div id = "root">
	<h1 v-pre>vue其實很簡單</h1>
    <h1>當前n的值為：{{n}}</h1>
    <button @click="n++">點我n+1</button>
</div>
<!-- vue實例中的data數(shù)據(jù) -->
data:{
	n:1
}

<div id="root">
    <h1>當前元素的值是：<span v-text = "n"></span></h1>
    <h1>放大10倍后的值是：<span v-big = "n"></span></h1>
    <button @click="n++">點我n+1</button>
</div>

<script type="text/javascript" >
    Vue.config.productionTip = false    //阻止vue啟動時提示生產(chǎn)提示
    new Vue({
        //指定當前實例為哪個容器服務(wù)，id對應(yīng)#，class對應(yīng).
        el:'#root',
        //data用于存儲數(shù)據(jù)，只有el對應(yīng)的容器可以使用
        data:{
            n:1
        },
        directives:{
            // element：一個真實的dom元素span
            // binding：標簽和元素之間的綁定，即span和這個big之間的綁定           
            big(element,binding){
                //修改元素里面的值
                element.innerText = binding.value * 10;
                console.log(element,binding)
            }
        }
    })
</script>

<div id="root">
    <input type="text" v-fbind:value = "n">
</div>

<script type="text/javascript" >
    Vue.config.productionTip = false    //阻止vue啟動時提示生產(chǎn)提示
    new Vue({
        //指定當前實例為哪個容器服務(wù)，id對應(yīng)#，class對應(yīng).
        el:'#root',
        //data用于存儲數(shù)據(jù)，只有el對應(yīng)的容器可以使用
        data:{
            n:1
        },
        directives:{
            fbind:{
                //指令與元素成功綁定時
                bind(element,binding){
                    element.value = binding.value * 10
                },
                //指令所在元素被插入頁面時
                inserted(element,binding){
                    element.focus();
                },
                //指令所在的模板被重新解析時被調(diào)用 
                update(element,binding){
                    element.value = binding.value * 10
                }
            }
        }
    })
</script>

//Vue.directive(指令名，回調(diào)函數(shù))
Vue.directives("big",function(element,binding){
   //修改元素里面的值
   element.innerText = binding.value * 10;
   console.log(element,binding)
)

//Vue.directive(指令名，配置對象)
Vue.directives("fbind",fbind:{
    //指令與元素成功綁定時
    bind(element,binding){
        element.value = binding.value * 10
    },
    //指令所在元素被插入頁面時
    inserted(element,binding){
        element.focus();
    },
    //指令所在的模板被重新解析時被調(diào)用 
    update(element,binding){
        element.value = binding.value * 10
    }
})