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