当前位置： 首页 > news >正文

【Vue3】2-13 : 章节总结

news 2025/7/8 12:39:14

本书目录：点击进入

一、总结内容

二、习题

2.1 【选择题】以下Vue指令中，哪些指令具备简写方式？

2.2 【编程题】以下Vue指令中，哪些指令具备简写方式？

＞  效果

＞  代码

一、总结内容

  • 了解核心思想，例如：MVVM设计模式、选项式API优势

  • 了解Vue3各个选项的用法，例如：data、methods、computed等

  • 掌握常见的指令：v-bind、v-on、v-if、v-for等

  • 掌握样式操作、表单操作等行为

  • 了解Vue3的生命周期钩子函数，及如何使用

二、习题

2.1 【选择题】以下Vue指令中，哪些指令具备简写方式？

        A：v-if
        B：v-bind
        C：v-model  
        D：v-on

参考答案：  BD  ( v-bind简写为  :    v-on简写为 @ )

2.2 【编程题】要求如下：

        1. 输入框中内容根据顿号进行分割
        2. 复选项选中添加水果名称到输入框中
        3. 复选框取消选中从输入框中删除水果名称
        4. 输入框可直接输入内容来联动复选框

＞  效果

＞  代码

<body>
<div id="app"><input type="text" v-model="fruitsInput"><br><input type="checkbox" v-model="fruits" value="西瓜">西瓜<br><input type="checkbox" v-model="fruits" value="苹果">苹果<br><input type="checkbox" v-model="fruits" value="哈密瓜">哈密瓜<br><input type="checkbox" v-model="fruits" value="芒果">芒果<br>
</div>
<script>let vm = Vue.createApp({data() {return {fruits: ['苹果', '芒果']}},computed: {fruitsInput: {set(val){this.fruits = val.split('、');},get(){return this.fruits.join('、');}}}}).mount("#app")
</script>
</body>

相关文章：

【Vue3】2-13 : 章节总结

本书目录&#xff1a;点击进入 一、总结内容 二、习题 2.1 【选择题】以下Vue指令中&#xff0c;哪些指令具备简写方式&#xff1f; 2.2 【编程题】以下Vue指令中&#xff0c;哪些指令具备简写方式&#xff1f; &#xff1e; 效果 &#xff1e; 代码 一、总结内容 了解核…...

编程日记 2024/1/18 16:51:20

前端学习路径

菜鸟感觉很多人不太知道菜鸟写的博客是一个可以跟着学习、一起深入理解的过程&#xff0c;其中包括了菜鸟从刚开始学习到后面重新学习&#xff0c;再到后面进入学框架等一系列学习过程、知识和感悟&#xff0c;所以菜鸟把自己的博客整理成一个目录提取出来&#xff0c;好让读者…...

编程日记 2024/1/18 16:50:19

算法--插值法

插值法是一种数学方法&#xff0c;主要用于通过已知的离散数据来估算未知值。常见的插值法有线性插值、最近邻插值、双线性插值和双三次插值。以下是其基本原理和应用&#xff1a; 线性插值&#xff1a;假设在两个已知数据点之间&#xff0c;数据的变化是线性的&#xff0c;因…...

编程日记 2024/1/18 16:46:14

uniapp写微信小程序实现电子签名

写电子签名一定要注意的是一切全部按照手机上的适配来&#xff0c;为啥这么说呢&#xff0c;因为你在微信开发者工具中调试的时候认为是好的&#xff0c;正常的非常nice,当你发布版本的时候你会发现问题出来了。我下边的写法你可以直接用很简单。就是要记住canvas的几个属性和用…...

编程日记 2024/1/18 16:44:12

使用 Categraf 采集 Nginx 指标

1. 前言 工作中需要监控 Nginx 的指标&#xff0c;选用的指标采集器是 Categraf&#xff0c;特此记录下&#xff0c;以备后用。 此文档并未详细记录详细的操作细节&#xff0c;只记录了大概的操作步骤&#xff0c;仅供参考。 2. 采集基础指标 2.1. 暴露 Nginx 自带的指标采…...

编程日记 2024/1/18 16:43:11

【Internet Protocol】ip介绍，如何组局域网实现远程桌面和文件共享

文章目录 1.何为“上网”1.1 定义1.2 为什么连了WiFi就能上网了&#xff1f; 2.ip2.1 什么是ip2.2 为什么区分广域网和局域网&#xff0c;ip的唯一性2.3 如何查看设备的ip2.4 什么叫"ping"2.5 区分是否两个ip是否在同一局域网2.5.1 最稳妥的方式&#xff1a;ip&m…...

编程日记 2024/1/18 16:41:07

Java 使用 EasyExcel 爬取数据

一、爬取数据的基本思路 分析要爬取数据的来源 1. 查找数据来源&#xff1a;浏览器按 F12 或右键单击“检查”打开开发者工具查看数据获取时的请求地址 2. 查看接口信息&#xff1a;复制请求地址直接到浏览器地址栏输入看能不能取到数据 3. 推荐安装插件&#xff1a;FeHelper&a…...

编程日记 2024/1/18 16:39:04

React 原理

函数式编程 纯函数 reducer 必须是一个纯函数&#xff0c;即没有副作用的函数&#xff0c;不修改输入值&#xff0c;相同的输入一定会有相同的输出不可变值 state 必须是不可变值&#xff0c;否则在 shouldComponentUpdate 中无法拿到更新前的值&#xff0c;无法做性能优化操作…...

编程日记 2024/1/18 16:37:01

java高并发系列 - 第4天:JMM相关的一些概念

JMM(java内存模型)&#xff0c;由于并发程序要比串行程序复杂很多&#xff0c;其中一个重要原因是并发程序中数据访问一致性和安全性将会受到严重挑战。如何保证一个线程可以看到正确的数据呢&#xff1f;这个问题看起来很白痴。对于串行程序来说&#xff0c;根本就是小菜一碟&…...

编程日记 2024/1/18 16:34:58

如何卸载旧版docker

环境&#xff1a; Docker1.13 centos7.6 问题描述&#xff1a; 如何卸载旧版docker 解决方案&#xff1a; 1.停止Docker服务。使用以下命令停止Docker服务&#xff1a; sudo service docker stop2.卸载Docker软件包。根据您的Linux发行版&#xff0c;使用适当的包管理器来…...

编程日记 2024/1/18 16:33:57

Wheeltec小车的开发实录（0）

配置静态ip&#xff08;可以联网&#xff09; 首先在你正常链接网络的时候打开“Connection Information”(我的是wifi&#xff0c;而且是手机热点&#xff0c;所以我手机就相当于一台路由器) 查看路由ip 观察到Default Route 是192.168.***.225这就是我手机的地址&#xff0…...

编程日记 2024/1/18 16:32:55

uniapp中uview组件库的NoticeBar 滚动通知 使用方法

目录 #平台差异说明 #基本使用 #配置主题 #配置图标 #配置滚动速度 #控制滚动的开始和暂停 #事件回调 #API #Props #Events 该组件用于滚动通告场景&#xff0c;有多种模式可供选择 #平台差异说明 AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√…...

编程日记 2024/1/18 16:31:54

蓝桥杯每日一题----货物摆放

题目 分析 上来一看&#xff0c;三个for循环&#xff0c;从1到n&#xff0c;寻找满足lwhn的个数&#xff0c;但是这样根本跑不出来答案&#xff0c;n太大了&#xff0c;1e15的级别&#xff0c;O&#xff08;n&#xff09;的时间复杂度都不行&#xff0c;更何况是O&#xff08;…...

编程日记 2024/1/18 16:30:51

（二十）Flask之上下文管理第一篇（粗糙缕一遍源码）

每篇前言&#xff1a; &#x1f3c6;&#x1f3c6;作者介绍&#xff1a;【孤寒者】—CSDN全栈领域优质创作者、HDZ核心组成员、华为云享专家Python全栈领域博主、CSDN原力计划作者 &#x1f525;&#x1f525;本文已收录于Flask框架从入门到实战专栏&#xff1a;《Flask框架从入…...

编程日记 2024/1/18 16:27:47

Tensorflow2.0笔记 - 基础数学运算

本笔记主要记录基于元素操作的,-,*,/,//,%,**,log,exp等运算&#xff0c;矩阵乘法运算&#xff0c;多维tensor乘法相关运算 import tensorflow as tf import numpy as nptf.__version__#element-wise运算&#xff0c;对应元素的,-,*,/,**,//,% tensor1 tf.fill([3,3], 4) ten…...

编程日记 2024/1/18 16:25:44

年底聚餐无压力，HUAWEI WATCH GT 4 助力体形管理和健康守护

过了腊八就是年&#xff0c;逢年过节聚餐频繁。在品味美食、享受亲情温馨的同时&#xff0c;你是否也在担心自己的健康与体形呢&#xff1f;华为WATCH GT 4搭载心率监测、血氧检测和减脂塑形等功能&#xff0c;让你尽情享受美食的同时保持健康。 华为WATCH GT 4的心率监测功能…...

编程日记 2024/1/18 16:23:42

Tomcat Notes: URL Mapping

This is a personal study notes of Apache Tomcat. Below are main reference material. - YouTube Apache Tomcat Full Tutorial&#xff0c;owed by Alpha Brains Courses. https://www.youtube.com/watch?vrElJIPRw5iM&t801s 1、URL Mapping To Resources1.1、What w…...

编程日记 2024/1/18 16:22:41

【JVM】JVM概述

JVM概述 基本介绍 JVM&#xff1a;全称 Java Virtual Machine&#xff0c;即 Java 虚拟机&#xff0c;一种规范&#xff0c;本身是一个虚拟计算机&#xff0c;直接和操作系统进行交互&#xff0c;与硬件不直接交互&#xff0c;而操作系统可以帮我们完成和硬件进行交互的工作特…...

编程日记 2024/1/18 16:18:36

【2023开发组二等奖】湖南省国土空间规划双评价系统

作品介绍 1 需求分析 1.1 背景与意义 在我国辽阔的国土空间中，各地区的地形地势、自然条件和资源环境禀赋存在显著差异。然而，随着人口增长和城市化进程加快，高强度的不合理开发和产业布局广泛分布，使得部分地区的经济社会发展规模超过了资源环境的承载能力。因此，执行主…...

编程日记 2024/1/18 16:17:35

Flutter为什么不需要子线程——Dart IO源码剖析（上）

Dart IO 源码剖析 许多Flutter新手&#xff0c;特别是安卓、iOS原生开发转做Flutter的小伙伴&#xff0c;一直对Flutter 单线程模型开发APP倍感不解&#xff0c;他们总是喜欢本能的把网络请求、文件读写放到一个单独线程去做&#xff0c;因为“耗时操作会阻塞UI线程嘛”。于是…...

编程日记 2024/1/18 16:13:30

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2025/7/7 19:25:19

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/7/7 16:55:31

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/7/7 13:07:24

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/6/21 5:44:18

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/6/21 18:22:13

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/7/7 11:00:13

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/7/6 12:38:55

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/7/7 8:27:40

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

编程新知 2025/7/8 5:55:35

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...

编程新知 2025/7/7 12:27:13