摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>偵聽(tīng)器/觀察者/監(jiān)聽(tīng)器</t
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>偵聽(tīng)器/觀察者/監(jiān)聽(tīng)器</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
用戶(hù)名: <input type="text" v-model="username"><br> <!--雙向綁定-->
<h3>{{length}}</h3>
<!--v-show="變量"指令,true顯示,false不顯示-->
<h3 v-show="isShow" :style="warning">{{message}}</h3>
<h4 @click="changeColor" :style="danger">{{message1}}</h4>
<p>雙向綁定:{{username}}</p>
</div>
<script>
new Vue({
//掛載點(diǎn)
el:'#box',
//創(chuàng)建了一個(gè)數(shù)據(jù)模型
data:{
username:'',
length:0,
message:'用戶(hù)名太短了',
message1:'測(cè)試文章',
isShow : false,
warning:'color:red',
danger:'color:blue'
},
methods:{
changeColor:function () {
this.danger="color:green";
}
},
//watch偵聽(tīng)器，監(jiān)聽(tīng)是頁(yè)面中的變量值的變化
watch:{
username:function () {
this.length++;
if(this.length<6){
this.isShow = true;
}else{
this.isShow = false;
}
}
}
})
</script>
</body>
</html>總結(jié)如下
使用Vue 先要new一個(gè)Vue對(duì)象
new Vue({
el:'#contents', //el 綁定掛載點(diǎn),值為選擇器,實(shí)測(cè)class 自定義屬性也可以
data:{ //數(shù)據(jù)對(duì)象,就是Model,里面是數(shù)據(jù)
message1:'Vuej.js開(kāi)發(fā)基礎(chǔ)',
message2:'<h3 style="lightblue">php中文網(wǎng)加油!</h3>',
info:'html+css',
isShow : false,
warning:'color:red',
},
methods:{ //事件綁定: @事件名稱(chēng) = "方法名"
changeColor:function () { //事件綁定的方法
this.danger="color:green";
}
},
})掛載點(diǎn)el: "選擇器"
變量: {{變量名}}插值 或者v-text(不解析html) v-html(解析html)
data:{} 就是model層 ,數(shù)據(jù)模型
methods:{method:function(){....}}事件綁定 @事件名="method方法名"
input有一個(gè)特點(diǎn):既可以顯示內(nèi)容，也可以輸入內(nèi)容/更新內(nèi)容
雙向綁定:用頁(yè)面中變量?jī)?nèi)容內(nèi)容來(lái)更新數(shù)據(jù)模型model中的數(shù)據(jù)
v-model="變量名" <input type="text" v-model="info">
{{info}}
watch:{
變量名:function(){
....... //執(zhí)行方法 this指向data數(shù)據(jù)
}
} 監(jiān)聽(tīng)頁(yè)面中變量值的變化
批改老師：韋小寶批改時(shí)間：2018-11-12 15:47:20
老師總結(jié)：代碼很完整??！總結(jié)的也很不錯(cuò)！繼續(xù)保持哦??！加油?。。?