Vue的学习 |
您所在的位置:网站首页 › vue绑定事件的指令是什么 › Vue的学习 |
一、Vue的基本使用步骤
1.需要提供标签用于填充数据 2.引入vue.js库文件 3.可以使用vue的语法库做功能 4.把vue提供的数据填充到标签里面 {{msg}} var vm = new Vue({ el:'#app' ,data:{ msg:' Hello,vue' } }) 结果图:1.el: 元素挂在位置(值可以是css选择器或者DOM元素) 2.data: 模型数据(值是一个对象) 3.{{}}: 差值表达式 将数据填充到HTML标签中差值表达式支持基本的计算操作4.概述编译过程概念(Vue语法->vue框架(编译)->原生语法) 三、Vue模板语法 1.如何理解前端渲染?把数据填充到HTML标签中 2.前端渲染方式 原生js拼接字符串 -基本上就是将数据以字符串的方式拼接到HTML标签中。 -![]() ![]() 1、什么是指令 什么是自定义属性指令的本质就是自定义属性指令的格式:以v-开始(比如v-cloak)2、v-cloak指令的用法 差值表达式存在的问题:“闪动”(在页面有些卡的时候,会先显示{{}},之后进行替换) 如何解决该问题:使用v-cllock指令 解决该问题的原理:先隐藏,替换好值之后再最终显示最终的值 [v-cloak]{ display: none; } {{msg}}v-cloak指令的用法 1.提供样式 [v-cloak]{ display: none; } 2.在差值表达式所在的标签中添加v-cloak指令 原理:先通过样式隐藏内容,然后再内存中进行替换,替换好之后在显示最终的结果。 3、数据绑定指令 v-text 填充纯文本 相比表达式更加简洁v-html 填充HTML片段 存在安全问题,容易导致XSS攻击 本站内数据可以使用,来自第三方的数据不可用v-pre 填充原始信息 显示原始信息,跳过编译过程(分析编译过程),得到{{msg}} 数据响应式 如何理解响应式 html中的响应式(屏幕尺寸的变化导致样式的变化) 数据的响应式(数据的变化导致页面内容的变化)什么是数据绑定 数据绑定:将数据填充到标签中v-once只编译一次 显示内容之后不再具有响应式功能 应用场景:如果显示的信息后续不需要再修改,可以使用v-once,提高性能 3.3 双向数据绑定1、什么是双向数据绑定 数据到页面,用户改内容影响模块 2、MVVM思想 M(model) 用到的数据V(view) 写的DOM元素VM(view-Model) 俩者结合,视图模型,实现控制 3.4事件绑定1.Vue如何处理事件 v-on指令 加一v-on简写形式 加一2、事件函数的调用 直接绑定函数名称 调用函数 加一1 加一2 //js代码 ,methods:{ handle:function () { console.log(this === vm); //true,这里的this是Vue实例化的对象 this.num++; }3、事件函数传参 普通参数和事件对象 加一1 加一2 //---------函数------------- ,methods:{ handle1:function (p,p1,event){ // console.log(this === vm); //true,这里的this是Vue实例化的对象 console.log(p,p1,event.target.innerHTML); this.num++; } ,handle2:function (event) { console.log(event.target.innerHTML) }事件绑定–参数传递 1.如果事件直接绑定函数名,那么默认会传递事件对象作为事件函数的第一个参数 2.如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,并且事件对象的 名称必须是$event 4、事件修饰符 . stop阻止冒泡 当div增加点击事件每次增加1,而不想div中按钮也附加这个加1功能。 //vue提供的事件修饰符 ,handle0:function (event) { this.num++; } 加一1麻烦一点的方法 ,handle2:function (event) { console.log(event.target.innerHTML) //阻止冒泡 event.stopPropagation(); }prevent阻止默认行为 原始方法 ,handle3:function (event) { //阻止默认行为 event.preventDefault(); } vue简化: 百度capture - 添加事件侦听器时使用 capture 模式。 self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 {keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。 native - 监听组件根元素的原生事件。 .once - 只触发一次回调。 left - (2.2.0) 只当点击鼠标左键时触发。 right - (2.2.0) 只当点击鼠标右键时触发。 middle - (2.2.0) 只当点击鼠标中键时触发。 passive - (2.3.0) 以 { passive: true } 模式添加侦听器 5、按键修饰符 用户名: 密码: var vm = new Vue({ el:'#app' ,data:{ uname:'' ,pwd:'' } ,methods:{ handleSubmit:function () { console.log(this.uname,this.pwd) } ,clear:function () { //按delete键清空用户名 this.uname='' } } })6、自定义按键 //函数 ,handle:function (event) { console.log(event.target.value) } //每个值是键盘按钮的唯一标识 Vue.config.keyCodes.aaa = 65;案例:简单计算器 实现简单的加法计算,分别输入a和b,点击按钮,结果显示在下面 简单计算器 数值A: 数值B: 计算加法 计算结果: var vm = new Vue({ el:'#app' ,data:{ num1:'' ,num2:'' ,result:'' } ,methods:{ add2:function () { this.result = parseInt(this.num1 )+ parseInt(this.num2) } } }) |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |