| vue | 您所在的位置：网站首页 › vue事件绑定指令是v-on › vue |
|
vue指令
解释：指令 (Directives) 是带有 v- 前缀的特殊属性，可以在html标签中使用，可以看成特殊的html属性
作用：指令提供了一些特殊的功能，当指向绑定到标签上时，可以给标签增加一些特殊的行为
v-bind指令
描述：插值表达式不能用在html的属性上，如果想要动态的设置html元素的属性，需要使用v-bind指令
作用：动态的设置html的属性
语法：v-bind:title="msg"
简写：:title="msg"
复制代码
v-model指令
v-model: cn.vuejs.org/v2/guide/fo… 作用：在表单元素上创建双向数据绑定 说明：监听用户的输入事件以更新数据 思考：如何在JS代码中获取到文本框的值？？？ Message is: {{ message }} 复制代码 双向数据绑定原理 双向数据绑定：将DOM与Vue实例的data数据绑定到一起，彼此之间相互影响 数据的改变会引起DOM的改变 DOM的改变也会引起数据的变化 原理：数据劫持，Object.defineProperty中的get和set方法 getter和setter：访问器 作用：指定读取或设置对象属性值的时候，执行的操作 注意：Object.defineProperty方法是ES5中提供的，IE8浏览器不支持这个方法。因此，Vue支持IE8及其以下版本浏览器 Vue - 深入响应式原理 MDN - Object.defineProperty() /* 语法 */ var obj = {} Object.defineProperty(obj, 'msg', { // 设置 obj.msg 执行的操作 set: function () {}, // 读取 obj.msg 执行的操作 get: function () {} }) 复制代码 Vue双向绑定的极简实现 剖析Vue原理&实现双向绑定MVVM const txt = document.getElementById('txt') const msgBox = document.getElementById('msgBox') const obj = {} // 给对象obj添加msg属性，并设置setter访问器 Object.defineProperty(obj, 'msg', { // 设置 obj.msg 执行的操作 set: function (curVal) { txt.value = curVal msgBox.innerText = curVal } }) // 监听文本框的改变 txt.addEventListener('input', function (event) { obj.msg = this.value }) 复制代码 v-on指令cn.vuejs.org/v2/guide/ev… 作用：绑定事件 语法：v-on:click="say" or v-on:click="say('参数', $event)" 简写：@click="say" 说明：绑定的事件从methods中获取 案例：跑马灯 复制代码 事件修饰符 .stop 阻止冒泡，调用 event.stopPropagation() .prevent 阻止默认行为，调用 event.preventDefault() .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件 .once 事件只触发一次 按键修饰符在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 复制代码 |
| CopyRight 2018-2019 实验室设备网 版权所有 |