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属性,那 ...
随机推荐
- 发那科焊接机器人M-10iA维修总结
发那科作为工业机器人制造商,其焊接机器人产品广泛应用于各种工业领域.然而,随着时间的推移,焊接机器人可能会出现故障,因此了解发那科焊接机器人M-10iA维修知识显得尤为重要. 一.日常法那科机械手维护 ...
- 关于does not have a method xx to handle event "tap"我有话要说
前言> 我正在对接微信小程序订阅消息功能,看了官方文档觉得挺简单的.于是踩坑开始了 ###### 应该是这样简单的```wx.requestSubscribeMessage({ tmplIds: ...
- 什么是CPU？
当你用手机刷短视频.用电脑玩游戏,或是使用智能手表查看健康数据时,这些设备的核心"大脑"--CPU(中央处理器)正在默默工作.它是现代计算设备的核心,但很多人对它一知半解.今天我们 ...
- How to use the shell, terminal and the advanced tools
How to use the shell, terminal and the advanced tools Introduction Why use English instead of Chin ...
- Centos安装完成后，ifconfig:command not found
1.问题:在刚最小安装完centos7,想查看本机IP地址.然后运行ifconfig,结果弹出报错. 2.问题排查:首先我们了解是不是没有开启网卡导致的?我们可以通过一下3种方法来排查: 1)通过pi ...
- 小程序和APP抓包的问题
小程序和APP抓包的问题 很多同学都会遇到小程序和APP抓不到包的问题,抓不到https请求包,这边给大家提供一些解决方案. Yakit工具 首先需要的就是一个抓包神器yakit,这个工具非常好用强大 ...
- 无法解析@NotBlank
当碰到无法解析的时候,一般都是地址写错了,找不到相应的路劲 我是全局能搜到这个包@NotBlank,在jakarta.validation-api包里面,但是我网上搜https://www.cnblo ...
- 裸金属架构之服务器安装VMWare ESXI虚拟化平台详细流程
目录1. 裸金属架构(Vcent)2. Vcent安装流程2.1 远程控制端(个人电脑)安装VMware-viclien2.2 服务器部署安装VMWare ESXI2.3 VMware-viclien ...
- WebGL 的简易入门教程
目录 前言 第一节 绘制出了一个点 效果演示 逐行解释 向量类型 第二节 动态传递点数据 变量修饰符 完整代码 第三节 缓冲区和画线 类型化数组 绘制的方式 完整代码 第四节 彩色线段 精度修饰符 完 ...
- Tinyhttpd 源代码初步解读
Tinyhttpd 是很早以前的一个 web 服务器程序,由 C 语言编写,整个程序十分小巧,源码只有几百行.它一般不适合用于生产环境,因为它很简单,只实现了读取 html 以及 Get / POST ...