vue详解(4)

1. v-model 原理

  • 原理:v-model本质上是一个语法糖。例如应用在输入框上,就是 value属性input事件 的合写。
  • 作用:提供数据的双向绑定。① 数据变,视图跟着变 :value;② 视图变,数据跟着变 @input
  • 注意:$event 用于在模板中,获取事件的形参
<template>
<div id="app" >
<input v-model="msg" type="text">
<input :value="msg" @input="msg = $event.target.value" type="text">
</div>
</template>

2. 表单类组件封装 & v-model 简化代码

  • 1.表单类组件 封装 → 实现 子组件 和 父组件数据 的双向绑定
    父传子:数据 应该是父组件 props 传递 过来的,拆解 v-model 绑定数据
    子传父:监听输入,子传父传值给父组件修改
    (下拉菜单监听事件:@change
//父组件使用
//$event拿到当前时间的形参
<BaseSelect :cityId="selectId" @事件名="selecteId = $event" />
<select :value="cityId" @change="handleChange">...</select>
//子组件封装,子组件不能写v-model是因为数据是父组件的,而不是自己的,所以不能使用v-model
props: {
cityId: String
},
methods: {
handleChange (e) {
//e为触发的事件 e.target为触发事件的事件源
this.$emit('事件名', e.target.value)
}
}
  • 父组件 v-model 简化代码,实现 子组件 和 父组件数据 双向绑定
    ① 子组件中:props 通过 value 接收,事件触发 input
    ② 父组件中:v-model 给组件直接绑数据 (:value + @input )
//父组件使用
//:value="selectId"和@input="selectId = $event"
<BaseSelect v-model="selectId"></BaseSelect>
//子组件封装
<select :value="value" @change="handleChange">...</select>
props: {
value: String
},
methods: {
handleChange (e) {
this.$emit('input', e.target.value)
}
}

3 .sync 修饰符

  • 作用:可以实现 子组件父组件数据双向绑定,简化代码
  • 特点:prop属性名,可以自定义,非固定为 value
  • 场景:封装弹框类的基础组件, visible属性 true显示 false隐藏
  • 本质:就是 :属性名@update:属性名 合写
//父组件使用
BaseDialog :visible.sync="isShow" />
<BaseDialog
:visible="isShow" 
@update:visible="isShow = $event"
/>
//子组件封装
props: {
visible: Boolean
},
this.$emit('update:visible', false)

4. ref 和 $refs

  • 作用:利用 ref 和 $refs 可以用于 获取 dom 元素, 或 组件实例
  • **特点:**查找范围 → 当前组件内 (更精确稳定)
  • ① 获取 dom:
    1.目标标签 – 添加 ref 属性
<div ref="chartRef">我是渲染图表的容器</div>

2.恰当时机, 通过 this.$refs.xxx, 获取目标标签

mounted () {
console.log(this.$refs.chartRef)
},

(注:querySelector 查找范围 → 整个页面

// 基于准备好的dom,初始化echarts实例
const myChart = echarts.init(document.querySelector('.box'));

echarts的安装:
npm install echarts --save

  • ② 获取组件:
    1.目标组件 – 添加 ref 属性
    <BaseForm ref="baseForm"></BaseForm>

2.恰当时机, 通过 this. r e f s . x x x , 获取目标组件,就可以 ∗ ∗ 调用组件对象里面的方法 ∗ ∗ ‘ t h i s . refs.xxx, 获取目标组件,就可以**调用组件对象里面的方法** `this. refs.xxx,获取目标组件,就可以调用组件对象里面的方法this.refs.baseForm.组件方法()`

5. Vue异步更新、$nextTick

  • Vue 是 异步更新 DOM (提升性能)
  • $nextTick:等 DOM 更新后, 才会触发执行此方法里的函数体
  • 语法: this.$nextTick(函数体)
this.$nextTick(() => {
this.$refs.inp.focus()
})

6、打包发布

  • 命令npm run build
    结果:在项目的根目录会自动创建一个文件夹’dist’,dist中的文件就是打包后的文件,只需要放到服务器中即可。
  • 在vue.config.js里的defiConfig对象中加入publicPath: './

7、打包优化:路由懒加载

说明:为了防止打包构建应用时,JavaScript包会变得非常大,影响页面加载。所以我们要把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效

  • 异步组件改造(找到路由index.js)
    用户频繁访问到的首页等,就让它进行默认加载;除了首页的所有内容,按需加载
//导入,变成变量要往下放
const Login = () => import('@/views/login')
const Search = () => import('@views/search')
...
  • 路由中的应用
const rount = new VueRouter({routes: [...{ path: '/login/:id', component: Login },{ path: '/search', component: Search }...]
})

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

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

相关文章

【MySQL数据库】CRUD 增 删 改 查 超详解,有这一篇就够了!

​ ​ &#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【MySQL】探秘&#xff1a;数据库世界的瑞士军刀 目录 ⚗️一.CRUD &#x1f9ea;二.新增&#xff08;Create&#xff09; &#x1f9eb;1.基本操作 &#x1f9ec;2.使用SELECT插入 &#x…

长难句5.24

There is pressure for change from within the profession, but opponents of change among the regulators insist that keeping outsiders out of a law firm isolates lawyers from the pressure to make money rather than serve clients ethically. 在(律师)行业内部也有…

云计算历史、业务驱动因素和术语 (Cloud Computing History, Business Drivers and Terminologies)

云计算的历史与定义 (History and Definition of Cloud Computing) 历史 (History) 云计算的概念化始于很久以前&#xff0c;早在1963年。麻省理工学院从美国国防高级研究计划局获得研究资金&#xff0c;用于开发一种“计算机可同时被两人或更多人使用”的技术。在早期的云计算…

区块链钱包如果丢失了私钥或助记词,资产还能恢复吗?

如果你丢失了区块链钱包的私钥或助记词&#xff08;通常是用于恢复钱包的短语或种子&#xff09;&#xff0c;那么你的资产在大多数情况下是无法恢复的。私钥是访问和控制你在区块链上资产的唯一凭证&#xff0c;而助记词&#xff08;如BIP39标准中的12、18、24个单词的短语&am…

centos常见命令总结

一、【写在前面】 注意到csdn在鼓励作者创作centos常见命令相关的文章&#xff0c;借此机会水一篇博文。 centos作为上个版本国内最常用的开源操作系统&#xff0c;占有量非常恐怖&#xff0c;排个前三应该没有任何疑问。但是我建议直接去学ubuntu&#xff0c;因为主流在用的…

【系统架构师】-案例篇(十五)SOA、微服务与数据库

1、可复用构件应具备哪些属性 可用性&#xff1a;构件必须易于理解和使用。 质量&#xff1a;构件及其变形必须能正确工作。 适应性&#xff1a;构件应该易于通过参数化等方式在不同语境中进行配置。 可移植性&#xff1a;构件应能在不同的硬件运行平台和软件环境中工作。 可变…

Spring Boot实现RabbitMQ监听消息的几种方式

Spring Boot实现RabbitMQ监听消息的几种方式 在现代的分布式系统中&#xff0c;消息队列扮演着至关重要的角色&#xff0c;用于解耦服务之间的通信&#xff0c;实现异步消息传递。而RabbitMQ作为其中一种常用的消息队列服务&#xff0c;在Spring Boot中得到了广泛的应用。本文…

pip(包管理器) for Python

pip是什么 pip是Python的包安装程序&#xff0c;即python包管理器。您可以使用 pip 从Python包索引和其他索引安装包。 1. pip 安装 python 包 pip install 包名 例如&#xff1a;pip install pymssql &#xff1a; 使用pip安装数据库驱动包 pymssql 2.pip 卸载 python 包 pi…

【Axure教程】拖动换位选择器

拖动换位选择器通常用于从一个列表中选择项目并将其移动到另一个列表中。用户可以通过拖动选项来实现选择和移动。这种交互方式在许多Web应用程序中很常见&#xff0c;特别是在需要对项目分组的情况下。 所以今天作者就教大家怎么在Axure用中继器制作一个拖动换位选择器的原型…

告别硬编码:Spring条件注解优雅应对多类场景

一、背景 在当今的软件开发中&#xff0c;服务接口通常需要对应多个实现类&#xff0c;以满足不同的需求和场景。举例来说&#xff0c;假设我们是一家2B公司&#xff0c;公司的产品具备对象存储服务的能力。然而&#xff0c;在不同的合作机构部署时&#xff0c;发现每家公司底…

RedisTemplateAPI:List

文章目录 ⛄介绍⛄List的常见命令有⛄RedisTemplate API❄️❄️添加缓存❄️❄️将List放入缓存❄️❄️设置过期时间(单独设置)❄️❄️获取List缓存全部内容&#xff08;起始索引&#xff0c;结束索引&#xff09;❄️❄️从左或从右弹出一个元素❄️❄️根据索引查询元素❄…

探索 Rust 语言的精髓:深入 Rust 标准库

探索 Rust 语言的精髓&#xff1a;深入 Rust 标准库 Rust&#xff0c;这门现代编程语言以其内存安全、并发性和性能优势而闻名。它不仅在系统编程领域展现出强大的能力&#xff0c;也越来越多地被应用于WebAssembly、嵌入式系统、分布式服务等众多领域。Rust 的成功&#xff0…

Day25:Leetcode:669. 修剪二叉搜索树 + 108.将有序数组转换为二叉搜索树 + 538.把二叉搜索树转换为累加树

LeetCode&#xff1a;669. 修剪二叉搜索树 问题描述 解决方案&#xff1a; 1.思路 2.代码实现 class Solution {public TreeNode trimBST(TreeNode root, int low, int high) {if (root null) {return null;}if (root.val < low) {return trimBST(root.right, low, hi…

Nginx文件解析漏洞复现:CVE-2013-4547

漏洞原理 CVE-2013-4547漏洞是由于非法字符空格和截止符导致Nginx在解析URL时的有限状态机混乱&#xff0c;导致攻击者可以通过一个非编码空格绕过后缀名限制。假设服务器中存在文件1. jpg&#xff0c;则可以通过改包访问让服务器认为访问的为PHP文件。 漏洞复现 开启靶场 …

Energia单片机实验-饮水机模拟

一、要求分析 利用状态机程序思想&#xff0c;使用MSP-EXP430F5529 Launchpad板卡实现以下模拟饮水机的功能。 饮水机是我们生活中常见的家用设备。假设一个简易的饮水机有两个按键&#xff1a;童锁按键[PUSH1]和热水按键[PUSH2]。 按键功能说明&#xff1a; 1.童锁按键&#x…

联盟 | 歌者 AIPPT X HelpLook携手,开启企业高效办公新时代

面对日益增长的工作负荷和追求效率优化的压力&#xff0c;企业知识的积累与传播显得愈发重要。如何系统化地沉淀员工与企业的知识精华&#xff1f;如何快速分享内外部知识&#xff1f;更重要的是&#xff0c;如何在获取这些知识后&#xff0c;迅速将其转化为精美的PPT&#xff…

USB-HID 键盘描述符简介

USB-HID 键盘描述符简介 USB-HID键盘设备描述符&#xff1a; #define DEVICE_DESCRIPTOR_SIZE 0x12 #define USB_CTRL_TEST_SZIE 8 #define CONFIG_DESCRIPTOR_SIZE_DUSB 0x0029 //0x0022//0x0029 #define HID_REPORT_DESCRIPTOR_SIZE_DUSB 0x004…

人类交互3 皮肤感觉与运动系统

皮肤感觉概述 皮肤是人体最大的器官之一&#xff0c;具有多种感觉功能&#xff0c;包括&#xff1a; 触觉&#xff1a;通过触觉&#xff0c;我们能感知物体的形状、质地&#xff0c;帮助我们与外界环境进行互动和感知周围物体的特征。 热觉&#xff1a;热觉使我们能感知周围环…

ridge lightgbm catboost

本文从理论基础、代码实践、内容总结三个方面来展示预测的三大基础模型与手动调参自动调参内容细节。 一、理论基础 ridgeRegression 图片: https://uploader.shimo.im/f/uX43BitluzbQeqht.jpg!thumbnail?accessTokeneyJhbGciOiJIUzI1NiIsImtpZCI6ImRlZmF1bHQiLCJ0eXAiOiJKV1Q…

哪款电脑桌面日历记事本软件好用?推荐优秀的电脑日历记事本

对于众多上班族而言&#xff0c;每天在电脑前忙碌已成为生活常态。若想提升工作效率&#xff0c;简化繁琐的工作流程&#xff0c;选择一款出色的电脑桌面日历与记事本软件就显得至关重要。 然而&#xff0c;在Windows操作系统上设定提醒显得相当繁琐&#xff0c;而系统自带的记…