Vue獲取dom對象
在js和jq中我們都能獲取dom對象例如
// 獲取id=1的div標簽
<div id=d1>dom對象</div>
// js語法
let ele = document.getElementById('d1')
// jq語法
let ele = $('#d1')
那么在vue中也有實現該功能的語法，使用方法，在vue組件中，給目標標簽添加上ref屬性，然后在vue組件實例中調用方法去獲取dom對象：
<body>
<div id='app'>
// 給目標標簽添加上ref屬性並賦值
<div ref='mydiv'></div>
// 給按鈕綁定點擊事件觸發myclick函數
<button @click='myclick'>點我給div添加內容</button >
</div>
// script部分
<script>
//創建一個Vue對象
const app = new Vue(
{
// 找到組件作用域
el:'#app',
methods:{
myclick:function(){
// this.$refs.目標標簽ref的屬性值就能找到dom對象
let ele = this.$refs.mydiv;
// 給dom對象添加文本內容
ele.innerText='kingfan';
}
}
}
)
</script>
</body>
這樣在點擊button按鈕后就執行myclick對應的函數，this.$refs.目標標簽ref的屬性值就能找到dom對象，然后利用原生的js語法就可以對目標標簽進行操作
Vue 數據監聽
在vue中數據監聽（watch）是指在監聽數據發生變化時會觸發相應的監聽函數，但監聽的數據類型不同會有不同的現象值得我們去注意。
我們現在拿字符串、對象、數組這三個數據類型去舉例：
監聽字符串
<body>
<div id='app'>
// h1引用組件name數據
<div><h1 v-text="name"></h1></div>
// 按鈕點擊事件綁定vue方法
<button @click="myclick">點我</button>
</div>
<script>
//創建一個Vue對象
const app = new Vue(
{
el:'#app',
data:{
name:'kingfan',
},
methods:{
myclick:function () {
this.name='fanking';
}
},
// 監聽對象,接受data字段為監聽對象，handler在監聽對象變化后執行函數
watch: {
name:{
handler:function (val,oldval) {
// function接受兩個參數
console.log('修改后',val,'修改前',oldval);
}
}
}
}
)
</script>
</body>
現象：在點擊按鈕之前頁面顯示king,點擊之后顯示fanking,並看到console.log('修改后',val,'修改前',oldval)打印修改前后的數值，說明vue能監聽到字符串的變化
監聽數組
<body>
<div id='app'>
{{hobby}}
<button @click="myclick">點我</button>
</div>
<script>
//創建一個Vue對象
const app = new Vue(
{
el:'#app',
data:{
hobby:['吃飯','睡覺','擼代碼']
},
methods:{
myclick:function () {
this.hobby.push('打游戲');
}
},
watch: {
hobby:{
handler:function (val,oldval) {
console.log('修改后',val,'修改前',oldval);
}
}
}
}
)
</script>
</body>
可以看到監聽到了數組的長度的變化，但是打印出來的前后值為什么是相同的呢？，這個和python中列表是可變數據類型的原理一樣
監聽數組元素修改
<body>
<div id='app'>
{{hobby}}
<button @click="myclick">點我</button>
</div>
<script>
//創建一個Vue對象
const app = new Vue(
{
el:'#app',
data:{
hobby:['吃飯','睡覺','擼代碼']
},
methods:{
myclick:function () {
this.hobby.push('打游戲');
}
},
watch: {
hobby:{
handler:function (val,oldval) {
console.log('修改后',val,'修改前',oldval);
}
}
}
}
)
</script>
</body>
可以看到vue並不能監聽到數組的元素變化。這是我們就用到另外的方法修改數組元素:
this.$set(this.hobby,0,'打游戲');
//或者
Vue.set(this.hobby,0,'打游戲')
監聽對象
監聽對象就不做詳細演示了，只要知道只能監聽到對象value的變化，而不能監聽到對象key的增加
這時增加和刪除key要用到：
// 增加
this.$set(this.obj,key,value);
// 刪除
Vue.delete(this.obj,key)