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) 练习 ...
随机推荐
- Qt音视频开发29-Onvif云台控制
一.前言 云台控制也是onvif功能中最常用的,最常用的功能排第一的是拿到视频流地址,排第二的就是云台控制了,云台控制的含义就是对带云台的摄像机进行上下左右的移动,一般云台摄像机都是带有一个小电机,一 ...
- vs 禁用c++编译警告提示的两种方式
1. 禁用单个cpp文件编译警告 #pragma warning(disable:警告号) 如:当前提示C4305警告; 加入禁用单个cpp文件编译警告; 结果:编译警告消失. 2. 全局禁用指定警告 ...
- Spring Security默认登录页面代码位于哪里？
问:Spring Security默认登录页面代码位于哪里? 答:它是从此类生成的org.springframework.security.web.authentication.ui.DefaultL ...
- [转]vue项目中app.vue 、main.js和 index.html的关系
参考链接: 1.vue项目中app.vue .main.js和 index.html的关联 2.Vue中index.html.main.js.App.vue,之间关系 3.关于Vue中main.js, ...
- Linux：GPU
什么是GPU? CPU和GPU之所以大不相同,是由于其设计目标的不同,它们分别针对了两种不同的应用场景.CPU需要很强的通用性来处理各种不同的数据类型,同时又要逻辑判断又会引入大量的分支跳转和中断的处 ...
- 网络通信协议：TCP（三次握手四次挥手）和UDP
通信要素2:网络协议 网络通信协议计算机网络中实现通信必须有一些约定,即通信协议,对速率.传输代码.代码结构.传输控制步骤.出错控制等制定标准. 问题:网络协议太复杂计算机网络通信涉及内容很多, ...
- 【推荐】一款.NET Core开发的开源免费功能完善的医疗影像PACS系统
项目介绍 今天给大家推荐一款开源(MIT License开源协议).免费.完善.轻量级的医疗影像PACS系统,基于.NET Core 的 DICOM SCP(Service Class Provide ...
- 并发编程 - 线程同步（三）之原子操作Interlocked简介
上一章我们了解了3种处理多线程中共享资源安全的方法,今天我们将更近一步,学习一种针对简单线程同步场景的解决方案--Interlocked. 在此之前我们先学习一个概念--原子操作. 01.原子操作 原 ...
- Nginx的HTTP模块与Stream模块：区别与应用场景
本文分享自天翼云开发者社区<Nginx的HTTP模块与Stream模块:区别与应用场景>,作者:云海 Nginx是一个多功能的开源Web服务器,它支持多个模块,其中两个重要的模块是HTTP ...
- shell 变量的运算、保存硬件信息脚本
变量的数学运算 方法一:expr ##加减乘除 [root@localhost ~]# num1=10[root@localhost ~]# num2=16[root@localhost ~]# ex ...