学习day48

事件的基本使用:

            1.使用v-on:xxx或@xxx绑定事件,其中xxx是事件名

            2.事件的回调需要配置在methods对象中,最终会在vm上

            3.methods中配置的函数,不要用箭头函数!否则this就不是vm了

            4.methods中配置的函数,都是被Vue所管理的函数,this指向的是vm或组件实例对象

            5.@click=“demo”和@click="demo($event)"效果一致,但后者可以传参

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue中数据代理</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 事件的基本使用:1.使用v-on:xxx或@xxx绑定事件,其中xxx是事件名2.事件的回调需要配置在methods对象中,最终会在vm上3.methods中配置的函数,不要用箭头函数!否则this就不是vm了4.methods中配置的函数,都是被Vue所管理的函数,this指向的是vm或组件实例对象5.@click=“demo”和@click="demo($event)"效果一致,但后者可以传参--><div id="root"><h2>欢迎来到{{name}}学习</h2><button v-on:click="showInfo">点我提示信息(不传参)</button><button @click="showInfo2(66,$event)">点我提示信息(传参)</button></div></body>
<script type="text/javascript">Vue.config.productionTip=falseconst vm = new Vue({el:"#root",data:{name:'尚硅谷',  },methods:{showInfo(){alert('同学你好!')},showInfo2(number,event){console.log(number,event)//alert('同学你好!!')}}})</script></html>

Vue中的事件修饰符:

          1.prevent:阻止默认事件(常用)

          2.stop:阻止事件冒泡(常用)

          3.once:事件只触发一次(常用)

          4.capture:使用事件的捕获模式

          5.self:只有event,target是当前操作的元素是才触发事件

          6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件修饰符</title><script type="text/javascript" src="../js/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: blue;}.box1{padding: 5px;background-color: skyblue;}.box2{padding: 5px;background-color: orange;}</style>
</head>
<body><!-- Vue中的事件修饰符:1.prevent:阻止默认事件(常用)2.stop:阻止事件冒泡(常用)3.once:事件只触发一次(常用)4.capture:使用事件的捕获模式5.self:只有event,target是当前操作的元素是才触发事件6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕--><div id="root"><h2>欢迎来到{{name}}学习</h2><!-- 1.prevent:阻止默认事件(常用) --><a href="http://www.atguigu.com" @click="showInfo">点我提示信息</a><!-- 2.stop:阻止事件冒泡(常用) --><div class="demo1" @click="showInfo"><button @click.stop="showInfo">点我提示信息</button></div><!-- 3.once:事件只触发一次(常用) --><button @click.once="showInfo">点我提示信息</button><!--  4.capture:使用事件的捕获模式 --><div class="box1" @click.capture="showMsg(1)">div1<div class="box2" @click="showMsg(2)">div2</div></div></div></body>
<script type="text/javascript">Vue.config.productionTip=falseconst vm = new Vue({el:"#root",data:{name:'尚硅谷',},methods:{showInfo(e){//e.preventDefault()e.stopPropagation()alert('同学你好')},showMsg(number){console.log(number)}}})</script></html>

1.Vue中常用的按键别名

          回车:enter

          删除:delete(捕获“删除”和“退格”)

          退出:esc

          空格:space

          换行:tab

          上:up

          下:down (特殊,配合keydown使用)

          左:left

          右:right

        2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,弹药注意转为kebab-case(短横线命名)

        3.系统修饰键(用法特殊):ctrl,alt,shift,meta

          (1).配合keyup使用,按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发

          (2).配合keydown使用:正常触发事件

        4.也可以使用keyCode去指定具体的按键

        5。Vue.config.keyCodes 自定义键名=键码,可以去定制按键别名

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>键盘事件</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 1.Vue中常用的按键别名回车:enter删除:delete(捕获“删除”和“退格”)退出:esc空格:space换行:tab上:up下:down (特殊,配合keydown使用)左:left右:right2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,弹药注意转为kebab-case(短横线命名)3.系统修饰键(用法特殊):ctrl,alt,shift,meta(1).配合keyup使用,按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发(2).配合keydown使用:正常触发事件4.也可以使用keyCode去指定具体的按键5。Vue.config.keyCodes 自定义键名=键码,可以去定制按键别名--><div id="root"><h2>欢迎来到{{name}}学习</h2><input type="text" placeholder="按下回车提示输入" @keyup.ctrl="showInfo"></div></body>
<script type="text/javascript">Vue.config.productionTip=falseconst vm = new Vue({el:"#root",data:{name:'尚硅谷',},methods:{showInfo(e){console.log(e.target.value)}}})</script></html>

计算属性:

            1.定义:要用的属性不存在,要通过已有的属性计算得来

            2.原理:底层借助了Object.defineproperty方法提供getter和setter

            3.get函数什么时候执行?

                (1)初次读取时会执行一次,

                (2)当依赖的数据发生改变时,会再次调用

            4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便

            5.备注

               1.计算属性最终会出现在vm上,直接读取即可

               2.如果计算属性要被修改,那必须写set函数去响应,且set中要引起计算时依赖的数据发生改变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>姓名案例_计算属性实现</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 计算属性:1.定义:要用的属性不存在,要通过已有的属性计算得来2.原理:底层借助了Object.defineproperty方法提供getter和setter3.get函数什么时候执行?(1)初次读取时会执行一次,(2)当依赖的数据发生改变时,会再次调用4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便5.备注1.计算属性最终会出现在vm上,直接读取即可2.如果计算属性要被修改,那必须写set函数去响应,且set中要引起计算时依赖的数据发生改变--><div id="root">姓:<input type="text" v-model="firstName"><br>名:<input type="text" v-model="lastName"><br>测试:<input type="text" v-model="x"><br>全名:<span>{{fullName}}</span></div></body>
<script type="text/javascript">Vue.config.productionTip=falseconst vm= new Vue({el:"#root",data:{firstName:'张',lastName:'三' ,x:'你好'},computed:{fullName:{//get有什么作用?当有人读取fullName时,get被调用,且返回值就作为fullName的值//get什么时候调用? 1.初次读取fullName时。 2.所依赖的数据发生变化时get(){console.log('get被调用了')// console.log(this)  此处的this为vmreturn this.firstName +'-'+this.lastName},//set(value){console.log('set',value)const arr=value.split('-')this.firstName=arr[0]this.lastName=arr[1]}}}})</script></html>

监视属性watch:

          1.当被监视的属性变化时,回调函数自动调用,进行相关操作

          2.监视的属性必须存在,才能进行监视

          3.监视的两种写法:

              (1)new Vue传入watch配置

              (2)通过vm.$watch监视

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>天气案例_监视属性</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 监视属性watch:1.当被监视的属性变化时,回调函数自动调用,进行相关操作2.监视的属性必须存在,才能进行监视3.监视的两种写法:(1)new Vue传入watch配置(2)通过vm.$watch监视--><div id="root"><h2>今天天气{{info}}</h2><button @click="changeWeather">切换天气</button></div></body>
<script type="text/javascript">Vue.config.productionTip=falseconst vm = new Vue({el:"#root",data:{isHot:true},computed:{info(){return this.isHot ? '炎热' : '凉爽'}},methods: {changeWeather(){this.isHot=!this.isHot}},// watch:{//     isHot:{//         immediate:true, //初始化时,让handler调用一下//         //handler什么时候调用? 当isHot发生改变时//         handler(newValue,oldValue){//             console.log('isHot被修改了',newValue,oldValue)//         }//     }// }})vm.$watch('isHot',{handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}})</script></html>

深度监视:

          (1).Vue中的watch默认不监测对象的内部值的改变(一层)

          (2)配置deep:true可以监测对象内部值的改变(多层)

        备注:

          (1)Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以

          (2)使用watch时根据根据的具体结构,决定是否采用深度监视

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>天气案例_监视属性</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 深度监视:(1).Vue中的watch默认不监测对象的内部值的改变(一层)(2)配置deep:true可以监测对象内部值的改变(多层)备注:(1)Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以(2)使用watch时根据根据的具体结构,决定是否采用深度监视--><div id="root"><h2>今天天气{{info}}</h2><button @click="changeWeather">切换天气</button><hr><h3>a的值时:{{numbers.a}}</h3><button @click="numbers.a++">点我让a+1</button><h3>b的值时:{{numbers.b}}</h3><button @click="numbers.b++">点我让b+1</button></div></body>
<script type="text/javascript">Vue.config.productionTip=falseconst vm = new Vue({el:"#root",data:{isHot:true,numbers:{a:1,b:2}},computed:{info(){return this.isHot ? '炎热' : '凉爽'}},methods: {changeWeather(){this.isHot=!this.isHot}},watch:{isHot:{//immediate:true, //初始化时,让handler调用一下//handler什么时候调用? 当isHot发生改变时handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}},//监视多级结构中某个属性的变化// 'numbers.a':{//     handler(){//         console.log('a被改变了')//     }// }numbers:{deep:true,handler(){console.log('numbers改变了')}}}})</script></html>

今天差不多到这里了,感觉前端真的东西很多。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/2049.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【计算机视觉】DINOv2(视觉大模型)代码四个不同模型的对比,以 28 * 28 的图像为例(完整的源代码)

文章目录 一、ViT-S/14二、ViT-B/14三、ViT-L/14四、ViT-g/14 一、ViT-S/14 import torch import torchvision.transforms as T import matplotlib.pyplot as plt import numpy as np import matplotlib.image as mpimg from PIL import Image from sklearn.decomposition im…

golang之json注释处理

场景 json 作为现代比较常用的文本格式,本身是不支持注释的,因为它的设计初衷是作为一种轻量级数据交换格式,只需要包含数据本身,而不应该包含注释或者其他无关的信息。 但是有时json内字段较多,想写一些注释说明,这些都是编程工具或者编辑器特有的功能,常见的注释如下…

ES系列--es进阶

一、系统架构 一个运行中的 Elasticsearch 实例称为一个节点&#xff0c;而集群是由一个或者多个拥有相同 cluster.name 配置的节点组成&#xff0c; 它们共同承担数据和负载的压力。当有节点加入集群中或者 从集群中移除节点时&#xff0c;集群将会重新平均分布所有的数据。 …

准备WebUI自动化测试面试?这30个问题你必须掌握(一)

本文共有8600字&#xff0c;包含了前十五个问题&#xff0c;如需要后十五个问题&#xff0c;可查看文末链接~ 1. 什么是WebUI自动化测试&#xff1f; WebUI自动化测试是指使用自动化测试工具和技术来模拟用户在Web用户界面&#xff08;UI&#xff09;上执行操作&#xff0c;并…

动态内存管理(C语言)

动态内存管理 1. 为什么存在动态内存管理2. 动态内存函数的介绍2.1 malloc函数和free函数2.2 calloc函数2.3 realloc函数 3. 常见的动态内存错误3.1 对NULL指针的解引用操作3.2 对动态开辟空间的越界访问3.3 对非动态开辟内存使用free函数3.4 使用free释放动态开辟内存的一部分…

C#窗口程序添加最大最小化

要在C#开发的窗口程序中添加最大化和最小化按钮&#xff0c;可以按照以下步骤进行操作&#xff1a; 打开窗口的设计视图&#xff0c;在窗口的标题栏上找到一个名为"ControlBox"的属性&#xff0c;将其设置为"True"。这将显示窗口的控制按钮&#xff0c;包…

android studio开发app实例

以下是一个简单的Android Studio开发App的实例&#xff1a; 1. 打开Android Studio&#xff0c;并创建一个新项目。 2. 选择一个适当的应用程序名称和包名称&#xff0c;然后选择目标API级别和默认Activity的模板。 3. 在MainActivity.java文件中&#xff0c;添加以下代码以…

git创建本地分支并关联远程分支

创建本地分支 git branch 分支名 例如&#xff1a;git branch dev&#xff0c;这条命令是基于当前分支创建的本地分支&#xff0c;假设当前分支是master(远程分支)&#xff0c;则是基于master分支创建的本地分支dev。 2. 切换到本地分支 git checkout 分支名 例如&#xff1a…

Python爬虫——urllib_ajax的get请求爬取豆瓣电影前十页

ajax&#xff1a; 就是一段js代码&#xff0c;通过这段代码&#xff0c;可以让页面发送异步的请求&#xff0c;或者向服务器发送一个东西&#xff0c;即和服务器进行交互 对于ajax&#xff1a; 一定会有 url&#xff0c;请求方法(get, post)&#xff0c;可能有数据一般使用 j…

京东自动化功能之商品信息监控是否有库存

这里有两个参数,分别是area和skuids area是地区编码,我这里统计了全国各个区县的area编码,用户可以根据实际地址进行构造skuids是商品的信息ID填写好这两个商品之后,会显示两种状态,判断有货或者无货状态,详情如下图所示 简单编写下python代码,比如我们的地址是北京市…

291. 单词规律 II(plus题)

给你一种规律 pattern 和一个字符串 s&#xff0c;请你判断 s 是否和 pattern 的规律相匹配。 如果存在单个字符到 非空 字符串的 双射映射 &#xff0c;那么字符串 s 匹配 pattern &#xff0c;即&#xff1a;如果 pattern 中的每个字符都被它映射到的字符串替换&#xff0c;那…

提高Djang查询速度的9种方法

引言 在Web应用程序中&#xff0c;数据库查询是一个关键的环节。优化数据库查询可以显著提高应用程序的性能和响应速度。Django作为一个高度可扩展的Web框架&#xff0c;提供了多种方式来优化数据库查询。本文将介绍一些常用的Django数据库查询优化技巧&#xff0c;从入门到精…

猿辅导推出颠覆性产品小猿学练机,加速个性化学习时代到来

近期&#xff0c;沉默近两年的猿辅导在智能硬件领域释放动作&#xff0c;发布旗下首款智能硬件产品——小猿学练机。这一动作代表着&#xff0c;猿辅导正式入局1000亿智能硬件市场。据了解&#xff0c;小猿学练机面向全国中小学生&#xff0c;主打学练一体、以练促学&#xff0…

Maven 项目构建生命周期

Maven 项目构建生命周期 一句话: Maven 构建生命周期描述的是一次构建过程经历了多少个事件 生命周期的3 大阶段 clean 清理工作 default 核心工作&#xff0c;例如编译&#xff0c;测试&#xff0c;打包&#xff0c;部署等 site 产生报告&#xff0c;发布站点等 生命周期…

Elasticsearch 介绍及java集成

一、Elasticsearch 基础介绍 ElasticSearch 是分布式实时搜索、实时分析、实时存储引擎&#xff0c;简称&#xff08;ES)&#xff0c; 成立于2012年&#xff0c;是一家来自荷兰的、开源的大数据搜索、分析服务提供商&#xff0c;为企业提供实时搜索、数据分析服务&#xff0c;…

“layui助力博客管理升级!用增删改查功能打造优质博客体验“

目录 引文1.前置条件2.数据接口2.1 UserDao(CRUD)2.2 R工具类 3.HTML 结构3.1 主界面的HTML3.2 用户的查询所有界面的HTML3.3 新增修改通用的的HTML 4.JavaScript 代码4.1 用户的CRUD javaScript 代码(userManage)4.2 新增修改的javaScript代码(userEdit) 5. 运行截图总结 引文…

【Spring 】执行流程解析:了解Bean的作用域及生命周期

哈喽&#xff0c;哈喽&#xff0c;大家好~ 我是你们的老朋友&#xff1a;保护小周ღ 今天给大家带来的是 Spring 项目的执行流程解析 和 Bean 对象的6 种作用域以及生命周期&#xff0c;本文将为大家讲解&#xff0c;一起来看看叭~ 本期收录于博主的专栏&#xff1a;JavaEE_保…

latex3【排版】

多行公式排版&#xff1a;&#xff08;gather、align、split、cases&#xff09; \section{多行公式}%gather环境\begin{gather} abba \\ abcbaccbacab\end{gather}\begin{gather*} abba \\ abcbaccbacab\end{gather*}​\begin{gather} abba \\ 123 \notag …

【NLP】多头注意力概念(02)

接上文: 【NLP】多头注意力概念(01) 五、计算注意力 将 Q、K 和 V 拆分为它们的头部后,现在可以计算 Q 和 K 的缩放点积。上面的等式表明,第一步是执行张量乘法。但是,必须先转置 K。 展望未来,每个张量的seq_length形状将通过其各自的张量来识别,以确保清晰…

新手学php之字符串变量表述与运算

<?php $txt"Hello world!"; echo $txt; ?> PHP 中的字符串变量 字符串变量用于包含有字符的值。 在创建字符串之后&#xff0c;我们就可以对它进行操作了。您可以直接在函数中使用字符串&#xff0c;或者把它存储在变量中。 在下面的实例中&#xff0c;我…