Vue基础(数据绑定、export使用)

1、简介

        在使用vue开发的过程中,经常会遇到一些容易混淆的问题,因此,在本文中进行汇总操作,只有通过不断总结学习,才能更好掌握vue的使用(每天进步一点)。

2、数据绑定

        在js中定义数据(param参数):

<script>export default {data:{param: ''}}
</script>
2.1、数据单向绑定

        数据单向绑定,指的是数据只能通过data流向页面;使用如下语法进行使用:

<!-- 数据单向绑定 -->
<input type='text' v-bind:param="xxx" />
<!-- 或者简写为 -->
<input type='text' :param="xxx" />
2.2、数据双向绑定

        数据双向绑定,指的是数据既能通过data流向页面,也能通过页面流向data;使用如下语法进行使用: 

<!-- 数据双向绑定 -->
<input type='text' v-model:value="xxx" />
<!-- 或者 -->
<input type='text' v-model="xxx" />
3、export使用
3.1、export两种使用方法
// 1、默认暴露
export default{} 
// 或者先定义再暴露
const aa = {}
export default aa
// 2、统一暴露
const a = {}
const b = {}
export {a,b}
3.2、export后如何引入
// 1、对于默认暴露
import xxx from  './xxx.js'
// 2、对于统一暴露(在导入时需要使用{})
import {a,b} from  './xxx.js'  // 如果只引入一个组件也不可省略{}

注:在使用统一暴露时,在export 和import时都需要加{},即使只暴露一个参数。

 4、总结

        学习前端是一个不断积累和总结的过程,需要每天精进一点,才能更好掌握vue。

        本人是一个从小白自学计算机技术,对前端、运维、后端、各种中间件技术、大数据等有一定的学习心得,想获取自学总结资料(pdf版本)或者希望共同学习,关注微信公众号:it自学社团。后台回复相应技术名称/技术点即可获得。(本人学习宗旨:学会了就要免费分享)

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

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

相关文章

音乐编曲软件哪个好用 studio one和fl studio哪个好

编曲软件的出现&#xff0c;打破了时间与空间的限制&#xff0c;使得创作者能随时随地进行音乐创作。随着信息时代的发展&#xff0c;使用编曲软件进行音乐创作已经成为业界主流。业内常用的有Cubsae、LogicPro、Studio One、Ableton live等&#xff0c;这次教程我将为大家解读…

HTTP 协议的基本格式和Fidder的简单使用

HTTP协议诞生于1996&#xff08;开玩笑哈&#xff0c;诞生于1991年&#xff09;&#xff0c;http协议用于网页和手机app和服务器交互的场景。通过HTTP协议&#xff0c;客户端&#xff08;例如网页浏览器或手机应用&#xff09;可以向服务器发送请求&#xff0c;服务器则会响应这…

苹果手机突然白屏无反应怎么办?白屏修复办法分享!

苹果手机突然白屏无反应怎么办&#xff1f;下面小编就来给大家分享苹果手机突然白屏的原因和修复办法。 一般造成苹果手机出现白屏的原因如下&#xff1a; 系统问题&#xff1a;iOS系统的故障是导致苹果设备白屏无反应最常见的原因之一。例如&#xff0c;系统更新失败、应用冲…

TI_DSP_F2808学习笔记3: ePWM

共有6组ePWM&#xff0c;每一组 ePWM 模块都包含以下 7 个模块&#xff1a;时基模块 TB、计数比较模块 CC、动作模块 AQ、死区产生模块 DB、PWM 斩波模块 PC、错误联防模块 TZ、时间触发模块 ET。 时基模块 TB 确定PWM的周期和相位。 1&#xff09;PWM 时基计数器&#xff…

R18 NTN中的RACH-less HO

在看R18 38.300时,发现NTN场景 增加了如下黄色字体的内容,R18 NTN支持了RACH-less HO,索性就简单看了看。 NTN RACH less HO相关的描述主要在38.331,38.213和38.321中。38.300中的描述显示:网络侧会通过RRCReconfiguration消息将RACH-less HO相关的配置下发给UE, 其中会包…

【SpringCloud】负载均衡

目录 负载均衡什么是负载均衡生活场景为什么需要负载均衡负载均衡手段负载均衡总的来说有两种实现手段负载均衡具体可以通过多种手段来实现 SpringCloud中的负载均衡组件Ribbon VS Nginx负载均衡区别集中式LB进程内LB RibbonRibbon的工作原理Ribbon在工作时分成两步 使用1.提供…

光纤跳纤,这篇文章值得一看

光纤跳线作为光网络布线最基础的元件之一&#xff0c;被广泛应用于光纤链路的搭建中。 如今&#xff0c;光纤制造商根据应用场景的不同推出众多类型的光纤跳线&#xff0c;如 MPO / LC / SC / FC / ST 光纤跳线&#xff0c;单工/双工光纤跳线&#xff0c;单模/多模光纤跳线等&…

把maven本地库(windows)导入Nexus3(ubuntu)

1、在nexus中创建导入仓库 点“Create repository” 选择maven2(hosted) 填上对应的仓库name&#xff0c;Version policy选“Mixed” Hosted中的Deployment policy选择“Allow redeploy” 点“Create repository”创建仓库 创建好的仓库如下 记下仓库的url&#xff0c;下…

智慧教室课堂-专注度及考试作弊系统、课堂动态点名,情绪识别、表情识别和人脸识别结合

课堂专注度分析&#xff1a; 课堂专注度表情识别 作弊检测&#xff1a; 关键点计算方法 转头(probe)低头(peep)传递物品(passing) 侧面的传递物品识别 逻辑回归关键点 使用&#xff1a; 运行setup.py安装必要内容 python setup.py build develop 运行demo_inference.py 将…

计算机的存储体系

计算机的存储分为内存和硬盘两大类。其中内存属于非持久化的存储设备&#xff0c;用于临时存储数据&#xff0c;设备掉电后数据会丢失&#xff1b;硬盘属于持久化的存储设备&#xff0c;设备掉电后数据不会丢失。 实际上在计算机领域存储的种类是非常多的&#xff0c;业界有时…

osgearth 3.5 vs 2019编译

下载源码 git clone --recurse-submodules https://github.com/gwaldron/osgearth.git 修改配置文件 主要是修改bootstrap_vcpkg.bat&#xff0c;一处是vs的版本&#xff0c;第二处是-DCMAKE_BUILD_TYPERELEASE 构建 执行bootstrap_vcpkg.bat vs中生成安装 vs2019打开bu…

用友电子凭证解决方案,加速企业电子凭证全链路管理

2023年&#xff0c;财政部等9部委联合推进电子凭证数据标准及试点工作&#xff0c;目前逐步扩大试点范围&#xff0c;覆盖市场应用高频的9类凭证。2024年&#xff0c;财政部办公厅发布了《关于继续开展电子凭证会计数据标准深化试点工作的通知》对电子凭证进行全流程常态化处理…

赛事|基于SprinBoot+vue的CSGO赛事管理系统(源码+数据库+文档)

CSGO赛事管理系统 目录 基于SprinBootvue的CSGO赛事管理系统 一、前言 二、系统设计 三、系统功能设计 1系统功能模块 2管理员功能模块 3参赛战队功能模块 4合作方功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&…

人类行为验证处理方案 —— 脱离UI组件库实现登录、注册+表单校验

目录 01: 构建登录模块基础UI结构 02: 表单校验实现原理与方案分析 表单校验的实现原理 自定义表单校验方案分析 文章中的方案实现 03: 基于 vee-validate 实现普适的表单校验 04: 什么是人类行为验证&#xff1f;它的目的、实现原理、构建方案分别是什么&am…

UE_地编教程_创建地形洞材质

个人学习笔记&#xff0c;不喜勿喷。侵权立删&#xff01; 使用地形洞材质来遮罩地形上特定位置的可视性和碰撞。如要在山脉侧面创建进入洞穴的入口&#xff0c;此操作将非常有用。可使用地形材质和地形洞材质的相同材质&#xff0c;但注意&#xff1a;对比不使用不透明蒙版的…

AI大模型探索之路-实战篇4:深入DB-GPT数据应用开发框架调研

目录 前言一、DB-GPT总体概述二、DB-GPT关键特性1、私域问答&数据处理&RAG2、多数据源&GBI3、多模型管理4、自动化微调5、Data-Driven Multi-Agents&Plugins6、隐私安全 三、服务器资源准备1、创建实例2、打开jupyterLab 四、DB-GPT启动1、激活 conda 环境2、切…

docker安装etcd

1.查找etcd镜像 docker search etcdNAME: 镜像仓库源的名称 DESCRIPTION: 镜像的描述 STARS: 类似 Github 里面的 star&#xff0c;表示点赞、喜欢的意思。 OFFICIAL: 是否 docker 官方发布 2.拖取镜像并生成对应容器 docker run --name etcd -d -p 2379:2379 -p 2380:2380 …

校园一体式气象站功能特点与应用

TH-XQ4随着教育理念的更新和科技的发展&#xff0c;校园一体式气象站在现代校园中的应用越来越广泛。它不仅为学生提供了实时、准确的气象数据&#xff0c;还成为了推动科学教育、培养学生实践能力和环保意识的重要工具。本文将从功能、特点和应用三个方面对校园一体式气象站进…

Python学习---利用Python操作数据库

如何理解连接connection和游标 cursor&#xff1f; connection就像是连接出发地和目的地的高速公路cursor就像是在高速公路上的货车-拉货我们使用游标就可以完成对数据的操作当我们完成操作完成后就可以停下货车&#xff0c;然后公路再停止使用。 pysql实现查询 ""…