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

news2024/11/16 3:48:14
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.coloradmin.cn/o/1700878.html

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

相关文章

基于深度学习和opencv的车牌识别系统

免费获取方式↓↓↓ 项目介绍028&#xff1a; 基于深度学习和opencv的车牌识别系统 同时利用对图片每一帧图像加入视频分析模块 图片分析模块可以依据界面按钮提示进行相应功能 视频分析模块可以根据按钮提示进行对视频的分析 &#xff08;视频模块的视频追踪处理时间较长&…

知攻善防应急响应靶机训练-Web2

前言&#xff1a; 本次应急响应靶机采用的是知攻善防实验室的Web-2应急响应靶机 靶机下载地址为&#xff1a; https://pan.quark.cn/s/4b6dffd0c51a 相关账户密码 用户:administrator 密码:Zgsfqq.com 解题过程&#xff1a; 一、攻击者的IP地址&#xff08;两个&#xff09;…

1108 String复读机

solution1 分别统计字符String的个数&#xff0c;并按照该顺序输出 #include<iostream> #include<string> #include<map> using namespace std; map<char, int> mp; void handle(char c){if(mp.count(c)){cout << c;mp[c]--;if(mp[c] 0) mp.e…

【软件开发规范篇】前言

作者介绍&#xff1a;本人笔名姑苏老陈&#xff0c;从事JAVA开发工作十多年了&#xff0c;带过大学刚毕业的实习生&#xff0c;也带过技术团队。最近有个朋友的表弟&#xff0c;马上要大学毕业了&#xff0c;想从事JAVA开发工作&#xff0c;但不知道从何处入手。于是&#xff0…

吴恩达2022机器学习专项课程C2W2:2.22 多类 softmax softmax与神经网络 softmax的代码改良 多标签分类

目录 多分类问题1.什么是多分类问题2.多分类问题案例3.二分类与多分类的区别 Softmax1. 什么是Softmax2.逻辑回归预测的计算过程3. Softmax预测的计算过程4.Softmax 回归与逻辑回归的关系5. Softmax的损失函数 softmax与神经网络1.设置Softmax层2.Softmax层的计算3.softmax激活…

全国多地入夏!对抗“高温高湿”约克VRF中央空调有妙招

随着气温飙升,北京、上海、广州、南京、天津、江苏、新疆、内蒙古部分地区等多地进入夏季状态,华北、黄淮等不少地方最高气温都超过了30℃,大街上人们短袖、短裤纷纷上阵,一派夏日炎炎的景象。 炎热夏季不仅高温频频来袭,往往还伴随着降雨带来的潮湿,天气湿热交织容易让人们身…

开发心电疾病分类的深度学习模型并部署运行于ARM虚拟硬件平台(AVH)

目录 一、ARM虚拟硬件平台介绍 二、心电疾病分类模型介绍 三、部署流程 3.1 基于百度云平台订阅虚拟硬件镜像 3.2 安装编译相关组件 3.1 数据加载 3.2 模型转换 方式一&#xff1a; tensorflow模型转换为onnx模型&#xff0c;onnx模型转换为TVM模型 方式二&#xff1…

分子对接 molecular docking

https://www.sciencedirect.com/science/article/pii/S094471132400374X?via%3Dihub GitHub - beikwx/SailVina: SailVina重构增强版 Molecular docking Download the PTPRB protein structure on the PDB database (RCSB PDB: Homepage). Select the high-resolution PTP…

Dubbo生态之sentinel限流

1. 限流算法 我们知道&#xff0c;在分布式架构中&#xff0c;当服务请求量过大时&#xff0c;容易对服务器造成不可预知的压力&#xff0c;因此&#xff0c;我们在客户端请求的时候&#xff0c;进行限流&#xff0c;起到一个保护的作用 常见的限流算法有: 计数器限流&#x…

Mixed-precision计算原理(FP32+FP16)

原文&#xff1a; https://lightning.ai/pages/community/tutorial/accelerating-large-language-models-with-mixed-precision-techniques/ This approach allows for efficient training while maintaining the accuracy and stability of the neural network. In more det…

C++第二十弹---深入理解STL中vector的使用

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】 目录 1、vector的介绍 2、vector的使用 2.1、构造函数和赋值重载 2.1.1、构造函数的介绍 2.1.2、代码演示 2.2、容量操作 2.3、遍历 2.4、增删…

RH850F1KM-S4-100Pin_ R7F7016453AFP MCAL PWM 配置

1、PWM组件包含的子配置项 PwmGeneralPwmDemEventParameterRefsPwmConfigurationOfOptApiServicesPwmChannelConfigSet2、PwmGeneral 2.1、PwmPowerStateConfig 2.1.1、PwmPowerState 该参数的每个实例描述PWM HW支持的不同功率状态。它应该由硬件供应商定义,并由PWMDriver用…

HoneyTrap蜜罐系统实践操作@FreeBSD

HoneyTrap介绍 HoneyTrap是一个可扩展的开源系统&#xff0c;用于运行、监控和管理蜜罐。 HoneyTrap蜜罐系统通过在网络中部署感应节点&#xff0c;实时感知周边网络环境&#xff0c;并将感应节点的日志进行实时存储和可视化分析&#xff0c;从而实现对网络环境中威胁情况的感…

BUUCTF-WEB3

[极客大挑战 2019]Knife1 1.打开附件链接 一句话木马eval($_POST["Syc"]); 2.中国蚁剑 用中国蚁剑连接 在根目录下找到一个名为flag的文件 3.得到flag [极客大挑战 2019]Upload1

STM32Cubemx HAL库 移植FreeRTOS源码

本篇文章主要是使用STM32Cubemx生成Keil工程&#xff0c;然后在移植FreeRTOS源码&#xff0c;最后测试使用。 一、FreeRTOS简介 Free 和 RTOS&#xff0c;Free 就是免费的、自由的、不受约束的意思&#xff0c;RTOS 全称是 Real Time Operating System&#xff0c;中文名就是实…

大数据开发面试题【Spark篇】

115、Spark的任务执行流程 driver和executor&#xff0c;结构式一主多从模式&#xff0c; driver&#xff1a;spark的驱动节点&#xff0c;用于执行spark任务中的main方法&#xff0c;负责实际代码的执行工作&#xff1b;主要负责&#xff1a;将代码逻辑转换为任务、在executo…

Java对象不再使用时,为什么要赋值为 null ?

在Java中&#xff0c;将不再使用的对象赋值为null的目的主要是为了帮助垃圾收集器&#xff08;更快地释放内存。我这里有一套编程入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习编程&#xff0c;不妨点个关注&#xff0c;给个评论222&…

短剧平台开发中的常见误区及避坑指南,别再走弯路

1. 误区一&#xff1a;只注重外观&#xff0c;忽视技术基础 在短剧平台开发中&#xff0c;一个常见的误区是过于注重产品的外观设计&#xff0c;而忽视了技术基础的重要性。团队往往会投入大量精力和资源来打造吸引人的UI和炫酷的特效&#xff0c;但忽略了系统架构、性能优化和…

不能错过的AI知识学习神器「Mo卡片」

1. 「Mo卡片」——知识点的另一种承载方式 1.1 产品特点 &#x1f4f1;一款专为渴望理解和掌握人工智能知识的小伙伴量身打造的轻量级 App。 &#x1f3f7;AI 知识卡片集 Mo卡片内置了 26 套卡片集&#xff0c;总计 1387 张卡片&#xff0c;每张卡片都能获得 1 个核心知识。…

领导让我调研CI/CD,我给他看了这个

一、概念解释 CI/CD是指持续集成&#xff08;Continuous Integration&#xff09;和持续交付/持续部署&#xff08;Continuous Delivery/Continuous Deployment&#xff09;的缩写&#xff0c;是现代软件开发中的重要实践。它们旨在通过自动化和持续化的方式改善软件开发、测试…