第三章 Vue组件的属性和方法(下)

3.4 表单数据的双向绑定
示例一:文本输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单输入</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="Application">
        <input v-model.trim="textField"/>
        <p>文本输入框内容:{
  
  {textField}}</p>
    </div>
    <script>
        const App = {
            data() {
               return {
                   textField:""
 
【愚公系列】《循序渐进Vue.js 3.x前端开发实践》010-Vue 组件的属性和方法:属性与方法基础 在Vue.js的世界里,组件是构建现代前端应用的基石。它们不仅使代码结构更加清晰,也为开发者提供了灵活的复用性和可维护性。而理解组件的属性和方法,是掌握Vue开发的关键一步。在本篇文章中,我们将深入探讨Vue组件中的属性和方法的基础知识。您将学习到如何定义和使用组件的props、data、computed和methods等重要特性,了解它们在组件中的作用和最佳实践。通过具体的实例,我们会逐步解析每个概念,帮助您在实际开发中更有效地管理组件间的数据流和交互。 阅读详情

相关推荐

【零基础入门VUE】VueJS - 概述

不会对 DOM 进行更改,而是创建 DOM 的副本,该副本以 JavaScript 数据结构的形式存在。最终的更改会更新到真实的 DOM,用户将看到它的变化。随后,对两个 JavaScript 对象进行比较,并在真实 DOM 中更新最终的更改。Ember 添加了 glimmer 渲染引擎,旨在提高重新渲染性能,这与使用虚拟 DOM 的 VueJS 和 React 是类似的概念。随着时间的推移,淘汰赛的发展速度已经放缓。VueJS 继承了 Angular 和 React 的优点,并构建了一个强大的库。

共同学习、强我国家 1789

Vue3组件计算属性的get和set方法

在浏览器的控制台中设置计算属性namePrice的值为“空调 5900元”,按回车键,可以发现计算属性的内容变成了“空调 5900元”,效果如图3-8所示。计算属性中的每一个属性都对应一个对象,对象中包括get和set方法,分别用来获取计算属性和设置计算属性。提示:通常情况下,get()方法需要使用return返回内容。而set()方法不需要,它用来改变计算属性的内容。默认情况下是不能直接修改计算属性的,如果需要修改计算属性,这时就需要提供一个set方法。

夏天又到了的专栏 3565

第三章 Vue组件的属性和方法(上)

3.1 属性与方法基础 3.2 计算属性和侦听器 3.3 函数限流

FrontEndEngineer的博客 398

04目标检测-Two-stage的目标检测算法

前面我们对进行了对比分析,同时上一篇我们介绍了传统算法在目标检测的原理和效果,此篇我们记录了我学习目标检测算法的深度,深入讲述一下深度学习算法在目标检测的原理和效果。原文链接:https://blog.csdn.net/qq_41946216/article/details/132800752。版权声明:本文为优快云博主「爱吃面的猫」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。One-stage(YOLO和SSD系列):直接回归目标位置。

qq_41946216的博客 3651

JPA - @MappedSuperclass - 基类注解

目录前言代码示例 前言 @MappedSuperclass注解一般作为基类的注解,表眀该类是映射的超类,继承于它的子类实体在映射时会自动添加到子类实体的对应数据库表中,用于共同的属性代码复用和模型分离。 代码示例 BaseEntity.java import lombok.Getter; import lombok.Setter; import javax.persistence.MappedSuperclass; import java.util.Date; @Getter @Setter @Ma

Maggieq8324的博客 2066

Java云上香云祭祀线上祭祀系统小程序源码

云上香云祭祀线上祭祀系统”,不仅是一种祭祀方式的创新,更是对传统文化的一次深情致敬。它让我们明白,无论时代如何变迁,对亲人的怀念与尊重永远不会改变。在这个特别的平台上,让我们共同守护那份跨越时空的爱与思念,让心灵得以安放,让生命之树常青。🌳。

2401_84413757的博客 806

ContextCapture系列教程(三):大疆精灵4RTK版无人机POS数据提取、处理(处理后勉强达到免相控要求)

大疆精灵 Phantom 4 RTK于2018年发布,是大疆为高精度建图与精准飞行设计的行业级无人机,在精灵4无人机外形的基础上,机身增加了RTK模块,可以实现高精度 RTK 定位导航,相机与 RTK 系统采用微秒级时间同步,可以通过app 进行航线规划飞行

pausau的博客 1万+

芒果YOLOv8改进72:动态标签分配策略篇之ATSS:自适应训练样本选择Adaptive Training Sample Selection策略

YOLOv8代码实践|ATSS标签分配策略改进🥭

包括YOLOv5、YOLOv7、YOLOv8等模型改进 2909

FPGA面试题目笔记(一)——FPGA开发流程、亚稳态和竞争冒险、建立保持时间、异步FIFO深度等

同步异步电路、同步异步复位、时钟偏移和抖动、最小工作周期计算、触发器锁存器

H19981118的博客 1万+

车企自动泊车技术全解|纯视觉/多传感器融合双路线、端到端大模型革新 助力机械车位/无划线车位/极窄车位精准泊车落地

随着智能驾驶技术全面下沉,自动泊车已从高端车型专属配置,普及至十万级家用车型,成为车载核心刚需功能。但市面主流车企的泊车能力差距极大,核心差异源于传感器硬件架构、算法迭代逻辑、场景训练体系的全方位分化。传统规则式泊车算法仅适配标准划线车位,面对地库暗光、标线磨损、机械双层车位、极窄靠墙车位、无划线空地泊车等真实长尾场景极易失效。

getusushu的博客 108

C/C++小宇宙代码(完整代码)

C语言实现小宇宙的完整代码。

AIGC 2526

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

上一篇: 第三章 Vue组件的属性和方法(上)
下一篇: 第四章 处理用户交互
华而有识
博客等级 码龄10年 4粉丝 20原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

华而有识

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值