vue学习代码理解v-for数组遍历和对象遍历以及事件处理

文章目录

06_列表渲染
07_列表渲染_过滤与排序
08_事件处理

06_列表渲染

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>06_列表渲染</title>
</head>
<body>
<!--
1. 列表显示数组: v-for / index对象: v-for / key
2. 列表的更新显示删除item替换item
-->
<div id="demo"><h2>测试：v-for 遍历数组</h2><ul><!--下标和一个元素 key把一个文本变化成一个表达式--><li v-for="(p,index) in persons" :key="index"><tr>[{{index+1}}]-[{{p.name}}]-[{{p.age}}]|<!--根据索引删除--><button @click="deleteP(index)" v-shw="ok">删除</button>|<!--记得是数组--><button @click="updateP(index,{name:'cat',age:18})" v-show="!ok">更新</button><button @click="ok=!ok">切换</button><button @click="addP({name:'tiger',age:10})">增加</button></li></ul><h2>测试：v-for 遍历对象</h2><ul><!--    item 是属性值  key是属性名--><li v-for="(item,key) in persons[1]":key="key">{{key}}:{{item}}</li></ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">new Vue({el:'#demo',data: {ok:true,persons: [{name: 'tom', age: 18},{name: '小黄人', age: 12},{name: 'jum', age: 10},{name: 'job', age: 20}]},methods:{deleteP(index){this.persons.splice(index,1)// 调用了不是原生数组的splice(), 而是一个变异(重写)方法// 1. 调用原生的数组的对应方法// 2. 更新界面},updateP(index,newP){this.persons.splice(index,1,newP)},addP(newP){this.persons.push(newP)}}})
</script>
</body>
</html>
================================================================================================================================
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>06_列表渲染</title>
</head>
<body><!--
1. 列表显示数组: v-for / index对象: v-for / key
2. 列表的更新显示删除item替换item
--><div id="demo"><h2>测试: v-for 遍历数组</h2><ul><li v-for="(p, index) in persons" :key="index">{{index}}--{{p.name}}--{{p.age}}--<button @click="deleteP(index)">删除</button>--<button @click="updateP(index, {name:'Cat', age: 16})">更新</button></li></ul><button @click="addP({name: 'xfzhang', age: 18})">添加</button><h2>测试: v-for 遍历对象</h2><ul><li v-for="(item, key) in persons[1]" :key="key">{{key}}={{item}}</li></ul></div><script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">new Vue({el: '#demo',data: {persons: [{name: 'Tom', age:18},{name: 'Jack', age:17},{name: 'Bob', age:19},{name: 'Mary', age:16}]},methods: {deleteP (index) {this.persons.splice(index, 1) // 调用了不是原生数组的splice(), 而是一个变异(重写)方法// 1. 调用原生的数组的对应方法// 2. 更新界面},updateP (index, newP) {console.log('updateP', index, newP)// this.persons[index] = newP  // vue根本就不知道this.persons.splice(index, 1, newP)// this.persons = []},addP (newP) {this.persons.push(newP)}}})
</script>
</body>
</html>

07_列表渲染_过滤与排序

const声明一个只读的常量,
，常量的值是不能改变的，使用如下const i18n = new VueI18n({locale: 'zh',messages: {'zh': requestAnimationFrame('@/assets/languages/zh.json'),'en': requestAnimationFrame('@/assets/languages/en.json')}
})
export default i18n
另外，var 是函数级作用域，let是块级作用域含义：es6 语法
扩展运算符（ spread ）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。操作数组：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>06_列表渲染_过滤与排序</title>
</head>
<body>
<!--
1. 列表过滤
2. 列表排序
--><div id="demo"><input type="text" v-model="searchName"><ul><li v-for="(p, index) in filterPersons" :key="index">{{index}}--{{p.name}}--{{p.age}}</li></ul><div><button @click="setOrderType(2)">年龄升序</button><button @click="setOrderType(1)">年龄降序</button><button @click="setOrderType(0)">原本顺序</button></div>
</div><script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">new Vue({el: '#demo',data: {searchName: '',orderType: 0, // 0代表不排序, 1代表降序, 2代表升序persons: [{name: 'Tom', age:18},{name: 'Jack', age:17},{name: 'Bob', age:19},{name: 'Mary', age:16}]},computed: {filterPersons () {
//        debugger// 取出相关数据const {searchName, persons, orderType} = this/* 含义：扩展运算符（ spread ）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。*/let arr = [...persons]// 过滤数组if(searchName.trim()) {arr = persons.filter(p => p.name.indexOf(searchName)!==-1)}// 排序if(orderType) {arr.sort(function (p1, p2) {if(orderType===1) { // 降序return p2.age-p1.age} else { // 升序return p1.age-p2.age}})}return arr}},methods: {setOrderType (orderType) {this.orderType = orderType}}})
</script>
</body>
</html>

08_事件处理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>07_事件处理</title><style>.parent {width: 400px;height: 200px;border: 0px red solid;margin:0 auto;position: relative}.child {width: 100px;height: 100px;border: 1px red solid;position:absolute;left: 0;right: 0;top:0;bottom:0;margin-left: auto;margin-right: auto;margin-top:auto;margin-bottom:auto;}</style>
</head>
<body>
<!--
1. 绑定监听:v-on:xxx="fun"@xxx="fun"@xxx="fun(参数)"默认事件形参: event隐含属性对象: $event
2. 事件修饰符:.prevent : 阻止事件的默认行为 event.preventDefault().stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符.keycode : 操作的是某个keycode值的健.enter : 操作的是enter键KeyDown、KeyPress和KeyUp事件的区别与联系,以后就可以根据需求来选择使用。
KeyDown：在控件有焦点的情况下按下键时发生。
KeyPress：在控件有焦点的情况下按下键时发生。
KeyUp：在控件有焦点的情况下释放键时发生。1、KeyPress主要用来接收字母、数字等ANSI字符
KeyDown 和 KeyUP 事件过程通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键2、KeyPress 只能捕获单个字符
KeyDown 和KeyUp 可以捕获组合键。
3、KeyPress 不显示键盘的物理状态（SHIFT键），而只是传递一个字符。KeyPress 将每个字符的大、小写形式作为不同的键代码解
释，即作为两种不同的字符。
KeyDown 和KeyUp 不能判断键值字母的大小。KeyDown 和 KeyUp 用两种参数解释每个字符的大写形式和小写形式：keycode — 显
示物理的键（将 A 和 a 作为同一个键返回）和 shift —指示 shift + key 键的状态而且返回 A 或 a 其中之一。
5、KeyPress 不区分小键盘和主键盘的数字字符。
KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。
6、KeyDown、KeyUp事件是当按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的。
由于一般按下键盘的键往往会立即放开（这和鼠标不同），所以这两个事件使用哪个差别不大。
而且，up和其他两者还有一个区别：要判断key修改后的状态必须用up。
-->
<div id="example" class="parent"><h1>1.监听绑定事件</h1><button @click="test1">test1</button><button @click="test2('欢迎你的到来')">test2</button><!--$event代表事件对象--><button @click="test3('abc',$event)">test3</button><h1>2.事件修饰符</h1><a href="http://www.baidu.com" @click.prevent="test4">百度一下</a><div style="width:200px;height: 200px;background: red" @click="test5"><div style="width:100px;height:100px;background: blue" @click.stop="test6"></div></div><h1>3.按键修饰符</h1><input type="text" @keyup.13="test7"><input type="text" @keyup.enter="test8">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>new Vue({el:'#example',data:{},methods:{test1(event){alert(event.target.innerHTML)},test2(msg){alert(msg)},test3(msg,event){alert(msg+'=========='+event.target.textContent)},test4(){alert('prevent阻止事件的默认行为')},test5(){alert("out")},test6(){alert("inner")},test7(){/ if(event.keyCode===13){ 这是最原始的写法//   console.log(event.keyCode)// }alert(event.target.value)},test8(){alert(event.target.value)}}})
</script>
</body>
</html>

vue学习代码理解v-for数组遍历和对象遍历以及事件处理相关推荐

VUE 学习代码理解(1~5课时代码)
文章目录 HelloWorld 模板语法 03_计算属性和监视 04_class与style绑定 05_条件渲染 HelloWorld <!DOCTYPE html> <html l ...
js数组遍历和对象遍历
针对js各种遍历作一个总结分析,从类型用处:分数组遍历和对象遍历:还有性能,优缺点等. JS数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9];for ( v ...
ES6数组遍历和对象遍历的方法
第一部分:数组一.数组遍历 (1)数组.reduce遍历(经典案例:求和)(里面函数后面不要忘记加0了) *注意点:reduce((形参1,形参2,形参3)=>{ return 形参1+形参 ...
js数组遍历、对象遍历、字符串遍历
2019独角兽企业重金招聘Python工程师标准>>> 数组遍历 for --使用变量将数组长度缓存起来,在数组较长时性能优化效果明显 for(var i=0,len=arr.len ...
数组遍历VS对象遍历
数组遍历 const nameArray2 = ['zhao', 'qian', 'zhang', 'sun', 'li']; nameArray2.map(() => {}); // retu ...
VUE 学习代码监视和模板语法回调函数
文章目录 HelloWorld 模板语法 03_计算属性和监视 HelloWorld <!DOCTYPE html> <html lang="en"> &l ...
2w多字总结的VUE学习文档
VUE学习文档文章目录 VUE学习文档回顾: 总结 0 目标 1.前言 2.认识Vue 3.快速入门 3.1.创建工程 3.2.安装vue 3.2.1.下载安装 3.2.2.使用CDN 3.3.v ...
JS/Jquery遍历JSON对象、JSON数组、JSON数组字符串、JSON对象字符串
JS遍历JSON对象 JSON对象 var jsonObj = {"id": 102,"year": "2019-2020","l ...
对象遍历（对象forEach遍历）
对象遍历(对象forEach遍历) 对象遍历对象fon in 遍历对象keys 遍历对象values 遍历对象getOwnPropertyNames遍历使用Reflect.ownKeys(o ...

vue学习代码理解v-for数组遍历和对象遍历以及事件处理

文章目录

06_列表渲染

07_列表渲染_过滤与排序

08_事件处理

vue学习代码理解v-for数组遍历和对象遍历以及事件处理相关推荐

最新文章

热门文章