vue3 学习-初识体验-常见指令v-for和v-model
继续通过小案例来体验一些常用的指令, 以经典的todolist进行展示. 首先呢通过 v-for 指令进行dom循环.
v-for
通常是在循环dom的编写的同时遍历数据进行填充.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
Vue.createApp({
data () {
return {
list: ['hello', 'world', 'vue', 'react']
}
},
template: `
<ul>
<li v-for="(item, index) of list">{{item}} {{index}}</li>
</ul>
`
}).mount('#root')
</script>
</body>
</html>
则显示结果如下:
* hello 0
* world 1
* vue 2
* react 3
v-model
用来对输入框的值和数据进行双向绑定 (共用一个数据)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
Vue.createApp({
data () {
return {
inputValue: '',
list: []
}
},
methods: {
addItem () {
this.list.push(this.inputValue)
this.inputValue = ''
}
},
template: `
<div>
<input v-model="inputValue" />
<button @click="addItem">增加</button>
<ul>
<li v-for="(item, index) of list">{{item}} {{index}}</li>
</ul>
</div>
`
}).mount('#root')
</script>
</body>
</html>
对于 v-for 的使用是极高频的, 但其实只需要了解其语法就可以了, 仅从工具使用的角度; 对于 v-model 同理, 理解输入框的值和数据用的值都用一个 inputValue 变量进行双向绑定, 或者说共享吧.这个特别高效. 以前用原生 js 来弄还是比较麻烦的, 又要处理 dom 又要处理数据. 通过 vue 这种工具就极大降低了开发的难度, 而且还特别好用.
vue3 学习-初识体验-常见指令v-for和v-model的更多相关文章
- Java学习-035-JavaWeb_004 -- JSP include 指令
inclue 指令是将不同的文件插入到 JSP 网页中,这些文件可以是文本文件.HTML文件.JSP 文件,指令语法如下: <%@include file="相对路径"%&g ...
- Java学习-034-JavaWeb_003 -- JSP page 指令
前文对 JSP 的基础知识进行了初步的讲解,此文主要讲述 JSP page 指令. page 指令用于定义页面的多种属性,例如:脚本语言.编码方式.导入的 Java 包等,page 执行的语法如下: ...
- Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- JVM学习笔记——字节码指令
JVM学习笔记——字节码指令 字节码 0与 1是计算机仅能识别的信号,经过0和1的不同组合产生了数字之上的操作.另外,通过不同的组合亦产生了各种字符.同样,可以通过不同的组合产生不同的机器指令.在不同 ...
- 在Windows环境中开始Docker的学习和体验
研究docker有一段时间了,当然我主要的使用环境还是在Linux中,确实很方便. 但也有不少朋友希望使用Windows来工作学习,这里介绍一下在Windows中如何快速开始Docker的学习和体验吧 ...
- JSP常见指令
JSP常见指令 标签: jspincludeservletjavaappletarchive 2011-11-07 20:07 13193人阅读 评论(3) 收藏 举报 版权声明:本文为博主原创文章, ...
- AngularJS1.X学习笔记8-自定义指令（上）
AngulaJS的指令是一种非常强大的特性,一个ng-repeat就能让我们非常方便的展示一个数据列表,指令相当于是一个组件,为我们将一些东西封装起来了,提供了复用的可能性.个人认为自定义指令还是比较 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
- angular学习笔记(三十)-指令(7)-compile和link(1)
这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...
随机推荐
- 解锁DeepSeek深度应用，天翼云GPU云主机强势破局！
在人工智能重塑世界的当下,一场影响深远的科技变革正在悄然上演,DeepSeek系列模型在诸多领域掀起热潮.企业级AI模型的训练与部署,不仅是技术的角力场,更是决定企业兴衰的生死线.每一次算法的迭代革新 ...
- QT5笔记：18 QPainter基本绘图
代码 #include "widget.h" #include "ui_widget.h" #include <QPainter> Widget:: ...
- 牛逼了！16.2K Star！推荐一款开源的网络爬虫和浏览器自动化库：Crawlee！
在当今的互联网世界中,网络爬虫作为一种重要的工具,被广泛应用于数据收集.内容监控.SEO优化以及自动化测试等多个领域.随着技术的不断进步,各种开源的网络爬虫库也应运而生.今天,我向大家推荐一款非常优秀 ...
- 【基础知识】回头看Maven基础
版本 日期 修订人 描述 V1.0 2025/3/7 nick huang 创建文档 背景 项目过程中,对于Maven的pom.xml文件,很多时候,我通过各种参考.仿写,最终做出想要的效果. 但实际 ...
- markdown设置目录、锚点
目录 在编辑时正确使用标题,在段首输入[toc]即可 锚点 创建到命名锚记的链接的过程分为两步: 首先是建立一个跳转的连接: [说明文字](#jump) 然后标记要跳转到什么位置,注意id要与之前(# ...
- mysql [Err] 1067 - Invalid default value for
出错原因 mysql5.7版本引起的默认值不兼容的问题,同样的问题在mysql8.0可能也会出现. 出问题的值有: NO_ZERO_IN_DATE 在严格模式下,不允许日期和月份为零. NO_ZERO ...
- supOS蓝卓工业互联网与iNeuOS工业互联网操作系统对比
最近有一个企业正在调研工业互联网平台,其中调研的是supOS蓝卓工业互联网和iNeuOS工业互联网操作系统.让我们给出一个对比情况表,我们自己总结了一份,由于不太了解supOS,于是也问了deepse ...
- vite 引入element
import {fileURLToPath, URL} from 'node:url' import {defineConfig, loadEnv} from 'vite' import vue fr ...
- 继承的介绍、使用-java se进阶 day01
1.继承的介绍 2.继承的使用 为什么要使用继承?假如以后要写一个项目,其中程序员一个类,项目经理一个类,Hr一个类,但是这些类的成员都一样 如图 我们会发现这些成员都是重复的,三个类都写重复的成员十 ...
- 【Java】枚举类和注解
一.枚举类的使用 1. 枚举类的说明: 枚举类的理解:类的对象只有有限个,确定的.我们称此类为枚举类 当需要定义一组常量时,强烈建议使用枚举类 枚举类的实现: JDK 5.0以前需要自定义 JDK 5 ...