js的几种循环方式

1.v-for可以循环的变量

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<h2>1.循环数组</h2>
<span v-for="item in l">{{item}}</span>
<h2>2.循环数组带索引</h2>
<div v-for="(item,index) in l">第{{index+1}}个值,值是{{item}}</div>
<h2>3.循环对象,默认value</h2>
<div v-for="item in info">{{item}}</div>
<h2>4.循环对象,带key和value</h2>
<div v-for="(item,index) in info">{{index}}:{{item}}</div>
<h2>5.循环字符串</h2>
<div v-for="item in T">{{item}}</div>
<h2>6.循环字符串,带索引</h2>
<div v-for="(item,index) in T">第{{index+1}}个字母{{item}}</div>
<h2>7.循环字符串,带索引,空格也算占位</h2>
<div v-for="(item,index) in T"><p v-if="item!=' '">第{{index+1}}个字符{{item}}</p><br v-else></div>
<h2>8.循环数字</h2>
<div v-for="item in 6">{{item}}</div>
<h2>9.循环数字带索引</h2>
<div v-for="(item,index) in 6">第{{index+1}}个数是{{item}}</div>
</div>
</body>
<script>
new Vue({
el:'.app',
data:{
l:[1,2,3],
info:{name:'han',age:23},
T:'hello world!',
}
})
</script>
</html>

2.js的循环方式

# 1.js循环都是基于索引的循环
"""
python没有基于索引的循环,都是基于迭代的循环
"""
<script>
for(i=0;i<10;i++){
console.log(i)
} // 0,1,2,3,4,5,6,7,8,9
var a = [4,5,6,7]
for (i=0;i<a.length; i++){
console.log(a[i])
} // 4,5,6,7 (基于索引的循环)
</script> # 2.js的in循环,拿到的是索引
<script>
// 基于迭代的循环
var a= [4,5,6,7]
for (item in a){
console.log(item)
} // 0,1,2,3 原生js拿到的是索引
var a = [4,5,6,7]
for (i in a) {
console.log(a[i])
} // 4,5,6,7 拿到的是a里面的值
</script> # 3.es6语法,of循环
<script>
var a = [4,5,6,7]
for (item of a) {
console.log(item)
} // 4,5,6,7
</script> # 4.数组的方法,forEach可以循环
<script>
var a = [4,5,6,7]
a.forEach( function (item){
console.log(item)
}) // 4,5,6,7 a如果是对象就无法点出forEach
</script> # 5.jquery的循环,循环数组,对象
// 需要引入jquery的cdn
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
// 代码:
<script>
var a = [4,5,6,7]
$.each(a, function (index,item) {
console.log(index) // 0,1,2,3 索引
console.log(item) // 4,5,6,7 数值
}) // 0,4,1,5,2,6,3,7
</script>

key值的解释

<div v-for="item in 8" :key="item">{{item}}</div>
1. vue的v-for写在标签上,
2. 在标签上加一个key(key属性是vue提供的),
3. 用属性指令()绑定一个变量
4. key(每次循环key值是唯一的)的值每次都不相同
5. 这样可以加速虚拟dom的替换,从而提升循环效率

数组,对象的检测与更新

# 对象:
- 新增一个key-value,发现页面没有变化,以后用:
Vue.set(this.info, 'hobby','篮球')
- 设置一下即可
# 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<h1>循环对象</h1>
<div v-for="(value,key) in info">
<h2>key值为:{{key}}</h2>
<h3>value值为:{{value}}</h3>
<br>
</div>
<button @click="handleAdd">点我添加数据</button>
</div>
</body>
<script>
new Vue({
el:'.app',
data:{
info:{name:'han',age:23},
},
methods:{
handleAdd(){
// 页面会变化
this.info['name'] = '彭于晏'
// 页面不会变,
Vue.set(this.info,'hobby','篮球')
}
}
})
</script>
</html>

input事件

# input的事件:
click 点击事件
input 当输入框进行输入的时候触发的事件
chango 当元素的值发生改变时,触发的事件
blur 当输入框失去焦点的时候,触发的事件
focus 当获得焦点触发事件 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<h1>1.点击事件</h1>
<input type="text" @click="handleClick">
<h1>2.失去焦点</h1>
<input type="text" @blur="handleBlur">
<h1>3.输入事件input</h1>
<input type="text" @input="handleInput">
<h1>4.change事件</h1>
<input type="text" @change="handleChange">
<h1>5.focus事件</h1>
<input type="text" @focus="handleFocus">
</div> </body>
<script>
new Vue({
el:'.app',
data:{
},
methods:{
handleClick() {
alert('点击了事件')
},
handleBlur(){
console.log('失去了焦点')
},
handleInput(){
console.log('输入了东西')
},
handleChange(){
console.log('内容发生改变')
},
handleFocus(){
console.log('获得了焦点')
}
}
})
</script>
</html>

v-model双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<h1>1.单向数据绑定</h1> <!--改变变量vm对应的数据,才会发生改变-->
<input type="text" :value="name">{{name}}
<h1>2.双向数据绑定</h1> <!--改变变量vm对应数据或前端输入框任意一个,另一个也会改变-->
<input type="text" v-model="age">{{age}}
</div> </body>
<script>
var vm = new Vue({
el:'.app',
data:{
name:'han',
age:23
},
})
</script>
</html>

过滤案例

箭头函数

<script>
// 补充
// 1.数组的过滤方法
var dataList=['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
dataList.filter(function (item){
return true // 表示这个值保留,false表示这个值舍弃
})
// 2.字符串indexOf方法
// 判断子字符串是否在当前字符串中,在返回其索引,不再返回-1
var s = 'han is handsome'
var s1 = 'hhh'
var s2 = s.indexOf(s1)
console.log(i)
// 3.es6的箭头函数写法
// 函数中套函数,this指向有问题,有了箭头函数,用的都是上一级的this,因为箭头函数没有自己的this
// >-1. 无参数,无返回值箭头函数
var f = () => {
console.log('函数')
}
// >-2.有一个参数,没有返回值的箭头函数,括号可留可去
var f = item => { // var f = (item) => {
console.log(item)
}
// >-3.有多个参数,没有返回值的箭头函数,括号不可去
var f = (item, key) => {
console.log(item)
}
// >-4.有一个参数,一个返回值
// 方式一:
var f = (item)=> {
return item + 'han'
}
// 方式二:
var f = item => {
return item + 'han'
}
// 方式三:
var f = item => item + 'han' var res = f('han')
console.log(res) </script>

过滤

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<h1>过滤案例</h1>
<p>请输入你要搜索的内容:
<input type="text" v-model="myText" @input="handleInput">
</p>
<ul>
<li v-for="item in newDataList">{{item}}</li>
</ul>
</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在不在myText中
// // 1.this指向问题
// // if (_this.myText.indexOf(item) >= 0) {
// // 2.判断输入的值myText是否在item中
// // if (item.indexOf(_this.myText) >= 0) {
// // return true
// // } else {
// // return false
// // }
// // 以上五行简写后:
// return item.indexOf(this.myText) >= 0
// })
// 简化后
this.newDataList = this.dataList.filter(item => item.indexOf(this.myText) >= 0 )
}
}
})
</script>
</html>

事件修饰符

# 事件的修饰符
.stop 只处理自己的事件,子控件冒泡的事件不处理(组织事件冒泡)
.self 只处理自己的事件,子控件冒泡的事不处理
.prevent 阻止a链接的跳转
.once 事件只会触发一次(适用于抽奖) # 代码示例:(在console中查看效果)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<h1>事件修饰符stop,子控件不再冒泡给父控件</h1>
<ul @click='handleUl'>
<li @click.stop="handleLi">第一</li>
<li>第二</li>
</ul> <h1>事件修饰符self:只处理自己的事件,子控件的冒泡,不处理</h1>
<ul @click.self="handleUl">
<li @click='handleLi'>第一</li>
<li>第二</li>
</ul> <h1>prevent组织a的跳转</h1>
<a href="http://www.cnblog.com" @click.prevent="handleA">点击进入博客园</a> <h1>once 只响应一次</h1>
<button @click.once="handleClick">点击抽奖</button>
</div> </body>
<script>
var vm = new Vue({
el:'.app',
data:{},
methods: {
handleLi() {
console.log('li被点击了')
},
handleUl() {
console.log('ul被点击了')
},
handleA(){
console.log('a标签被点击了')
// 阻止a的跳转,自己决定要不要跳
// 手动指定跳
location.href = 'http://www.baidu.com'
},
handleClick() {
console.log('点击事件')
}
}
}) </script>
</html>

按键修饰符

# 按钮事件:按了键盘某个键,就会触发函数的执行
@keyup="handleKeyUp" # 键盘事件
keydown:按下键盘键
keypress:紧接着keydown事件触发(只有按下字符键时触发)
keyup:释放键盘键 # 按键修饰符:只有某个按键被按下才触发
@keyup.enter
@keyup.13 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<!-- 1.按键检测-->
<!-- <input type="text" v-model="text" @keyup="handleKeyUp">{{text}}-->
<!-- 2.只能检测特定的按键,以回车键为例-->
<!-- <input type="text" v-model="text" @keyup="handleKeyUp1">{{text}}-->
<!-- 3.监测回车键,传入两个参数,a对应的是1,event对应2-->
<!-- <input type="text" v-model="text" @keyup.13="handleKeyUp2(1,2)">{{text}}-->
<!-- 4.监测回车键,传入$event,监测event的值-->
<!-- <input type="text" v-model="text" @keyup.enter="handleKeyUp2(1,$event)">{{text}}-->
</div> </body>
<script>
var vm = new Vue({
el:'.app',
data:{
text:''
},
methods: {
// 1.按键监测
handleKeyUp(event) {
console.log('按键被按下了',event.key,event.keyCode) // keyCode会显示检测按键对应的数字关系
},
// 2.监测回车
handleKeyUp1(event){
if (event.keyCode == 13) {
console.log('开始跟后端交换搜索了,只有回车按键会触发执行')
}
},
handleKeyUp2(a,event) {
console.log(event)
console.log(a)
console.log('enter被按了')
}, handleKeyUp3(a, event) {
console.log(event)
console.log('enter被按了')
} }
})
</script>
</html>

表单控制

#本质:input框>>>>变量类型是什么?
text 类型
radio 单选
checkbox 单选和多选 # 代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
<p>用户名:<input type="text" v-model="username"></p>
<p>密码:<input type="password" v-model="password"></p>
<p>性别:
男:<input type="radio" v-model="gender" value="1">
女:<input type="radio" v-model="gender" value="2">
</p>
<p>记住密码:<input type="checkbox" v-model="remember"></p>
<p>爱好:
篮球:<input type="checkbox" v-model="hobby" value="篮球">
足球:<input type="checkbox" v-model="hobby" value="足球">
排球:<input type="checkbox" v-model="hobby" value="排球">
</p>
<button @click="handleClick">登录</button>
</div> </body>
<script>
var vm = new Vue({
el:'.app',
data:{
username:'',
password:'',
gender:'', //radio单选,多个radio绑定同一个变量,选中某个,就对应value值
remember:'false', //checkbox单选是true,false
hobby:[] //checkbox多选是数组类型,必须一开始定义就是数组,多个checkbox可绑定一个变量
},
methods: {
handleClick(){
console.log(this.username,this.password,this.gender,this.remember,this.hobby)
}
}
})
</script>
</html>

vue框架3的更多相关文章

  1. Vue框架Element的事件传递broadcast和dispatch方法分析

    前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...

  2. 使用vue框架运行npm run dev 时报错解决

    使用使用vue框架运行npm run dev 时报错 如下: 原因: localhost:8080 有可能其他软件占用了,导致其他问题的出现 我们可以动态修改地址 解决: 进入项目文件的config文 ...

  3. Vue框架下的node.js安装教程

    Vue框架下的node.js安装教程 python服务器.php  ->aphche.java ->tomcat.   iis -->它是一个可以运行JAVASCRIPTR 的运行环 ...

  4. Vue框架axios请求(类似于ajax请求)

    Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...

  5. Vue框架之双向绑定事件

    Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...

  6. Vue框架

    Vue框架 环境: windows python3.6.2 Vue的cdn: <script src="https://cdn.jsdelivr.net/npm/vue"&g ...

  7. vue框架入门和ES6介绍

    vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...

  8. 基于VUE框架 与 其他框架间的基本对比

    基于VUE框架的基本描述 与 其他框架间的基本对比 2018-11-03  11:01:14 A B React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供 ...

  9. VUE框架的初识

    VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...

  10. vue框架中的日期组件转换为yyy-mm-dd格式

    最近在用vue框架写一个app,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式

随机推荐

  1. 使用xshell连接linux虚拟机

    目录 1.涉及的软件 2.连接步骤 2.1.虚拟机网络连接设置 2.2.配置linux的ip地址 2.3.关闭linux的防火墙 2.4.启动ssh服务 2.5.使用xshell连接linux 1.涉 ...

  2. python之路53 ajax补充返回序列化数据,多对多创建三种方式,django内置序列化组件(drf前身),批量操作数据,自定义分页器,form组件

    ajax补充说明 主要是针对回调函数args接收到的响应数据 1.后端request.is_ajax() 用于判断当前请求是否由ajax发出 2.后端返回的三板斧都会被args接收不再影响整个浏览器页 ...

  3. arm架构的M1对有i386和x86的架构不兼容

    error: Building for iOS, but the linked and embedded framework 'AliyunNlsSdk.framework' was built fo ...

  4. elasticsearch实现基于拼音搜索

    目录 1.背景 2.安装拼音分词器 3.拼音分词器提供的功能 4.简单测试一下拼音分词器 4.1 dsl 4.2 运行结果 5.es中分词器的组成 6.自定义一个分词器实现拼音和中文的搜索 1.创建m ...

  5. 通过Docker启动Solace,并在Spring Boot通过JMS整合Solace

    1 简介 Solace是一个强大的实时性的事件驱动消息队列.本文将介绍如何在Spring中使用,虽然代码使用的是Spring Boot,但并没有使用相关starter,跟Spring的整合一样,可通用 ...

  6. C# 10 Lambda 语法的改进

    C# 10 包括了对 Lambda 表达式的处理方式的许多改进: Lambda 表达式可以具有自然类型,这使编译器可从 Lambda 表达式或方法组推断委托类型. 如果编译器无法推断返回类型,Lamb ...

  7. DVWA系列3:CSRF

    DVWA系列3:CSRF 前言 CSRF(Cross-site request forgery),即跨站请求伪造,是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法. 比如说,用户 ...

  8. 【Android】移除 Android frameworks 层,当 Linux 系统使用。(服务移除篇)

    前言说明 此文章仅作为技术经验记录,核心思想,就是在 init.rc 里面移除服务,致使 frameworks 不被启动,其它不便多说. 此文章内容为系统服务移除篇,最终实现的效果是 Android ...

  9. DataX二次开发——新增HiveReader插件

    一.研发背景 DataX官方开源的版本支持HDFS文件的读写,并没有支持基于JDBC的Hive数据读写,很多时候一些数据同步不太方便,比如在读取Hive之前先执行一些sql.读取一些Hive的视图数据 ...

  10. pnpm

    一.概念 performant npm ,意味"高性能的 npm".pnpm由npm/yarn衍生而来,解决了npm/yarn内部潜在的bug,极大的优化了性能,扩展了使用场景.被 ...