VUE学习笔记--侦听器

简介: VUE学习笔记--侦听器

watch侦听器

watch侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作

语法格式:

const v = new Vue({
            el: "#app",
            data: {
                username: ''
            },
            watch: {
                //监听username的变化
                // newVal变化之后的值,oldVal变化之前的值
                username( newVal, oldVal ) {
                    console.log(newVal, oldVal);
                }
            }
        })

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="username">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const v = new Vue({
            el: "#app",
            data: {
                username: ''
            },
            watch: {
                //监听username的变化
                // newVal变化之后的值,oldVal变化之前的值
                username( newVal, oldVal ) {
                    console.log(newVal, oldVal);
                }
            }
        })
    </script>
</body>
</html>

侦听器注意点

1.所有的侦听器要定义在watch节点下

2.侦听器本质为函数,要监视哪个数据的变化就把数据名作为方法名即可

3.侦听器的参数,新值在前,旧值在后

对象格式的侦听器

对象格式的侦听器可以通过immediate让侦听器自动触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="username">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const v = new Vue({
            el: "#app",
            data: {
                username: '1'
            },
            watch: {
                // 对象格式的侦听器
                username: {
                    // 侦听器的处理函数
                    handler(newVal, oldVal) {
                        console.log(newVal, oldVal);
                    },
                    // 默认值为false,要一开始就触发,值填true
                    immediate: true
                }
            }
        })
    </script>
</body>
</html>

深度侦听

侦听的是一个对象,对象中的属性发生变化不会触发侦听器

解决:

1.开启深度监听,只要对象中的属性发生变化就会触发侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="info.username">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const v = new Vue({
            el: "#app",
            data: {
                // 用户信息对象
                info: {
                    username: '1'
                }
            },
            watch: {
                // 对象格式的侦听器
                info: {
                    // 侦听器的处理函数
                    handler(newVal) {
                        console.log(newVal);
                    },
                    // 开启深度侦听
                    deep: true
                }
            }
        })
    </script>
</body>
</html>

2.侦听对象的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="info.username">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const v = new Vue({
            el: "#app",
            data: {
                // 用户信息对象
                info: {
                    username: '1'
                }
            },
            watch: {
                //侦听对象的属性
                //侦听对象的属性,必须包裹单引号
                'info.username'(newVal, oldVal) {
                    console.log(newVal, oldVal);
                }                
            }
        })
    </script>
</body>
</html>



相关文章
|
1天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
12 6
|
1天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
12 4
|
1天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
9 1
|
1天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
12 1
|
1天前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
8 0
|
缓存 JavaScript
初识 Vue(09)---(计算属性、方法、侦听器)
计算属性 计算属性的值是一个函数,并且是内置缓存的; 示例: 计算属性、方法、侦听器 {{fullName}} {{age}} var vm = new Vue({ ...
1122 0
|
6天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
19 1
|
7天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
|
7天前
|
JavaScript
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
|
7天前
|
JavaScript
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run