Vue框架-03：JS的几种循环方式，Key值的解释，数组/对象的检测与更新，input事件，v-model数据双向绑定，过滤案例，事件修饰符，按键修饰符，表单控制
前端开发之Vue框架
一、JS循环的几种方式
1、v-for可循环的变量
循环数组：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for循环</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>循环数组</h1>
<div v-for="(item,index) in dataList">
<p>列表索引第：{{index}} 位，值：{{item}}</p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app01',
data: {
// 数组
dataList: ['1', '2', '3', '4', '5']
}
})
</script>
</html>
循环对象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for循环</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>循环对象</h1>
<div v-for="(value,key) in dataObj">
<p>值：{{value}}，键：{{key}}</p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app01',
data: {
// 对象
dataObj: {
name: 'kang',
age: 18,
gender: 'male'
}
}
})
</script>
</html>
循环字符：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for循环</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>循环字符</h1>
<div v-for="(item,index) in dataStr">
<p>值：{{item}}，对应索引位置：{{index}}</p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app01',
data: {
// 字符
dataStr: 'Happy every day'
}
})
</script>
</html>
循环数字：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for循环</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>循环数字</h1>
<div v-for="(item,index) in 10">
<p>值：{{item}}，对应索引位置：{{index}}</p>
</div>
</div>
</body>
</html>
2、js的循环方式
基于索引的循环：自定义数字或根据数组内数据的个数循环
<script>
// 方式一：自定义循环
for (i = 0; i < 10; i++) {
console.log(i)
}
// 方式二：基于索引循环
var a = [1,2,3,4,5]
for (i = 0; i < a.length; i++) {
console.log(i)
}
</script>
js的in循环：获取到的是索引位置
<script>
var a = [1, 2, 3, 4, 5]
for (i in a) {
console.log(i,a[i]) // i:索引的位置，a[i]：值
}
</script>
js的of循环：根据数组内数据的个数循环，获取到的是值（循环对象会报错）
<script>
var a = [100, 2,99, 4, 2]
for (i of a) {
console.log(i)
}
</script>
js的forEach循环：
<script>
var b = [1212,223,344,45,624]
b.forEach(function (item,index){
console.log(item,index)
})
</script>
jq的Each循环：需要引入jqery的cdn
<script>
// 循环对象
var a = {
'name': 'kangkang',
'age': '18',
'gender': 'male'
}
$.each(a,function(key,value){
console.log(key,value)
} )
// 循环数组
var b = [1212, 223, 344, 45, 624]
$.each(b, function (index, item) {
console.log(index, item)
})
</script>
二、Key值的解释
在使用Vue的v-for循环时，其底层原理是将被循环的数据依次添加到页面中，若已被循环的数据局部发生改变时，按常规的理解，其底层还要重新进行一次循环，更新数据，但在Vue中可以在被循环的标签上指定一个key属性，指定该属性的值为当前被循环的值的索引位置，这样当数据只是发送局部改变时，其底层就只会将局部的数据根据索引位置添加到页面中，这样做的效果是可以提高虚拟dom操作的效率，从而提高循环效率，注意：key值必须为唯一值
<div v-for="item in 10" :key="item">{{item}}</div>
三、数组、对象的检测与更新
在已经被循环渲染的页面上，将数据中新增一个键值对，发现数据并没有被同步渲染出来，这是因为Vue中存在一个小的BUG，只需要用Vue.set(this.info, 'hobby', '篮球') 设置一下即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for循环</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<div v-for="(key,value) in dataObj">
<p>值：{{key}}，键：{{value}}</p>
</div>
<button @click="handleClick">点我添加数据</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app01',
data: {
// 对象
dataObj: {
name: 'kang',
age: 18,
gender: 'male'
},
}
,
methods: {
handleClick() {
this.dataObj['hobby'] = 'read'
// Vue.set(this.dataObj, 'hobby', 'read')
}
}
})
</script>
</html>
四、input事件
常用的input事件
| 方法 | 描述 |
|---|---|
| click | 单击时触发 |
| input | 当输入框进行输入的时候，触发的事件 |
| change | 当元素的值发生改变时，触发的事件 |
| blur | 当输入框失去焦点的时候，触发的事件 |
| focus | 当获得焦点，触发事件 |
代码用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for循环</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>点击事件 --- click</h1>
<input type="text" @click="handleClick">
<h1>输入事件 --- input</h1>
<input type="text" @input="handleInput">
<h1>输入框发文本生改变触发 --- change</h1>
<input type="text" @change="handleChange">
<h1>输入框失去焦点触发 --- blur</h1>
<input type="text" @blur="handleBlur">
<h1>输入框获得焦点触发 --- focus</h1>
<input type="text" @focus="handleFocus">
</div>
</body>
<script>
var vm = new Vue({
el: '#app01',
data: {},
methods: {
handleClick() {
alert('触发了click事件')
},
handleInput() {
alert('触发了input事件')
},
handleChange() {
alert('触发了change事件')
},
handleBlur() {
alert('触发了blur事件')
},
handleFocus(){
alert('触发了focus事件')
}
}
})
</script>
</html>
五、v-model双向数据绑定
简介：
在input框中输入数值时，输入后就会被js变量拿到，如果使用的是：value="变量"，的方式，页面中输入框变化，变量不会变，只有使用v-model才能够做到数据双向绑定
代码用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model双向数据绑定</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>常规数据绑定</h1>
<input type="text" :value="data_str">------>{{data_str}}
<h1>v-model 双向数据绑定</h1>
<input type="text" v-model="model_str">------>{{model_str}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app01',
data: {
data_str: '',
model_str: '',
}
})
</script>
</html>
六、过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div>
<div class="app">
<p>请输入要搜索的内容：<input type="text" v-model="myText" @input="handleInput"></p>
<ul>
<li v-for="item in newDataList">{{item}}</li>
</ul>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '.app',
data: {
myText: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
newDataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
},
methods: {
handleInput() {
this.newDataList = this.dataList.filter(
item => item.indexOf(this.myText) >= 0
)
}
}
})
</script>
</html>
七、事件修饰符（了解）
| 修饰符 | 描述 |
|---|---|
| .stop | 自己的事件结束后不会父标签冒泡（阻止事件冒泡） |
| .self | 只处理自己的事件，子标签冒泡的事件不处理 |
| .prevent | 阻止a链接的跳转 |
| .once | 事件只会触发一次（适用于抽奖页面） |
代码用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for循环</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<h1>stop事件修饰</h1>
<div @click="handleDiv">
<p><span @click.stop="handleSpan">我是div的子标签span1</span></p>
<p><span>我是div的子标签span2</span></p>
</div>
<h1>self事件修饰</h1>
<div @click.self="handleDiv">
<p><span @click="handleSpan">我是div的子标签span1</span></p>
<p><span>我是div的子标签span2</span></p>
</div>
<h1>prevent阻止a标签跳转</h1>
<p><a href="https://www.baidu.com" @click.prevent="handleA">点我进入百度搜索</a></p>
<h1>once事件只会触发一次</h1>
<span @click.once="handleA">点我触发事件</span>
</div>
</body>
<script>
var vm = new Vue({
el: '#app01',
data: {} ,
methods: {
handleDiv() {
alert('触发了div标签事件')
},
handleSpan() {
alert('触发了span1标签事件')
},
handleA() {
alert('a标签被点击了')
}
}
})
</script>
</html>
八、按键修饰符
简介：
指，只要按下键盘上的某一个案件就会触发函数执行
代码介绍：
@keyup="handleKeyUp" # 只要按下某个键就会触发函数
@keyup.enter # enter为指定的案件，只有按下enter才会触发函数
@keyup.13 # 13是与键盘上某个按键的参照数，指只有按下对应的按键才会触发函数
代码用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for循环</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<input type="text" @keyup.x="handleKeyup">
</div>
</body>
<script>
var vm = new Vue({
el: '#app01',
data: {},
methods: {
handleKeyup(data) {
console.log(data)
}
}
})
</script>
</html>
九、表单控制
简介：
表单控制指，可以监听并input标签type属性的，实时完成数据双向绑定
- text类型：
- 字符，绑定字符类型变量
- radio：
- 单选，绑定字符类型变量
- ckeckbox：
- 多选，绑定数组类型变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控制</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app01">
<p>用户名：</p>
<p><input type="text" v-model="username"></p>
<p>性别：</p>
<p>
男：<input type="radio" v-model="gender" value="男">
女：<input type="radio" v-model="gender" value="女">
</p>
<p>爱好：</p>
<p>
阅读：<input type="checkbox" v-model="hobby" value="read">
编程：<input type="checkbox" v-model="hobby" value="python">
运动：<input type="checkbox" v-model="hobby" value="sports">
</p>
<br>
<hr>
<span>用户输入：
<p>{{username}}</p>
<p>{{gender}}</p>
<p>{{hobby}}</p>
</span>
</div>
</body>
<script>
var vm = new Vue({
el: '#app01',
data: {
username: '',
gender: '',
hobby: []
},
})
</script>
</html>
十、补充
1、数字过滤方法
// 补充1 ：数组的过滤方法
// var dataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
// var newDataList = dataList.filter(function (item) {
// return false // return true表示这个值保留,false 表示这个值不要
// })
// console.log(newDataList)
2、字符串indexof方法
判断子字符串是否在当前字符串中,如果在返回的是索引，如果不在返回0以下数字
// var s = 'lqz is handsome'
// var s1 = 'qqq'
// var i = s.indexOf(s1)
// console.log(i)
3、箭头函数
es6 的箭头函数写法---》函数中套函数，this指向有问题，有了箭头函数，箭头函数没有自己的this，用的都是上一级的this
1、 无参数，无返回值箭头函数
var f = () => {
console.log('函数')
}
2、有一个参数，没有返回值的箭头函数 括号可以去掉,可以加
var f = item => {
console.log(item)
}
3、有多个参数，没有返回值的箭头函数 括号不能去掉
var f = (item, key) => {
console.log(item)
}
4、有一个参数，一个返回值
var f = (item)=> {
return item + 'lqz'
}
var f = item => {
return item + 'lqz'
}
Vue框架-03：JS的几种循环方式，Key值的解释，数组/对象的检测与更新，input事件，v-model数据双向绑定，过滤案例，事件修饰符，按键修饰符，表单控制的更多相关文章
- 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶
今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...
- 【温故知新】——原生js中常用的四种循环方式
一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出“欢迎下次光临” 在网页中弹出框输入1 网页输出“查询中……” 在 ...
- 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- java框架之Hibernate(4)-几种检索方式
准备 模型及映射文件 package com.zze.bean; import java.util.HashSet; import java.util.Set; public class Class ...
- 原生js实现 vue的数据双向绑定
原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...
- 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
- js的三种继承方式及其优缺点
[转] 第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = ' ...
- js的6种继承方式
重新理解js的6种继承方式 注:本文引用于http://www.cnblogs.com/ayqy/p/4471638.html 重点看第三点 组合继承(最常用) 写在前面 一直不喜欢JS的OOP,在学 ...
- 细说 js 的7种继承方式
在这之前,先搞清楚下面这个问题: function Father(){} Father.prototype.name = 'father'; Father.prototype.children = [ ...
- 原生js实现数据双向绑定
最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...
随机推荐
- PEP8语法规范解释说明
PEP8规范解析 内容概要: 1.PEP8规范是什么? 2.PEP8相关内容 1.PEP8规范是什么 PEP是Python Enhancement Proposal的缩写,翻译为:"Pyth ...
- sublime text设置build system automatic提示no build system
解决办法: 将: "selector": "source.asm" 改为: "selector": ["source.asm&qu ...
- ThinkPHP6.0在phpstorm添加查询构造器和模型的代码提示
ThinkPHP6.0升级后 使用查询构造器和模型都没有了提示 原因是tp6源码中没有添加注释 找到Model.php * @method Query where(mixed $field, stri ...
- ArcObjects SDK开发 008 从mxd地图文件说起
1.Mxd文件介绍 ArcGIS的地图文件为.mxd扩展名.Mxd文件的是有版本的,和ArcGIS的版本对应.可以在ArcMap中的File-Save A Copy,保存一个地图拷贝的时候选择Mxd文 ...
- 【消息队列面试】11-14：kafka高可靠、高吞吐量、消息丢失、消费模式
十一.kafka消息高可靠的解决方案 1.高可靠=避免消息丢失 解决消息丢失的问题 2.如何解决 (1)保证消息发送是可靠的(发成功了/落到partition) a.ack参数 发送端,采用ack机制 ...
- referer的反爬和爬虫下载视频
一.缘由 在梨视频等一些网站中会使用防盗链作为反爬的基础方法,这个反爬并不严重,只是平时的时候需要多加留意.此次实现对应链接中梨视频的下载. 二.代码实现 #1.拿到contid #2.拿到video ...
- 【敏捷研发系列】前端DevOps流水线实践
作者:胡骏 一.背景现状 软件开发从传统的瀑布流方式到敏捷开发,将软件交付过程中开发和测试形成快速的迭代交付,但在软件交付客户之前或者使用过程中,还包括集成.部署.运维等环节需要进一步优化交付效率.因 ...
- Linux NTP工具的基本使用
NTP 时间同步 NTP(Network Time Protocol)协议,网络时间协议.利用ntp协议可以实现网络中的计算机时间同步. 实现NTP协议的工具: ntpdate:只能同步一次时间 nt ...
- 可视化编排的数据集成和分发开源框架Nifi轻松入门-上
@ 目录 概述 定义 dataflow面临挑战 特性 核心概念 架构 高级概述 安装 部署 常见处理器 入门示例 概述 定义 Nifi 官网地址 https://nifi.apache.org/ Ni ...
- [OpenCV实战]17 基于卷积神经网络的OpenCV图像着色
目录 1 彩色图像着色 1.1 定义着色问题 1.2 CNN彩色化结构 1.3 从 中恢复彩色图像 1.4 具有颜色再平衡的多项式损失函数 1.5 着色结果 2 OpenCV中实现着色 2.1 模型下 ...