洛飞 - 博客园

2024年8月15日

摘要：使用v-model指令实现双向数据绑定的集合 v-model是v-on和v-bind指令的语法糖（指令集合）可以使用v-model指令在表单 input、textarea、select等元素上创建双向数据绑定，他会根据控件类型自动选取正确的方法来更新元素。加上v-model后，只要视图的数据发生阅读全文

posted @ 2024-08-15 10:35 洛飞阅读(110) 评论(0) 推荐(0)

vue按键修饰符

摘要：事件的类型有以下四类： js事件分为四类：鼠标事件：click、mouseover、dbclick、mousedown、mouseout... 键盘事件：keydown、keypress、keyup.. 窗体事件:load、reseize、scroll... 表单事件:blur、focus、inp 阅读全文

posted @ 2024-08-15 09:09 洛飞阅读(40) 评论(0) 推荐(0)

2024年8月14日

vue事件修饰符

摘要：我们用vue中的事件修饰符来做上一篇中event.preventDefault() 阻止事件的默认行为和event.stopPropagation() 阻止事件冒泡、传播事件。 <div id="app"> <div @click="outer" id="outer"> <div @click="m 阅读全文

posted @ 2024-08-14 20:43 洛飞阅读(78) 评论(0) 推荐(0)

原生js的事件流

摘要：原来js中的事件： event.preventDefault() 阻止事件的默认行为 event.stopPropagation() 阻止事件冒泡、传播事件流的定义：浏览器对于事件触发的执行流程有下面三个div，他们是嵌套关系。如果每个div都触发了点击事件，那么是从内向外触发还是从外向内触阅读全文

posted @ 2024-08-14 16:15 洛飞阅读(16) 评论(0) 推荐(0)

Vue事件处理

摘要：点击按钮的时候，次数加一第一种：在click里面直接写js的代码需求：使用@click=“counter+=1”,代码如下： <button type="button" @click="counter+=1">按钮1</button> <p>按钮1被点击的次数:{{counter}}</p> 第阅读全文

posted @ 2024-08-14 15:28 洛飞阅读(38) 评论(0) 推荐(0)

2024年8月13日

vue事件绑定

摘要：为元素添加属性命令：v-on:事件名=“方法名”，而方法则需要再Vue配置里面的methods属性里定义。主要的事件名有click、dbclick，mouseover，mouseout，keydown，keypress，blur，focus <button v-on:click="fn1">我是阅读全文

posted @ 2024-08-13 22:18 洛飞阅读(30) 评论(0) 推荐(0)

vue使用JavaScript运算符

摘要：第一：加法运算符{{变量+n}} <p> num参与运算{{num+12}} </p> let vm = new Vue({ el : "#app", data : { num: 101, isOK: true, message: '你好', lan: 'Java', id: '1001', } } 阅读全文

posted @ 2024-08-13 20:45 洛飞阅读(47) 评论(0) 推荐(0)

vue绑定属性的指令

摘要：前面学习的插值表达式{{}}，并不能更改标签的属性。因此，以下的写法是错误的， <h1 titlle="{{title}}" >我是h1标签的内容</h1> 如果想要给标签的属性绑定动态值,需要借助v-bind 的指令语法：v-bind:原生HTML标签的属性="data中定义的值"，可以在vsc 阅读全文

posted @ 2024-08-13 20:02 洛飞阅读(42) 评论(0) 推荐(0)

vue---v-text和v-html绑定数据指令

摘要： <p>  <span v-text="msg"></span> <!-- v-html的用法和v-text用法一直，只不过通过v-html引入的会被阅读全文

posted @ 2024-08-13 16:09 洛飞阅读(23) 评论(0) 推荐(0)

vue ---- {{}}插值表达式数据绑定

摘要：数据绑定常用有4种方式:{{}}、v-text、v-html、template {{}}数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值： <span>message:{{msg}}</span> mustache标签会被替代为对应数据对象航msg property的值阅读全文

posted @ 2024-08-13 15:55 洛飞阅读(84) 评论(0) 推荐(0)

洛飞

公告