Vue之js循环方式、v-model 的使用、事件处理、表单控制、购物车案例、v-model修饰符
js循环方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js循环方式</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <script src="./js/vue.js"></script> </head> <body> <div id="app"> </div> </body> <script> new Vue({ el: '#app', data: {} }) //方式一：js循环===》for（） 基于索引的循环 // let es6 语法，用于定义变量 定义常量：const 以后少用var // for (let i = 0; i < 10; i++) { // console.log(i) // } // ===》可缩写成如下 // let i = 0 // for (; i < 10;) { // console.log(i) // i++ // } let good_list = [3,4,5,6] // for (let j = 0; j < good_list.length; j++) { // console.log(good_list[j]) // 按索引取值 // } // 2 js循环方式二 in循环 // for (const item in good_list) { // console.log(item) // 取出索引值 // console.log(good_list[item]) // 取出列表数据 // } // 3 js循环方式三：of 循环 跟python中的 in 是一样的 // for (const item of good_list) { // console.log(item) // 直接取出列表数据 // } // 数组的方法，循环 // good_list.forEach(function (value, index){ // console.log(index) // console.log(value) // }) // 5 jq 的循环 let userinfo={'name':'zfq','age':'18'} $.each(userinfo,function (index,value){ console.log(index) console.log(value) }) </script> </html>
key值解释
vue中使用v-for的时候，在标签上，会看到有 key 属性- :key="item" 用的属性指令
-key对应的值必须是唯一的
在循环的标签上，加key值的好处是，加速虚拟dom的替换
-区别只在循环的变量变化时，效率高低
-但是一定要注意：vule必须唯一
Vue.set 的使用
以后可能会遇到，数据变了，页面没变的情况
-不能直接更改，借助于vue提供的方法，vue.Set 更改
-以后只要发现数据变了，页面没变，就先用Vue.set试一下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue的set的使用</title> <script src="./js/vue.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> </head> <body> <div id="app"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="text-center"> <button class="btn btn-danger" @click="handleShow">点我显示购物车</button> <button class="btn btn-danger" @click="handleDelete">删除最后一条</button> <button class="btn btn-danger" @click="handleReverse">点击翻转数据</button> <button class="btn btn-danger" @click="handleFirst">变更第一条</button> </div> {{userInfo.name}}----{{userInfo.age}} <table class="table table-bordered"> <thead> <tr> <th>id号</th> <th>商品名字</th> <th>商品价格</th> <th>商品数量</th> </tr> </thead> <tbody> <tr v-for="item in good_list"> <th scope="row">{{item.id}}</th> <td>{{item.name}}</td> <td>{{item.price}}</td> <td>{{item.count}}</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { good_list: [], userInfo: {name:'zfq',age:'18'} }, methods: { handleShow() { this.good_list = [ {id: 1, name: '钢笔', price: 9.9, count: 4}, {id: 2, name: '足球', price: 99, count: 4}, {id: 3, name: '篮球', price: 44, count: 32}, {id: 4, name: '电脑', price: 1299, count: 48}, {id: 5, name: '鼠标', price: 23, count: 4}, {id: 6, name: '脸盆', price: 8, count: 4}, ] }, handleDelete() { this.good_list.pop() }, handleReverse(){ this.good_list.reverse() console.log(this.good_list) }, handleFirst(){ // this.good_list[0] = {id: 1, name: '大钢笔', price: 99, count: 44} // 这样修改前端页面不会变化 Vue.set(this.good_list,0,{id: 1, name: '大钢笔', price: 99, count: 44}) // 改数组 // Vue.set(对象,key,value) // 改对象 }, } }) </script> </html>
v-model的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-model的使用</title> <script src="./js/vue.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> </head> <body> <div id="app"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="text-center"> <h1>v-model的使用</h1> <!-- <p>用户名:<input type="text" :value="username"></p>--> <p>用户名:<input type="text" v-model="username"></p> <p>密码:<input type="password" v-model="password"></p> <button class="btn btn-success" @click="handleSubmit">登录</button> </div> </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { username: 'zfq', password: '', }, methods: { handleSubmit(){ console.log(this.username,this.password) } } }) // :value="username" 对input标签做绑定，他只能做单向的绑定，js变量变，页面会变；页面变，js变量不会变 </script> </html>
事件处理
基本使用
input 标签的事件
input 当输入框进行输入的时候 触发的事件
change 当元素的值发生改变时 触发的事件，光标移走才检测
blur 当输入框失去焦点的时候 触发的事件
focus 光标到input表上上，触发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件处理</title> <script src="./js/vue.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> </head> <body> <div id="app"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="text-center"> <h1>input标签的事件</h1> <h2>input事件</h2> <input type="text" v-model="value1" @input="handleInput">--->{{value1}} <h2>change事件</h2> <input type="text" v-model="value2" @change="handleChange">--->{{value2}} <h2>blur事件</h2> <input type="text" v-model="value3" @blur="handleBlur">--->{{value3}} <h2>focus事件</h2> <input type="text" v-model="value4" @focus="handleFocus">--->{{value4}} </div> </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { value1: '', value2: '', value3: '', value4: '', }, methods: { handleInput() { console.log('我触发了') // 输入框内容每变化一次就触发一次 }, handleChange() { console.log('我变化了') // 输入框内容出现变化，并且输入框失去焦点时触发 }, handleBlur() { console.log('我失去焦点了') // 只要输入框失去焦点就会触发，不管内容有没有变化 }, handleFocus() { console.log('我得到焦点了') // 只要输入框获得焦点就会触发，不管内容有没有变化 } } }) </script> </html>
过滤案例
1 数组过滤 filter
2 判断字符串在不在另一个字符串中
3 this指向问题
4 箭头函数
-es6的函数定义特殊语法，箭头函数没有自己的this，内部用的是就是外部的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>箭头函数</title> <script src="./js/vue.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> </head> <body> <div id="app"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="text-center"> <h1>箭头函数</h1> </div> </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { }, methods: { } }) // 之前写法 // var f = function (){ // console.log('f执行了') // } // f() // 变成箭头函数 // var f = () => { // console.log('f执行了') // } // f() // 带参数的箭头函数，带一个参数，可以简写 // var f = (a)=> { // console.log(a) // } // var f = a => { // console.log(a) // } // f('zfq') // 有多个参数，不能简写 // var f = (a,b) => { // console.log(a,b) // } // f('zfq',19) // 有一个返回值 // var f = (a,b) => { // return a+b // } // console.log(f(1,19)) // 可以省略 var f = (a,b) => a+b console.log(f(1,19)) // 一个参数，一个返回值 var z = name => name + '_NB' console.log(z('zfq')) </script> </html>
过滤案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过滤案例</title> <script src="./js/vue.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> </head> <body> <div id="app"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="text-center"> <h1>过滤案例</h1> <input type="text" v-model="myText" @input="handleInput"> <hr> <!-- <p v-for="item in newdatalist">{{item}}</p>--> <li v-for="item in newdatalist">{{item}}</li> </div> </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { myText: '', datalist: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc'], newdatalist: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc'], // 删除，回不去了---》定义一个新变量newdatalist，接收过滤后的数据集 }, methods: { handleInput() { let _this = this // 第一个坑：一定要用 一个变量来接收过滤后的值 // 第二个坑：this指向问题:如果vue的methods中再写函数，this指向就发生变化--》 //解决方案一： 在外部定义一个变量_this，内部使用该变量 //解决方案二： 箭头函数解决--》es6 // 方案一:改变量版本 // this.newdatalist = this.datalist.filter(function (item) { // if (item.indexOf(_this.myText) >= 0) { // return true // } else { // return false // } // }) // 方案二:箭头函数版本 this.newdatalist = this.datalist.filter(item => item.indexOf(this.myText) >= 0) // indexOf:判断一个字符串在另一个字符串中的索引位置，如果在，就返回索引，不在就返回-1 // 可以根据此确定判断条件，如果在，就大于等于0，满足条件为true；不在就是-1，不满足条件为false } } }) </script> </html>
事件修饰符
事件修饰符 释义
.stop 只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）
.self 只处理自己的事件，子控件冒泡的事件不处理
.prevent 阻止a链接的跳转
.once 事件只会触发一次（适用于抽奖页面）
事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件修饰符</title> <script src="./js/vue.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> </head> <body> <div id="app"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="text-center"> <h1>事件修饰符</h1> <h2>stop：子标签的事件，冒泡到了父标签上===》阻止 stop 放在子标签上</h2> <ul @click="handleClickUl">父标签 <li @click="handleClickLi(1)">第一个</li> <li @click="handleClickLi(2)">第二个</li> <!-- 阻止了父标签的事件冒泡--> <li @click.stop="handleClickLi(3)">第三个</li> <li @click.stop="handleClickLi(4)">第四个</li> </ul> <h2>self: 子标签的事件，冒泡到了父标签上===》阻止 self 放在父标签上</h2> <!-- 阻止了父标签的事件冒泡--> <ul @click.self="handleClickUl">父标签 <li @click="handleClickLi(1)">第一个</li> <li @click="handleClickLi(2)">第二个</li> <li @click="handleClickLi(3)">第三个</li> <li @click="handleClickLi(4)">第四个</li> </ul> <h2>prevent:阻止a的跳转</h2> <a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a> <h2>once:只能点击一次</h2> <button class="btn btn-success" @click.once="handleSeckill">秒杀</button> </div> </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: {}, methods: { handleClickUl() { console.log('UL被点了') }, handleClickLi(i) { console.log(i, 'li被点了') }, handleA() { console.log('a被点了') console.log('可以有一堆判断，判断通过，跳转') alert('您没有权限') // location.href = 'http://www.baidu.com' }, handleSeckill(){ console.log('开始秒杀，正在排队') // 发送请求，跟后端交互 // 这个过程之后，不能再点了 if (Math.floor(Math.random()*2)>0){ alert('秒杀成功') } else { alert('秒杀失败') } }, } }) </script> </html>
表单控制
之前只讲了文本类型和密码类型
radio
checkbox
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单控制</title> <script src="./js/vue.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> </head> <body> <div id="app"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="text-center"> <h1>checkbox 单选</h1> <form> <p>用户名: <input type="text" v-model="username"></p> <p>密码: <input type="password" v-model="password"></p> <p>记住密码: <input type="checkbox" v-model="isRemember"></p> <span class="btn btn-success" @click="handleLogin">登录</span> </form> <hr> <h1>radio单选===》选中哪个，就显示对应的value的值</h1> <form> <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"> 保密:<input type="radio" v-model="gender" value="0"> </p> <p>记住密码: <input type="checkbox" v-model="isRemember"></p> <p class="btn btn-success" @click="handleLogin">登录</p> </form> <hr> <h1>checkbox多选，使用数组，会把选中的value值都放到数组中</h1> <form> <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"> 保密:<input type="radio" v-model="gender" value="0"> </p> <p>爱好: 篮球: <input type="checkbox" value="篮球" v-model="hobby"> 足球: <input type="checkbox" value="足球" v-model="hobby"> 排球: <input type="checkbox" value="排球" v-model="hobby"> 乒乓球: <input type="checkbox" value="乒乓球" v-model="hobby"> 橄榄球: <input type="checkbox" value="橄榄球" v-model="hobby"> </p> <p>记住密码: <input type="checkbox" v-model="isRemember"></p> <p class="btn btn-success" @click="handleLogin">登录</p> </form> </div> </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { username: '', password: '', // checkbox 单选，要么是true，要么是false isRemember: '', gender: '', hobby: [], }, methods: { handleLogin() { console.log(this.username, this.password, this.isRemember, this.gender, this.hobby) } } }) </script> </html>
购物车案例
基本购物车
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车案例</title> <script src="./js/vue.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> </head> <body> <div id="app"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="text-center"><h1>购物车案例</h1> </div> <table class="table table-bordered"> <thead> <tr> <th>id号</th> <th>商品名字</th> <th>商品价格</th> <th>商品数量</th> <th>全选/全不选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th> </tr> </thead> <tbody> <tr v-for="item in good_list"> <th scope="row">{{item.id}}</th> <td>{{item.name}}</td> <td>{{item.price}}</td> <td>{{item.count}}</td> <td><input type="checkbox" @change="handleOne" v-model="checkGroup" :value="item"></td> </tr> </tbody> </table> <hr> 选中的商品有:{{checkGroup}} <br> 总价格是:{{getPrice()}} </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { good_list: [ {id: 1, name: '道德经', price: 99, count: 2}, {id: 2, name: '易经', price: 59, count: 1}, {id: 3, name: '淮南子', price: 89, count: 5}, ], checkGroup: [], checkAll: false, }, methods: { getPrice() { // 选中了哪些商品，计算价格 total = 0 for (item of this.checkGroup) { // console.log(item) total += item.price * item.count } return total }, handleCheckAll() { if (this.checkAll) { this.checkGroup = this.good_list } else { this.checkGroup = [] } }, handleOne() { if (this.checkGroup.length == this.good_list.length) { this.checkAll = true } else { this.checkAll = false } } } }) </script> </html>
带加减的购物车
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车案例</title> <script src="./js/vue.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> </head> <body> <div id="app"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="text-center"><h1>购物车案例</h1> </div> <table class="table table-bordered"> <thead> <tr> <th>id号</th> <th>商品名字</th> <th>商品价格</th> <th>商品数量</th> <th>全选/全不选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th> </tr> </thead> <tbody> <tr v-for="item in good_list"> <th scope="row">{{item.id}}</th> <td>{{item.name}}</td> <td>{{item.price}}</td> <td><span class="btn" @click="item.count++">+</span>{{item.count}} <span class="btn" @click="handlejian(item)">-</span></td> <td><input type="checkbox" @change="handleOne" v-model="checkGroup" :value="item"></td> </tr> </tbody> </table> <hr> 选中的商品有:{{checkGroup}} <br> 总价格是:{{getPrice()}} </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { good_list: [ {id: 1, name: '道德经', price: 99, count: 2}, {id: 2, name: '易经', price: 59, count: 1}, {id: 3, name: '淮南子', price: 89, count: 5}, ], checkGroup: [], checkAll: false, }, methods: { getPrice() { // 选中了哪些商品，计算价格 total = 0 for (item of this.checkGroup) { // console.log(item) total += item.price * item.count } return total }, handleCheckAll() { if (this.checkAll) { this.checkGroup = this.good_list } else { this.checkGroup = [] } }, handleOne() { if (this.checkGroup.length == this.good_list.length) { this.checkAll = true } else { this.checkAll = false } }, handlejian(item) { if (item.count > 1) { item.count-- } else { alert('真的不能再少了，一滴都没了') } }, } }) </script> </html>
v-model修饰符
v-model 之 lazy、number、trim
lazy：等待input框的数据绑定失去焦点之后再变化
number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim：去除首位的空格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-model其他</title> <script src="./js/vue.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> </head> <body> <div id="app"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="text-center"> <h1>v-model修饰符</h1> <!-- 等待input框的数据绑定失去焦点之后再变化--> <p><input type="text" v-model.lazy="value">--->{{value}}</p> <!-- 数字开头，只保留数字，后面的字母不保留；字母开头，都保留--> <p><input type="text" v-model.number="value1">--->{{value1}}</p> <!-- 去除首位的空格--> <p><input type="text" v-model.trim="value2">--->{{value2}}</p> </div> </div> </div> </div> </div> </body> <script> var vm = new Vue({ el: '#app', data: { value: '', value1: '', value2: '', }, methods: {} } ) // :value="username" 对input标签做绑定，他只能做单向的绑定，js变量变，页面会变；页面变，js变量不会变 </script> </html>
