Vuejs全家桶系列(五)---屬性和方法
vue例項屬性
vm.$el
Vue 例項使用的根 DOM 元素。
console.log(vm.$el === document.getElementById('#app')) //true
console.log(vm.$el);
結果為
vm.$data
Vue 例項觀察的資料物件。Vue 例項代理了對其 data 物件屬性的訪問。
console.log(vm.$data);
console.log(vm.msg);
vm.$options
用於當前 Vue 例項的初始化選項。需要在選項中包含自定義屬性時會有用處:
var vm = new Vue({
el:'#app',
data:{
msg:'hello world'
},
name:"xgb",
age:12,
cs:function(){
console.log("cs");
},
methods:{
one:function(){
console.log("methods one");
}
},
created:function(){
console.log("created");
}
});
console.log(vm.$options);
vm.$refs
一個物件,持有已註冊過 ref 的所有子元件。
<div id="app">
<h2 ref="one">one</h2>
<h2 ref="two">two</h2>
</div>
console.log(vm.$refs);
vue例項方法
vm.$nextTick(callback)
將回調延遲到下次 DOM 更新迴圈之後執行。在修改資料之後立即使用它,然後等待 DOM 更新。
通俗的說就是其內的程式碼會在DOM 更新迴圈完成以後執行
<body>
<div id="app">
<button @click="update">改變</button>
<p ref="word">{{msg}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'hello world'
},
methods:{
update(){
this.msg = 'why';
console.log(this.$refs.word.textContent);
//這裡輸出的是原來的值 hello world,而不是why
//因為js是非同步請求機制的,this.msg的值改變了vue有一個監視的機制,這需要時間(雖然很快,但是console.log更先執行)
}
}
});
</script>
</body>
修改程式碼後
update(){
this.msg = 'why';
vm.$nextTick(function(){
console.log(this.$refs.word.textContent);
})
}
vm.$set(object,key,value)
<body>
<div id="app">
<h2>{{user.name}}</h2>
<h2>{{user.age}}</h2>
<h2>{{user.nek}}</h2>
<button @click="add">新增一個屬性</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
user:{
name:'panini',
age:20
}
},
methods:{
add(){
this.user.nek = "mm";//給user新增一個屬性
}
}
});
</script>
</body>
執行這段程式碼我們本以為在“20”所在行下會出現一行”mm”,但是卻沒有。
可是user.nek明明有值的
console.log(user.nek); //mm
但是卻不顯示出來
<h2>{{user.nek}}</h2>
因為vue有一套資料繫結的規則,我們如果要新增一個屬性按規定必須要知會他一聲,怎麼通知vue呢?我們用set方法
修改程式碼後
add(){
Vue.set(this.user,'nek','mm'); /*這裡用的是全域性api,換成vm.$set也是一樣的*/
}
結果為
vm.$delete(object,key)
類似於set,delete是刪除一個屬性
<body>
<div id="app">
<h2>{{user.name}}</h2>
<h2>{{user.age}}</h2>
<h2>{{user.nek}}</h2>
<button @click="remove">刪除一個屬性</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
user:{
name:'panini',
age:20
}
},
methods:{
remove(){
Vue.delete(this.user,'age');
}
}
});
</script>
</body>
結果為
vm.$watch(data,callback[,options])
一個物件,鍵是需要觀察的表示式,值是對應回撥函式。值也可以是方法名,或者包含選項的物件。Vue 例項將會在例項化時呼叫 $watch(),遍歷 watch 物件的每一個屬性。
通俗來說就是watch監視鍵的狀態,一旦鍵發生變化,就去執行對應的值方法
<body>
<div id="app">
{{msg}}
<button @click="change">改變msg</button>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:"hello world"
},
methods:{
change:function(){
this.msg += "1";
}
},
watch:{
msg:function(newValue,oldValue){
console.log('msg被修改啦,原值:'+oldValue+',新值:'+newValue);
}
}
});
</script>
</body>
一旦我點選”改變msg“按鈕一次,this.msg的值+=”1”,執行watch的鍵msg對應的方法一次。
這裡有很多人會把computed和watch的使用搞混淆。
但是這裡有一個問題:
如果watch監視的鍵是一個物件
<body>
<div id="app">
{{user.name}}
<button @click="change">改變user</button>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
user:{
name:'panini',
age:20
}
},
methods:{
change(){
this.user.name += "1";
}
},
watch:{
user:function(newVal,oldVal){
console.log("user改變了");
console.log(newVal+"and"+oldVal);
}
}
});
</script>
</body>
不論我點選多少次”改變user“按鈕,watch都絲毫不為所動
直到我一怒之下,做了以下的修改
change(){
this.user = {
name: "hhh",
age:18
};
}
watch終於感到了
輸出了以下的語句
user改變了
[object Object]and[object Object]
沒錯newVal和oldVal都是一個物件,到這裡你應該明白了:
如果watch監視的鍵是一個物件,那麼只有當物件的地址改變了,watch才會呼叫對應的值方法
那麼我想當物件的某個屬性變化了就觸發watch有沒有辦法呢?
辦法總是有的!!
請看下面的程式碼
watch:{
user:{
handler:(newValue,oldValue) => {
console.log('user被修改啦,原值:'+oldValue.name+',新值:'+newValue.name);
},
deep:true //深度監視,當物件中的屬性發生變化時也會監視
}
}
現在你明白了watch裡面deep:ture的意義所在了吧
輸出的結果是
user被修改啦,原值:panini1,新值:panini1
怎麼樣,user終於成功被修改了。
咦,不對,等一下。為什麼原值和新值都是panini1啊
那是因為newVal和oldVal都是同一個物件啊!!!