vue框架3
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的更多相关文章
- Vue框架Element的事件传递broadcast和dispatch方法分析
前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...
- 使用vue框架运行npm run dev 时报错解决
使用使用vue框架运行npm run dev 时报错 如下: 原因: localhost:8080 有可能其他软件占用了,导致其他问题的出现 我们可以动态修改地址 解决: 进入项目文件的config文 ...
- Vue框架下的node.js安装教程
Vue框架下的node.js安装教程 python服务器.php ->aphche.java ->tomcat. iis -->它是一个可以运行JAVASCRIPTR 的运行环 ...
- Vue框架axios请求（类似于ajax请求）
Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...
- Vue框架之双向绑定事件
Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...
- Vue框架
Vue框架 环境: windows python3.6.2 Vue的cdn: <script src="https://cdn.jsdelivr.net/npm/vue"&g ...
- vue框架入门和ES6介绍
vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...
- 基于VUE框架 与 其他框架间的基本对比
基于VUE框架的基本描述 与 其他框架间的基本对比 2018-11-03 11:01:14 A B React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供 ...
- VUE框架的初识
VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...
- vue框架中的日期组件转换为yyy-mm-dd格式
最近在用vue框架写一个app,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式
随机推荐
- APICloud平台使用融云模块实现音视频通话实践经验总结分享
需求概要:实现视频拨打.接听.挂断.视频界面大小窗口.点击小窗口实现大小窗口互换. 实现思路:一方拨打后,另一方要能收到相应事件,然后接听.接通后,渲染对方视频画面.那么己方视频画面什么时候渲染呢?对 ...
- P8618 [蓝桥杯 2014 国 B] Log 大侠
简要题意 给你一个长度为 \(n\) 的正整数序列 \(a\),有 \(m\) 个询问,每一个询问给出一个区间 \([l,r]\).定义函数 \(f(x)=\lfloor\log_{2}(x)+1\r ...
- 使用Dapr和.NET 6.0进行微服务实战：Dapr简介
大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 本文是<使用Dapr和.NET 6.0进行微服务实战>的第2篇Dapr ...
- Springboot+Dplayer+RabbitMQ实现视频弹幕延时入库
编写之初,在网上找了很多关于springboot整合dplayer实现弹幕的方式,发现案例很少,然后自己就着手写一个小项目,分享给大家~ 注:Dplayer版本:v1.22.2 流程:前端自定义弹幕发 ...
- axios 使用方法 以及服务器端 设置拦截发送404状态的提示语，当网络错误时候返回前端的提示， 当网络正常的时候返回后端的提示
本文旨在说明 设置全局异常拦截器 当网络错误时候返回前端的提示, 当网络正常的时候返回后端的提示 export default ({ development: { baseURL: 'http:// ...
- IO多路复用完全解析
上一篇文章以近乎啰嗦的方式详细描述了BIO与非阻塞IO的各种细节.如果各位还没有读过这篇文章,强烈建议先阅读一下,然后再来看本篇,因为逻辑关系是层层递进的. 1. 多路复用的诞生 非阻塞IO使用一个线 ...
- 使用ProPerties集合存储数据-Properties集合中的方法store
使用ProPerties集合存储数据 java.util.Properties`继承于Hashtable,来表示一个持久的属性集.它使用键值结构存储数据每个键及其对应值都是一个字符串.该类也被许多Ja ...
- 【Redis场景4】单机环境下秒杀问题
单机环境下的秒杀问题 全局唯一ID 为什么要使用全局唯一ID: 当用户抢购时,就会生成订单并保存到订单表中,而订单表如果使用数据库自增ID就存在一些问题: 受单表数据量的限制 id的规律性太明显 场景 ...
- 火山引擎 DataLeap：3 个关键步骤，复制字节跳动一站式数据治理经验
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,并进入官方交流群 DataLeap 是火山引擎数智平台 VeDI 旗下的大数据研发治理套件产品,帮助用户快速完成数据集成.开发.运维.治理. ...
- python 取整方法
1.向下取整: int() 2.向上取整:ceil() 使用ceil()方法时需要导入math模块,例如 3.四舍五入:round() 4.分别取 将整数部分和小数部分分别取出,可以使用math模块中 ...