| Vue的学习 | 您所在的位置：网站首页 › 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标签中。 - 缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难。使用前端模板引擎 右侧代码是居于模板art-template的一段代码，与字符串拼接 相比，代码明显规范许多，拥有一套自己的模板语法规则。 
3.vue模板语法概念
差值表达式指令时间绑定属性绑定样式绑定分支循环结构
3.1指令
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) } } }) |
【本文地址】