【箭头函数】
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 8 </head> 9 <body> 10 <div id="app"> 11 <h1>过滤案例---箭头函数</h1> 12 <input type="text" v-model="myText" @input="handleInput"> 13 <hr> 14 <ul> 15 <li v-for="item in newdataList">{{item}}</li> 16 </ul> 17 18 </div> 19 20 </body> 21 <script> 22 var vm = new Vue({ 23 el: '#app', 24 data: { 25 myText: '', 26 dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'atome', 'atomem'], 27 newdataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'atome', 'atomem'], 28 }, 29 methods: { 30 handleInput() { 31 this.newdataList = this.dataList.filter(item=> item.indexOf(this.myText) >= 0) 32 }, 33 } 34 }) 35 36 //箭头函数的使用 37 //1.匿名函数 38 var f=function(name){ 39 console.log(name) 40 } 41 f('猪猪侠') 42 43 //2.箭头函数--其实是为解决this指向问题,无参数无返回值 44 var f1=()=>console.log('猪大强') 45 f1() 46 //3.箭头函数有多个参数无返回值 47 var f2=(name,age)=>{console.log(name,age)} 48 f2() 49 //4.箭头函数有一个参数无返回值 50 var f3=name=>{console.log(name)} 51 f3('光头强') 52 //5.有一个参数，一个返回值 53 var f4=name=>{return name+'是一只熊'} 54 console.log(f4('熊二')) 55 //6.5简写 56 var f5=name=>name+'也是一只熊' 57 console.log(f5('熊大')) 58 //补充：箭头函数内部没有自己的this 59 </script> 60 61 </html>
。
。
。
【js-for循环的方式】
循环：普通索引、数组、of迭代循环、in索引循环、forEach数组、each对象循环
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 8 9 </head> 10 <body> 11 <div id="app"> 12 <h1>js-for循环方式</h1> 13 14 </div> 15 16 </body> 17 <script> 18 //es6补充：之前定义变量用var,但会有问题，以后用let,const 19 //let和const的区别：const定义的变量不能修改，let定义的变量可以修改,局部变量，只在作用域内有效 20 //1.普通索引循环 21 for(let i=0;i<10;i++){console.log(i)} 22 console.log('-----------------------------') 23 //2.循环数组 24 l=[1,2,3,4,5] 25 for(let i=0;i<l.length;i++){console.log(l[i])} 26 console.log('-----------------------------') 27 //3.基于迭代的循环,of循环，循环出一个个值 28 for (let item of l){console.log(item)} 29 console.log('-----------------------------') 30 //4.基于迭代的循环,in循环,循环出索引 31 for (let index in l){console.log(l[index])} 32 console.log('-----------------------------') 33 //5.数组独有的循环方式：forEach 34 l.forEach((item,index)=> {console.log(item,index)}) 35 console.log('-----------------------------') 36 //6.jquery的each循环 37 $.each(l,(index,item)=>{console.log(item,index)}) 38 </script> 39 40 </html>
。
。
。
【事件修饰符】
.stop 只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）
.self 只处理自己的事件，子控件冒泡的事件不处理
.prevent 阻止a链接的跳转
.once 事件只会触发一次（适用于抽奖页面）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 <style> 8 .top { 9 height: 200px; 10 width: 200px; 11 background-color: palegreen; 12 margin: auto; 13 } 14 15 .inner { 16 height: 50px; 17 width: 100px; 18 background-color: orange; 19 margin: auto; 20 } 21 </style> 22 </head> 23 <body> 24 <div id="app"> 25 <h1>事件修饰符---stop</h1> 26 <div class="top" @click="handleTop"> 27 <!-- 加了stop的点击事件,点子是子，父是父--> 28 <div class="inner" @click.stop="handleInner">点点看</div> 29 </div> 30 31 <h1>修饰符----self</h1> 32 <div class="top" @click.self="handleTop"> 33 <div class="inner" @click="handleInner">点点看</div> 34 </div> 35 36 <h1>修饰符----prevent:a就不会跳转了</h1> 37 <a href="https://www.baidu.com" @click.prevent="handleA">我是百度啊</a> 38 39 40 <h1>修饰符----once:只触发一次</h1> 41 <button @click.once="handleOnce">按钮</button> 42 43 </div> 44 45 46 </body> 47 48 <script> 49 var vm = new Vue({ 50 el: '#app', 51 data: {}, 52 methods: { 53 handleTop: function () { 54 console.log('父控件') 55 }, 56 handleInner: function () { 57 console.log('子控件') 58 }, 59 handleA(){ 60 console.log('a被点了') 61 // 控制页面跳不跳 62 location.href='https://www.sohu.com' 63 }, 64 handleOnce(){ 65 66 console.log('只触发一次') 67 } 68 } 69 }) 70 </script> 71 </html>
。
。
。
【摁键事件和修饰符】
# 1 按下某个键盘，触发事件，通过修饰控制只有按下某个键，才触发事件
#2 keyCode对应表--》按键修饰符
键盘对应的数字表： https://www.cnblogs.com/841019rossi/p/16808455.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 8 </head> 9 <body> 10 <div id="app"> 11 <h1>按键事件---</h1> 12 <input type="text" v-model="name" @keyup="handleKeyUp">---{{name}} 13 14 <h1>按键修饰符---vue3只有数字，没有enter</h1> 15 <input type="text" v-model="name1" @keyup.13="handleKeyUp1">---{{name}} 16 </div> 17 18 19 </body> 20 21 <script> 22 var vm = new Vue({ 23 el: '#app', 24 data: { 25 name:'', 26 name1:'', 27 }, 28 methods:{ 29 handleKeyUp:function (event) { 30 console.log('你按下了回车键:',event) 31 }, 32 handleKeyUp1:function () { 33 console.log('你是数字回车键:enter') 34 }, 35 } 36 }) 37 </script> 38 </html>
。
。
。
【表单控制】
# 1 checkbox v-model 绑定 -布尔 ：选中没选中 -数组：多选
# 2 radio： -字符串：value的值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 8 </head> 9 <body> 10 <div id="app"> 11 <h1>表单控制checkbox---选中没选中，绑定布尔值</h1> 12 <p>用户名： <input type="text" v-model="name"></p> 13 <p>密码： <input type="text" v-model="password"></p> 14 <p>确认密码： <input type="checkbox" v-model="isChecked"></p> 15 <button @click="handleSubmit">登录</button> 16 17 <h1>checkbox多选---绑定字符串，返回的是数组里面套对应的value值</h1> 18 <p>用户名： <input type="text" v-model="name"></p> 19 <p>密码： <input type="text" v-model="password"></p> 20 <p>确认密码： <input type="checkbox" v-model="isChecked"></p> 21 <p>爱好： 22 篮球：<input type="checkbox" v-model="hobby" value="篮球"> 23 足球：<input type="checkbox" v-model="hobby" value="足球"> 24 乒乓球：<input type="checkbox" v-model="hobby" value="乒乓球"> 25 </p> 26 <button @click="handleSubmit">登录</button> 27 28 <h1>radio多选---</h1> 29 <p>用户名： <input type="text" v-model="name"></p> 30 <p>密码： <input type="text" v-model="password"></p> 31 <p>确认密码： <input type="checkbox" v-model="isChecked"></p> 32 <p>性别： 33 男：<input type="radio" v-model="gender" value="男"> 34 女：<input type="radio" v-model="gender" value="女"> 35 36 </p> 37 <p>爱好： 38 篮球：<input type="checkbox" v-model="hobby" value="篮球"> 39 足球：<input type="checkbox" v-model="hobby" value="足球"> 40 乒乓球：<input type="checkbox" v-model="hobby" value="乒乓球"> 41 </p> 42 <button @click="handleSubmit">登录</button> 43 44 </div> 45 </body> 46 47 <script> 48 var vm = new Vue({ 49 el: '#app', 50 data: { 51 name: '', 52 password: '', 53 isChecked: false, 54 hobby: [], 55 gender: '', 56 }, 57 methods: { 58 handleSubmit() { 59 console.log(this.name, this.password, this.isChecked, this.hobby,this.gender) 60 } 61 } 62 }) 63 </script> 64 </html>
。
。
。
【购物车案例】
选中、全选、 加减
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" 8 integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> 9 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" 10 integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" 11 crossorigin="anonymous"></script> 12 <style> 13 button{ 14 background-color: darkgray; 15 border-radius: 8px; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="app"> 21 <div class="row justify-content-center"> 22 <div class="col-6"> 23 <h1 class="text-center">购物车</h1> 24 <table class="table"> 25 <thead> 26 <tr> 27 <th scope="col">商品id</th> 28 <th scope="col">名字</th> 29 <th scope="col">价格</th> 30 <th scope="col">数量</th> 31 <th scope="col">全选/全不选<input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th> 32 </tr> 33 </thead> 34 <tbody> 35 <tr v-for="(item,index) in goods_list" :class="index%2==0?'table-danger':'table-primary'"> 36 37 <td>{{item.id}}</td> 38 <td>{{item.name}}</td> 39 <td>{{item.price}}</td> 40 <td><button @click="handleJian(item)">-</button>{{item.num}} <button @click="item.num++">+</button></td> 41 <td><input type="checkbox" :value="item" v-model="checkGoods" @change="handleCheckOne"></td> 42 </tr> 43 44 </tbody> 45 </table> 46 47 48 总价：{{getPrice()}} 49 <br> 50 详情：{{checkGoods}}------{{checkAll}} 51 52 </div> 53 </div> 54 55 </div> 56 </body> 57 <script> 58 var vm = new Vue({ 59 el: '#app', 60 data: { 61 goods_list: [{id: 1, name: 'iphone', price: 5000, num: 10}, 62 {id: 2, name: 'huawei', price: 4000, num: 10}, 63 {id: 3, name: 'xiaomi', price: 3000, num: 10}, 64 {id: 4, name: 'oppo', price: 2000, num: 5}, 65 {id: 5, name: 'vivo', price: 1000, num: 10}, 66 {id: 6, name: 'meizu', price: 1500, num: 10}], 67 checkGoods: [], 68 checkAll: false 69 }, 70 methods: { 71 getPrice() { 72 let totalPrice = 0; 73 // for (let i=0;i<this.goods_list.length;i++){ 74 // totalPrice+=this.goods_list[i].price*this.goods_list[i].num;} 75 // for (let item of this.goods_list){ 76 for (let item of this.checkGoods) { 77 totalPrice += item.price * item.num 78 } 79 return totalPrice 80 }, 81 handleCheckAll() { 82 if (this.checkAll) { 83 this.checkGoods = this.goods_list 84 } else { 85 86 this.checkGoods = [] 87 } 88 }, 89 handleCheckOne() { 90 if (this.checkGoods.length == this.goods_list.length) { 91 this.checkAll = true 92 } else { 93 this.checkAll = false 94 } 95 }, 96 handleJian(item){ 97 if(item.num>0){ 98 item.num-- 99 }else { 100 alert('不能再减了') 101 } 102 } 103 } 104 }) 105 </script> 106 </html>
