Vue獲取dom和數據監聽

時間 2019-11-09

標籤 vue 獲取 dom 數據監聽欄目 HTML 简体版

原文原文鏈接

Vue獲取dom對象

在js和jq中咱們都能獲取dom對象例如vue

// 獲取id=1的div標籤
<div id=d1>dom對象</div>

// js語法
let ele = document.getElementById('d1')
// jq語法
let ele = $('#d1')

那麼在vue中也有實現該功能的語法，使用方法，在vue組件中，給目標標籤添加上ref屬性，而後在vue組件實例中調用方法去獲取dom對象：python

<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）是指在監聽數據發生變化時會觸發相應的監聽函數，但監聽的數據類型不一樣會有不一樣的現象值得咱們去注意。
咱們如今拿字符串、對象、數組這三個數據類型去舉例：app

監聽字符串

<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能監聽到字符串的變化
dom

監聽數組

<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

this.$set(this.hobby,0,'打遊戲');
//或者
Vue.set(this.hobby,0,'打遊戲')

監聽對象

監聽對象就不作詳細演示了，只要知道只能監聽到對象value的變化，而不能監聽到對象key的增長
這時增長和刪除key要用到：code

// 增長
this.$set(this.obj,key,value);
// 刪除
Vue.delete(this.obj,key)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。