Vue獲取dom和資料監聽
阿新 • • 發佈：2018-12-04
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)