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)