vue基础总结

vue基础知识总结

 指令

- v-model  数据双向绑定

- v-for     循环渲染

- v-if      渲染与销毁

- v-show    显示与隐藏

- v-bind    绑定属性

- v-on      绑定事件

- v-once     让渲染的值执行一次

- v-html      渲染dom片段

- v-text      渲染文本

- v-slot     插槽

 属性

- props:原生的标签上分为自有属性和自定义属性。自定义组件上的属性使用props接收,属于父传子的数据传递方式。

v-bind绑定,props接收

 事件

概念: 用户操作程序交互页面等一系列行为叫事件

 鼠标事件

click,dbclick,

 键盘事件

keyDown ,keyUp

 事件绑定

v-on绑定事件类型,给一个执行函数。

 自定义事件绑定

v-on:focus='focus'

让程序控制自己的函数在特定情况下被使用

 修饰符

 指令修饰符

- trim    去掉内容两端的空格

- number  尝试转换输入内容为数字

- lazy 让元素失去焦点后更新数据

 属性修饰符

- sync 让自定义属性值可以被子组件直接修改

 事件修饰符

- stop 禁止事件冒泡

- prevent 禁止默认事件

- native 绑定原生事件

 组件通信   `*`

 父传子

- 父组件用v-bind传递数据 子组件用props接受

- $children获取页面上所有子组件

- $root 获取根组件

- 父组件使用sync修饰符绑定的属性,子组件用特定语法`$emit('update:prop')`

 子传父

- 父组件用v-on传递函数,子组件用$emit调用函数进行通信

- $parent获取最近的父组件

 父子互相通信

- sync 伪双向绑定

- v-model 父组件向子组件注入一个value数据和一个input方法

 内置组件 

- component  动态加载组件

- keep-alive    缓存组件状态

- slot        插槽

- template    模板

 插槽

- 匿名插槽

  使用slot 标签接受即可

- 具名插槽

使用template包裹内容,使用v-slot属性设置名称

在slot组件上使用name属性匹配名称

- 插槽传参

```js

// 插槽传参

<slot name='header' :data="data"></slot>

子组件

<template v-slot:header="data"></template>

```

 生命周期

 组件的生命周期

- beforeCreate   创建前

- created        创建成功

- beforeMount     挂载前

- mounted        挂载成功(自动发起ajax) 

- beforeUpdate      更新前

- updated            更新完成

- beforeDestroy     销毁前 (销毁常驻值)

- destroyed         销毁成功

 缓存组件状态的生命周期

keep-alive 的生命周期

- activated  激活

- deactivated  停用缓存

 计算属性和监听

 compute

- 对一个值进行监听并返回一个新值。有缓存回对比新旧值,如果一致则不会执行

 watch

只对值进行监听,默认只在数据发生变化时执行

如果监听的是对象或数组需要开启深度监听

deep:true     深度监听

immediate:true  自动执行一次

 

 自定义-过滤器-指令

 filter过滤器

分为全局组件过滤器和局部组件过滤器

对一个数据进行处理返会新数据。

语法: 值 管道符 过滤器

多个过滤器用管道符隔开

`vlaue | filter`

 directive指令

在某些情况下需要获取dom元素比如在元素渲染到页面上后获取元素

例如  页面打开后input自动获取焦点

核心api: inserted函数表示元素渲染完成后的生命周期,使用被注入的el对象进行操作。

 插件

用于更大化的重复使用代码,将功能性的代码封装成插件

vue的插件核心是一个对象使用install方法,该方法被注入一个全局Vue,使用它去挂在添加公共的方法或组件

 

 

 

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

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

相关文章

如何在 Linux 命令行中按大小对文件进行排序

作者 | 刘光录来源 | TIAPls 命令用于显示目录的内容。使用 -l 选项&#xff0c;可以列出文件和目录及其属性。今天我们来分享一下如何根据文件大小对列表进行排序。ls -l 命令可以显示文件大小&#xff0c;但也仅仅是能让我们看到文件的大小&#xff0c;它默认是按照字母顺序显…

福建品品香茶业有限公司业务迁移上云

福建品品香茶业有限公司数据量较大&#xff0c;进行业务迁移上云时阿里云根据其公司需求综合考虑&#xff0c;推荐将原有IOE架构改为分布式架构&#xff0c;使用ECSRDS承载业务&#xff0c;为客户带来极大价值。 企业介绍 福建品品香茶业有限公司是一家集茶叶种植、加工、销售…

璀璨智行:V2X车路协同智慧交通

V2X车用无线通信技术是指车对外界的信息交换&#xff0c;作为未来智能交通运输系统的关键技术&#xff0c;璀璨智行潜心研究V2X技术&#xff0c;致力于V2X车路协同的落地&#xff0c;在智慧交通领域做出了卓越的贡献。 创业机会点 魏军博表示&#xff1a;“面对交通系统效率低…

vue遇到的问题合集

vue数组对象数据修改页面不渲染 https://blog.csdn.net/weixin_43638968/article/details/103910257

打造绿色数据中心,Colt DCS 是认真的!

如今我们正处在 IT 技术创新的黄金时代&#xff0c;在人工智能、云计算、5G、物联网等前沿技术正在影响人们工作和生活的方方面面。随着数字社会的发展&#xff0c;人们对数据资源存储、计算和应用需求的大幅提升&#xff0c;数据中心迎来快速发展。据 Synergy Research Group …

Databricks 企业版 SparkDelta Lake 引擎助力 Lakehouse 高效访问

简介&#xff1a;本文介绍了Databricks企业版Delta Lake的性能优势&#xff0c;借助这些特性能够大幅提升Spark SQL的查询性能&#xff0c;加快Delta表的查询速度。 作者&#xff1a; 李锦桂&#xff08;锦犀&#xff09; 阿里云开源大数据平台开发工程师 王晓龙&#xff08…

axios基础

非常详细的axios axios 基础操作&#xff1a; 请求方式&#xff1a; get方法接收的是params&#xff0c;post接收的是data 两种格式&#xff1a; //发送get请求axios.get(地址&#xff0c;{params:{ 参数}}).then((res)>{成功的回调})//发送post请求 axios({method: …

深度解析数据湖存储方案Lakehouse架构

简介&#xff1a;从数据仓库、数据湖的优劣势&#xff0c;湖仓一体架构的应用和优势等多方面深度解析Lakehouse架构。 作者&#xff1a;张泊 Databricks 软件工程师 Lakehouse由lake和house两个词组合而成&#xff0c;其中lake代表Delta Lake&#xff08;数据湖&#xff09;&…

1688 复杂业务场景下的 Serverless 提效实践

简介&#xff1a;我们主要负责 PC 端 1688.com 以及手机端阿里巴巴 APP&#xff0c;是目前国内最大的 B 类电商交易平台&#xff0c;主要面向 B2B 电商业务的场景&#xff0c;为中小企业提供零售、批发、分销以及加工定制等电商交易渠道。 前言 首先为大家简单介绍一下我们的…

vue自定义指令(详细)

局部自定义指令 自定义指令可以调用 5个函数&#xff0c;4个参数 函数&#xff1a; * bind&#xff1a;只调用一次&#xff0c;指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。* inserted&#xff1a;被绑定元素插入父节点时调用 (仅保证父节点存在&#x…

阿里 蚂蚁自研 IDE 研发框架 OpenSumi 正式开源

简介&#xff1a;经历近 3 年时间&#xff0c;在阿里集团及蚂蚁集团共建小组的努力下&#xff0c;OpenSumi 作为国内首个强定制性、高性能&#xff0c;兼容 VS Code 插件体系的 IDE 研发框架&#xff0c;今天正式对外开源。 作者 | OpenSumi 来源 | 阿里技术公众号 经历近 3 …

剖析 kubernetes 集群内部 DNS 解析原理

作者 | 江小南来源 | 江小南和他的小伙伴们引言说到DNS域名解析&#xff0c;大家想到最多的可能就是/etc/hosts文件&#xff0c;并没有什么错&#xff0c;但是/etc/hosts只能做到本机域名解析&#xff0c;如果跨机器的解析就有点捉襟见肘了。在服务器中还有一个配置值得大家注意…

首次公开,阿里云开源PolarDB总体架构和企业级特性

简介&#xff1a;在3月2日的阿里云开源 PolarDB 企业级架构发布会上&#xff0c;阿里云 PolarDB 内核技术专家北侠带来了主题为《PolarDB 总体架构设计和企业级特性》的精彩演讲。 在3月2日的阿里云开源 PolarDB 企业级架构发布会上&#xff0c;阿里云 PolarDB 内核技术专家 北…

vue 面试题集合

1&#xff0c;vue和jQ的区别 vue 数据驱动的框架 jq 操作dom的类库 2&#xff0c;vue的优缺点 优点&#xff1a;快速开发&#xff0c;模块化开发&#xff0c;代码复用 缺点&#xff1a;不利于爬虫爬取&#xff0c;IE低版本不兼容 3&#xff0c;vue响应式原理 Object.defa…

阿里云数据库开源发布:PolarDB HTAP的功能特性和关键技术

简介&#xff1a;在3月2日的阿里云开源 PolarDB 企业级架构发布会上&#xff0c;阿里云 PolarDB 内核技术专家严华带来了主题为《PolarDB HTAP详解》的精彩演讲。在PolarDB存储计算分离架构的基础上&#xff0c;我们研发了基于共享存储的MPP分布式执行引擎&#xff0c;解决了单…

倒计时 2 天!2022 中国算力大会:移动云邀您共见算力网络,创新发展

7 月 29 日 - 31 日由工业和信息化部、山东省人民政府主办的首届中国算力大会将在泉城济南盛大举行&#xff01;中国移动受邀承办“算力网络&#xff0c;创新发展” 论坛并设立展区分享行业前瞻洞察&#xff0c;构建开放共赢生态7 月 29 日下午&#xff0c;邀您共话算力精彩&am…

什么是好的错误消息? 讨论一下Java系统中的错误码设计

简介&#xff1a;一个好的Error Message主要包含三个部分&#xff1a;Context: 什么导致了错误&#xff1f;发生错误的时候代码想做什么&#xff1f;The error itself: 到底是什么导致了失败&#xff1f;具体的原因和当时的数据是什么&#xff1f;Mitigation: 有什么解决方案来…

es6结构赋值

数组结构赋值 let [a,b][1,2] //交换两个变量的值 let[a,b][b,a] //扩展运算符的运用 let[a,...b][1,2,3]  //有默认值 右侧的参数等于undefined&#xff0c;默认值生效 let[a3,b][1,2] 对象结构赋值 let {a:a,b:b}{a:1,b:2};let {a,b}{a:1,b:2}let{a,...b}{a:1,b:2,c:3}

阿里巴巴在开源压测工具 JMeter 上的实践和优化

简介&#xff1a;Apache JMeter 是 Apach 旗下的开源压测工具&#xff0c;创建于 1999 年初&#xff0c;迄今已有超过 20 年历史。JMeter 功能丰富&#xff0c;社区&#xff08;用户群体&#xff09;庞大&#xff0c;是主流开源压测工具之一。 作者&#xff1a;灵苒、涧泉 Ap…

普洛斯荣获两项“数据中心绿色等级评估”5A级认证

7月29日&#xff0c;由工业和信息化部及山东省人民政府主办的首届中国算力大会在济南成功举办&#xff0c;会上同时公布了本年度“数据中心绿色等级评估”评审结果。普洛斯常熟东南数据中心B栋及普洛斯怀来数据中心3号楼均荣获“数据中心绿色等级评估”&#xff08;规划类/基础…