vue学习一（指令3.v-on,v-for）
3.1.v-on 绑定事件 可以简写为@ ,按键修饰符 v-on:keyup = @keyup
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
7 <title>Document</title>
8 </head>
9
10 <body>
11 <script src="../node_modules/vue/dist/vue.js"></script>
12 <div id="app">
13 <!--v-on @可以字节操坐js片段-->
14 <button v-on:click="num++">点赞</button>
15 <button v-on:click="num--">取消</button>
16 <h1>有{{num}}个赞</h1>
17
18
19 <div style="border: 1px solid red;padding:20px" v-on:click="hello">
20 大div
21 <div style="border: 1px solid blue;padding:20px" @click.stop="hello">
22 小div<br/>
23 <a href="http://baidu.com" @click.prevent.stop="hello">去百度</a> <!--阻止默认事件发生 不会进去链接内容-->
24 </div>
25 </div>
26
27
28 <!--按键修饰符 @click.ctrl 单击+ctrl键-->
29 <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num+=10">
30
31 </div>
32
33 <script>
34 //v-on 绑定事件 可以简写为@
35 //1.按键修饰符 v-on:keyup
36 let vm = new Vue({
37 el:"#app",
38 data:{
39 num:1
40 },
41 methods: {
42 hello(){
43 alert("点击了");
44 }
45 },
46 })
47
48
49 /*事件修饰符：v-on提供了事件修饰符 修饰符是由点开头的指令后缀来表示的
50 1.`.stop` 阻止事件冒泡到父级
51 2.`.prevent` 阻止默认事件发生
52 3.`.capture` 组织事件捕获模式
53 4.`.self` 只有元素自身出发事件才执行（冒泡。捕获都不执行）
54 5.`.once` 只执行一次
55 */
56
57 //按键修饰符
58
59 </script>
60 </body>
61
62 </html>
3.2.v-for:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 </head>
8 <body>
9 <!--
10 1. 显示user信息 v-for="item in items"
11 2.获取数组下标：v-for="(item.index) in items
12 3.遍历对象：v-for="value in object"
13 v-for="（value.key in object"
14 v-for="value in object"
15
16
17 -->
18
19 <div id="app">
20 <ul>
21 <li v-for="(user,index) in users" :key="user.name" v-if="user.age>24">
22 当前索引{{index}} ==> {{user.name}} ==> {{user.gender}} ==> {{user.age}}
23
24 对象信息：
25 <span v-for="(v,k,i) in user">{{v}}=={{v}}=={{i}};</span>
26 <!--4.便利的时候加上：key来区分不同数据 提高vue渲染效率-->
27 </li>
28 </ul>
29
30 <ul> <!--在这里使用:key="index" 来区分不同的zhi -->
31 <li v-for="(num,index) in nums" :key="index">{{num}}</li>
32 </ul>
33 </div>
34 <script src="../node_modules/vue/dist/vue.js"></script>
35 <script>
36 let app = new Vue({
37 el:"#app",
38 data:{ //不能写成date了！！！！！！
39 users:[{name:'柳岩1',gender:'女1',age:21},
40 {name:'柳岩2',gender:'女2',age:22},
41 {name:'柳岩3',gender:'女3',age:23},
42 {name:'柳岩4',gender:'女4',age:24},
43 {name:'柳岩5',gender:'女5',age:25}],
44 nums:[1,2,3,4,4]
45 }
46 })
47 </script>
48 </body>
49 </html>
注：data:{ //不能写成date了！！！！！！
vue学习一（指令3.v-on,v-for）的更多相关文章
- Vue学习-基本指令
一.关于vue介绍:https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247485737&idx=1&sn=14fe ...
- VUE学习-自定义指令
自定义指令 有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令. <div id="directive-demo"> <input ...
- vue学习之指令简写以及事件笔记
1.v-bind:××× 可简写为 :××× 2.v-on:××× 可简写为 @××× 例: v-on:click 可简写为 @click (官网文档介绍) 3.vue处理事件 <!-- 阻止单 ...
- vue学习笔记（一） ---- vue指令（总体大纲）
一.什么是Vue 官方文档:https://cn.vuejs.org/v2/guide/ 关键字: 渐进式框架 自底向上增量开发 视图层 单文件组件 复杂的单页应用 复杂的单页应用: 顾名思义,单页应 ...
- vue学习-day01（vue指令）
目录: 1.什么是vue.js 2.为什么要学习前端的流行框架 3.框架和库的区别 4.后端MVC和前端的MVVM的区别 5.vue.js的基本代码--hollo world代 ...
- 学习动态性能表(4)--v$sqltext&v$sqlarea
学习动态性能表 第四篇-(1)-V$SQLTEXT 2007.5.29 本视图包括Shared pool中SQL语句的完整文本,一条SQL语句可能分成多个块被保存于多个记录内. 注:V$SQLARE ...
- 学习动态性能表(14)--v$parameter&v$system_parameter
学习动态性能表 第14篇--V$PARAMETER&V$SYSTEM_PARAMETER 2007.6.11 这两个视图列出的各参数项名称以及参数值.V$PARAMETER显示执行查询的se ...
- vue学习（二）Vue常用指令
2 Vue常用指令 1. vue的使用要从创建Vue对象开始 var vm = new Vue(); 2. 创建vue对象的时候,需要传递参数,是json对象,json对象对象必须至少有两个属性成员 ...
- vue学习04 v-on指令
vue学习04 v-on指令 v-on的作用是为元素绑定事件,比如click单击,dbclick双击 v-on指令可简写为@ 代码测试 <!DOCTYPE html> <html l ...
- vue学习06 v-show指令
目录 vue学习06 v-show指令 v-show指令是:根据真假切换元素的显示状态 原理是修改元素的display,实现显示隐藏 指令后面的内容,最终都会解析为布尔值(true和false) 练习 ...
随机推荐
- 【OpenGL ES】GLSL基础语法
1 前言 本文将介绍 GLSL 中数据类型.数组.结构体.宏.运算符.向量运算.矩阵运算.函数.流程控制.精度限定符.变量限定符(in.out.inout).函数参数限定符等内容,另外提供了一个 ...
- 实时社群技术专题(一)：支持百万人超级群聊，一文读懂社群产品Discord
本文由腾讯产品体验设计师volihuang分享,原题"千万级增长,实时社交产品Discord拆解",本文收录时有内容修订和大量排版优化. 1.引言 对于大多数人而言,对即时通讯IM ...
- 最新AI智能体开发案例：辅助写作神器！教你用Coze平台搭建「文匠智创 1.0」智能体！
各位小伙伴们,大家好呀!我是疯狂老包.我精心打造的<疯狂AI智能体开发:100个实战案例, 从 入门到精通 >正在开发中!要是你对 AI 应用搭建满怀热忱,渴望深入学习其中的奥秘与技巧,那 ...
- SpringCloud(一) - Dubbo + Zookeeper
Dubbo 和Zookeeper 不是SpringCloud的东西,放在这里只是为了方便复习: 1.下载安装Zookeeper和Dubbo 1.1 下载安装教程 下载安装教程 windows环境下安装 ...
- 安装Docker及相关容器
一,Docker简介百科说:Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱 ...
- bootwiki-Elasticsearch教程
https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html Elasticsearch教程 Elasticse ...
- 史上最全MySQL面试60题和答案
Mysql中有哪几种锁? 1.表级锁:开销小,加锁快:不会出现死锁:锁定粒度大,发生锁冲突的概率最高,并发度最低. 2.行级锁:开销大,加锁慢:会出现死锁:锁定粒度最小,发生锁冲突的概率最低,并发度也 ...
- 图解ArrayList源码
初始化数组长度为空时, 懒加载 add方法 初始无参构造器 第一次添加 public boolean add(E e) { // 确定容量 动态扩容 size 初始 0 ensureCap ...
- Codeforces Round 957 (Div. 3)
题目链接:Codeforces Round 957 (Div. 3) 总结:E不懂,F差一个set去重 A. Only Pluses fag:枚举 B. Angry Monk fag:模拟 Solut ...
- Brainfly: 用 C# 类型系统构建 Brainfuck 编译器
Brainfuck 简介 Brainfuck 是由 Urban Müller 在 1993 年创造的一门非常精简的图灵完备的编程语言. 正所谓大道至简,这门编程语言简单到语法只有 8 个字符,每一个字 ...