vue学习(二)

9.vue中的数据代理

  • 通过vm对象来代理data对象中的属性操作(读写),目的是为了更加方便操作data中的数据

  • 基本原理:通过Object.defineProperty()把data对象所有属性添加到vm上,为每一个添加到vm上的属性,都增加一个getter/setter方法,在方法内部去操作(读写)data中对象的属性

10.vue中事件

  • 使用v-on:xxx或者@xxx 绑定事件,xxx是事件名 如:v-on:click="onShow" 或 @click = "onShow"

  • 事件的回调需要配置再vm的methods对象中

  • methods中配置的函数,如果用箭头函数,this会变成windows,不用则是vm

  • @click = "onShow" 和 @click = "onShow(@event)" 效果一样,但是后者可以传参

11.vue事件修饰符

  • @click = "onShow"   @click.prevent = "onShow"    @click.prevent.stop = "onShow"    

  • prevent:阻止默认事件

  • stop:阻止事件冒泡

  • once:事件只触发一次

  • capture:使用事件的捕获模式(捕获模式:事件传递从内向外的过程,冒泡是捕获发生后,反向传递)

  • self:只有event.target是当前操作的元素的时候才触发

  • passive:事件的默认行为立即执行,无需等待事件回调执行完毕(交互层立即执行,无需等待事件处理)

12.vue键盘事件

  • @keyup = enter     @keyup = ctrl.x = "onShow"

  • 鉴于一些特殊按键带有特殊功能 keyup不好用的时候 可以使用keydown

  • vue中常用的按键别名: enter  delete  esc  space tab  up down left right

  • vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意几个单词的要转为keba-case(短横线命名)

  • 系统修饰键 ctrl alt shit meta 用keyup的时候要加上其他键,用keydown不需要

  • 可以使用Vue.config.keycodes.自定义键名=键码

13.vue计算属性

  • 要用的属性不存在,要用到已有属性计算得来,初次读取会执行一次,当依赖的数据发生改变会被调用,有缓存机制,效率更高

  • 如果只有读取,可以如此简写

computed:{onshow() {console.log('get倍调用了')return this.name + '+' + this.name1}}
  • 如果读写都有:

computed:{onshow:{get(){console.log('get倍调用了')return this.name + '+' + this.name1},set(value){console.log('set',value)this.name = value;this.name1 = value;}}}

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

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

相关文章

比特币通用API服务

Bitcoin 通用API服务 exlectrs: API后台服务(Rust语言编写) https://github.com/Blockstream/electrs.git 使用electr作为后台的区块链浏览器:https://github.com/Blockstream/esplora.git https://github.com/Blockstream/electrs https://github.com/romanz/electrs/blo…

Element-UI - 解决el-table中图片悬浮被遮挡问题

在开发中,发现element-ui在el-table中添加图片悬浮显示时,会被单元格遮挡的问题。通过查询得到的解决办法,大多是修改.el-table类中相关样式属性,但经过验证发现会影响到其他正常功能的使用。对于此问题解决其实也并不难&#xff…

生产者消费者模型的同步与互斥:C++代码实现

文章目录 一、引言二、生产者消费者模型概述1、基本概念和核心思想2、生产者消费者模型的优点 三、消费者和生产者之间的同步与互斥四、代码实现1、事前准备2、环形队列的实现3、阻塞队列的实现4、两种实现方式的区别 一、引言 在现代计算机系统中,很多任务需要同时…

【机器学习】机器学习与教育科技在个性化教学中的融合应用与性能优化新探索

文章目录 引言机器学习与教育科技的基本概念机器学习概述监督学习无监督学习强化学习 教育科技概述学生学习行为分析个性化学习路径推荐智能化教育评估 机器学习与教育科技的融合应用实时学习数据分析数据预处理特征工程 学生成绩预测与优化模型训练模型评估 个性化学习路径推荐…

扩展学习|风险沟通研究进展综述

一、风险沟通研究进展综述(2011年发表) 文献来源:[1]高旭,张圣柱,杨国梁,等.风险沟通研究进展综述[J].中国安全生产科学技术, 2011, 7(5):5.DOI:10.3969/j.issn.1673-193X.2011.05.029. 简介:首先简述了风险沟通研究的社会背景按…

阿里云主机使用 docker-compose 部署 harbor 镜像仓库

文章目录 [toc]docker-compose 安装harbor 安装修改配置文件导入离线镜像部署前预处理开始安装开通安全策略组docker 配置 现在国内 dockerhub 镜像加速多多少少都有问题,这里采用离线包的方式来部署 harbor-github 下载地址 找到对应的版本,下载带有 of…

【AI实践】Ollama本地安装大模型服务

Ollama安装运行 安装与配置 Download Ollama 安装默认在C盘,成功后,window任务栏图标会有Ollama Logo 为了不占用C盘更大的空间,修改模型下载路径,修改环境变量 下载模型 由于我电脑是第六代Intel,集显,…

(56)MOS管专题--->(11)MOS管三个极的判定

(11)MOS管三个极的判定 1 目录 (a)IC简介 (b)数字IC设计流程 (c)Verilog简介 (d)MOS管三个极的判定 (e)结束 1 IC简介 (a)在IC设计中,设计师使用电路设计工具(如EDA软件)来设计和模拟各种电路,例如逻辑电路、模拟电路、数字信号处理电路等。然后,根…

【算法题】搜索二维矩阵,一文彻底弄会!

目录 一、题目描述 二、解题思路 1、引言 2、思路推导过程 三、参考答案 一、题目描述 搜索二维矩阵 给你一个满足下述两条属性的 m x n 整数矩阵: 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数…

【C++】多态|原理|override|final|抽象类|多继承虚函数表|对象模型|虚表打印|(万字详解版)

目录 ​编辑 一.多态的概念 二.多态的构建 虚函数 重写 虚函数重写的例外 协变 隐藏 析构函数的重写 三.重载、重写(覆盖)、隐藏(重定义)的对比 四.C11新增的 override 和 final override final 五.抽象类 六.多态的原理 虚函数表 总结: 引用…

非常好用的7个Vue3组件库!!【送源码】

说到Vue,怎能不提Vue3呢? 它的大名鼎鼎主要归功于一项革命性的创新——Composition API。 这个新功能为逻辑复用带来了前所未有的友好性和灵活性,让开发者们在构建应用时如鱼得水。 如果你现在正在使用Vue3,或者在新的一年考虑…

浏览器上直接运行近 1000个 AI 模型!

今天推荐的开源项目叫做 tansformers.js,这是一个不需要服务器端,能让你在浏览器上使用到自然语言处理、计算机视觉等 AI 能力的开源项目。由 xenova 开源,transformers.js 已经在 GitHub 上获得了超过 9.2K 颗星星。 项目简介 transformers.…

JVM如何确定方法调用

方法调用并不等同于方法执行,方法调用阶段唯一的任务就是确定调用哪一个方法,不涉及方法内部的具体运行过程。在程序运行时,进行方法调用是最普遍、最频繁的操作,但Class文件的编译过程中不包含传统编译中的连接步骤,一…

医学人工智能项目如何申请基金?

小罗碎碎念 本期推文面向的群体 青年教师有志硕博/博后 尤其适合一直认真追小罗推文的老师/同学,你们会发现自己在看这篇推文的时候,遇到自己领域的项目时,文思如泉涌,仿佛马上就能把本子写好,哈哈。(运用…

命令词:引导行动的语言工具

人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 目录 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌…

App UI 风格打造独特体验

App UI 风格打造独特体验

Web前端小路线:探索与开发之旅

Web前端小路线:探索与开发之旅 Web前端开发,作为互联网技术的核心领域之一,吸引了无数热爱技术与创意的开发者。在这个充满挑战与机遇的领域中,如何规划一条适合自己的学习路线,成为了许多初学者和进阶者关注的焦点。…

通过Stream流对集合进行操作

Stream Api是JDK8提供的新特性,可以更为方便地对集合进行操作,比如我今天遇到的一个场景: 将本地的一个视频文件分成多块上传到Minio服务器,现在上传功能已经完成,需要调用minioClient对已经上传的文件重新合并成一个新…

8086汇编 add指令学习

ADD,是Intel x86平台的汇编加法指令,MEM代指操作数为内存或寄存器,REG代指操作数为寄存器,IMM代指立即数,SEG代指操作数为段寄存器。 形式和示例如下; ADD MEM8,REG8 ADD DS:[BXSI],AL ADD MEM16,R…

Centos7.9部署单节点K8S环境

Centos7.9部署单节点K8S环境 通过Centos extras镜像源安装K8S环境,优点是方便快捷,缺点是版本较低,安装后的版本为1.5.2。 1. 准备工作 关闭selinux [rootlocalhost ~]# cat /etc/selinux/config# This file controls the state of SELin…