JS循环方式
JS循环方式
// 方式一: js循环----->for（）------>基于索引的循环
let i = 0
for (; i < 10;) {
console.log(i)
i++
}
let list = [1, 2, 3, 4, 5, 6, 7, 8]
for (let j = 0; j < list.length; j++) {
console.log(list[j])
}
// 方式二: in循环 基于迭代的循环，依赖于索引取值，python中基本都是迭代取值
let list = [1, 2, 3, 4, 5, 6, 7, 8]
for (const listKey in list) {
console.log("-------listKey", listKey) //索引
console.log("+++++++value", list[listKey]) //值
// 方式三: of 循环 跟python中的in用法一样
let list = [1, 2, 3, 4, 5, 6, 7, 8]
for (const item of list) {
console.log(item) //值
}
// 方式四: 数组自己的循环方法 ----->forEach
let list = [1, 2, 3, 4, 5, 6, 7, 8]
list.forEach(function (value,index){
console.log(value) // 值
console.log(index) // 索引
})
// 方式五: jQuery的循环
let list = [1, 2, 3, 4, 5, 6, 7, 8]
$.each(list, function (value, index) {
console.log(value) // 索引
console.log(index) // 值
})
Key值的解释
# vue中使用v-for的时候，在标签上，会看到有 key 属性
- :key="item" 用的属性指令
-key对应的值必须是唯一的
# 在循环的标签上，加key值的好处是，加速虚拟dom的替换
-区别只在循环的变量变化时，效率高低
-但是一定要注意：vule必须唯一
Vue.set的使用
// 以后可能会遇到，数据变了，页面没变的情况
-不能直接更改，借助于vue提供的方法，vue.Set 更改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="src/JS/Vue.js"></script>
<script src="src/JS/jQuery.js"></script>
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
<script type="module" src="/src/main.js"></script>
<title></title>
</head>
<body>
<div id="app1">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<button class="btn btn-success" @click="cat_goods">点我显示购物车</button>
<button class="btn btn-danger" @click="delete_goods">点我删除书籍</button>
<button class="btn btn-info" @click="rollback">反转</button>
<button class="btn btn-info" @click="set_data">修改第一条数据</button>
<table class="table table-bordered">
<thead>
<tr>
<th>商品ID</th>
<th>商品名字</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
</thead>
<tbody>
<tr v-for="goods in goods_list">
<td>{{ goods.id }}</td>
<td>{{ goods.name }}</td>
<td>{{ goods.price }}</td>
<td>{{ goods.count }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: "#app1",
data: {
goods_list: []
},
methods: {
cat_goods() {
this.goods_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},
]
},
delete_goods() {
this.goods_list.pop()
},
rollback() {
this.goods_list.reverse()
},
set_data() {
// this.goods_list[0] = {id: 7, name: '超大钢笔', price: 999, count: 444}
// 这种修改方式只是数据进行了修改，并没有将修改过后的数据渲染
// console.log(this.goods_list)
Vue.set(this.goods_list, 0, {id: 7, name: '超大钢笔', price: 999, count: 444})
}
},
})
</script>
</html>
v-model的使用
:value="username" 对input标签做绑定，它只能单项的绑定，js变量变，页面会变，页面变，js变量不会变
v-model是Vue.js框架中的指令，用于实现双向数据绑定。通过v-model，可以将表单元素的值与Vue实例的数据属性进行绑定，从而实现数据的双向同步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="src/JS/Vue.js"></script>
<script src="src/JS/jQuery.js"></script>
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
<script type="module" src="/src/main.js"></script>
<title></title>
</head>
<body>
<div id="app1">
<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>username:<input type="text" v-model="username"></p>
<p>password:<input type="password" v-model="password"></p>
<button class="btn btn-success" @click="login">登录</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: "#app1",
data: {
username: '',
password: '',
},
methods: {
login() {
console.log(this.username)
console.log(this.password)
}
},
})
</script>
</html>
事件处理
事件的基本使用
// input 标签事件
input 当输入框进行输入的时候 触发事件
change 当元素的值发生改变的时候 触发的事件，光标移走才检测
blur 当输入框失去焦点的时候 出发事件
focus 光标到input表框上触发事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="src/JS/Vue.js"></script>
<script type="module" src="/src/main.js"></script>
<title></title>
</head>
<body>
<div id="app1">
<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>
<p><input type="text" v-model="value" @input="handerInput">----{{ value }}</p>
<h2>change事件，修改元素的值的时候触发</h2>
<p><input type="text" v-model="value1" @change="handerChange">----{{ value1 }}</p>
<h2>blur事件，失去焦距的触发</h2>
<p><input type="text" v-model="value2" @blur="handerBlur">----{{ value2 }}</p>
<h2>focus事件，聚焦的时候触发</h2>
<p><input type="text" v-model="value3" @focus="handerFocus">----{{ value3 }}</p>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: "#app1",
data: {
value: '',
value1: '',
value2: '',
value3: '',
},
methods: {
handerInput() {
console.log("handerInput")
},
handerChange() {
console.log("handerChange")
},
handerBlur() {
console.log("handerBlur")
},
handerFocus() {
console.log("handerFocus")
}
},
})
</script>
</html>
过滤案例
// 补充1、indexOf 方法
// 判断一个字符串是不是在另一个字符串里面
indexOf是一个在字符串中搜索指定字符或子字符串的方法。它返回字符或子字符串第一次出现的索引位置，如果找不到则返回-1
<script>
let name = "hello my name is yangfuhua"
console.log(name.indexOf("my"))
</script>
// 补充二、数组的过滤
// 数组的filter方法----->需要传入一个匿名函数，匿名函数接受一个参数，它会循环该数组，一次次地调用这个匿名函数，并且传入循环得到的值
// 这个匿名函数返回true，表示这个值做保留，返回false，表示这个值不做保留
<script>
let list = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc']
datalist = list.filter(function (item) {
return true
})
console.log(datalist)
</script>
// 补充三、箭头函数
//1 之前写法
var f = function () {
console.log('f执行了')
}
f()
//2 变成箭头函数 参数和函数体之间加了箭头
var f = () => {
console.log('f执行了')
}
f()
// 3 带参数箭头函数,带一个参数，可以简写
var f = (a) => {
console.log(a)
}
var f = a => {
console.log(a)
}
f('lqz')
// 4 有多个参数,不能简写
var f = (a, b) => {
console.log(a, b)
}
f('lqz', 19)
// 5 有一个返回值
var f = (a, b) => {
return a + b
}
console.log(f(1, 19))
// 6 可以省略
var f = (a, b) => a + b
console.log(f(1, 19))
// 7 一个参数，一个返回值
var f = name => name + '_NB'
console.log(f('lqz'))
//////////////////////////////过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="src/JS/Vue.js"></script>
<script src="src/JS/jQuery.js"></script>
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
<script type="module" src="/src/main.js"></script>
<title></title>
</head>
<body>
<div id="app1">
<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">
<p v-for="item in new_list">{{ item }}</p>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: "#app1",
data: {
myText: "",
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'agg'],
new_list: [],
},
methods: {
handleInput() {
// 写法一
// let _this = this
// this.new_list = this.dataList.filter(function (item) {
// return item.indexOf(_this.myText) >= 0;
// })
// 写法二 使用箭头函数
this.new_list = this.dataList.filter((item => item.indexOf(this.myText) >= 0))
}
},
})
</script>
</html>
事件修饰符
// 事件修饰符，主要阻止冒泡事件
.stop // 只处理自己的事情，父控件冒泡的时间不处理(阻止事件冒泡)
.self // 只处理自己的事件，子控件冒泡的事件不处理
.prevent // 阻止a链接的跳转
.once // 事件只会触发一次(刷新后还可以在触发)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="src/JS/Vue.js"></script>
<script src="src/JS/jQuery.js"></script>
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
<script type="module" src="/src/main.js"></script>
<title></title>
</head>
<body>
<div id="app1">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>事件修饰符 stop和self</h1>
<h2>子标签事件，冒泡到父标签上，----->阻止 stop 放在子标签上</h2>
<ul @click.self="handerfu">
<li @click.stop="handerone">第一个li</li>
<li @click="handertwo">第二个li</li>
<li @click="handerthree">第三个li</li>
</ul>
<h2>阻止a的跳转</h2>
<a href="https://www.baidu.com" @click.prevent="handerA">点我看美女</a>
<h2>once只能点击一次</h2>
<button class="btn btn-success" @click.once="handerbutton">点我秒杀</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: "#app1",
data: {},
methods: {
handerfu() {
console.log("父标签被点击了")
},
handerone() {
console.log("第一个子标签")
},
handertwo() {
console.log("第二个子标签")
},
handerthree() {
console.log("第三个子标签")
},
handerA() {
console.log("点击了A标签")
},
handerbutton() {
console.log("秒杀成功")
}
},
})
</script>
</html>
表单控制
radio、checkbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="src/JS/Vue.js"></script>
<script src="src/JS/jQuery.js"></script>
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
<script type="module" src="/src/main.js"></script>
<title></title>
</head>
<body>
<div id="app1">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>表单控制</h1>
<form action="">
<!-- 用户名密码-->
username:<input type="text" v-model="username">
password:<input type="password" v-model="password">
<!-- 性别-->
man:<input type="radio" v-model="gender" value="1">
women:<input type="radio" v-model="gender" value="2">
None:<input type="radio" v-model="gender" value="0">
<!-- 兴趣爱好-->
篮球：<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" v-model="is_rem">
<input type="button" @click="handersubmit" value="提交">
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: "#app1",
data: {
username: "",
password: "",
gender: "",
hobby: [],
// checkbox单选 返回的不是 true 就是 false
is_rem:''
},
methods: {
handersubmit() {
console.log(this.username, this.password, this.gender, this.hobby,this.is_rem)
}
},
})
</script>
</html>
购物车案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="src/JS/Vue.js"></script>
<script src="src/JS/jQuery.js"></script>
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
<script type="module" src="/src/main.js"></script>
<title></title>
</head>
<body>
<div id="app1">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>基本购物车</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>id号</th>
<th>商品名字</th>
<th>商品价格</th>
<th>商品数量</th>
<th>全选/全不选 <input type="checkbox" v-model="checkboxAll" @click="handercheckbox"></th>
</tr>
</thead>
<tbody>
<tr v-for="item in goods_list">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>{{ item.count }}</td>
<td><input type="checkbox" v-model="checkboxall" :value="item" @click="handerone"></td>
</tr>
</tbody>
</table>
<hr>
商品总价：{{ get_price() }}
<hr>
商品详情：{{ checkboxall }}
</div>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: "#app1",
data: {
goods_list: [
{id: 1, name: 'XXX', price: 99, count: 2},
{id: 2, name: '西柚记', price: 59, count: 1},
{id: 3, name: '水壶转', price: 89, count: 5},
],
checkboxAll: false,
checkboxall: []
},
methods: {
// 商品价格运算
get_price() {
let total = 0
for (const item of this.checkboxall) {
console.log(item)
total += item.price * item.count
}
return total
},
handercheckbox() {
if (this.checkboxAll) {
this.checkboxall = []
} else {
this.checkboxall = this.goods_list
}
},
handerone() {
if (this.checkboxall.length === this.goods_list.length) {
this.checkboxAll = true
} else {
this.checkboxAll = false
}
}
},
})
</script>
</html>
带加减和全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="src/JS/Vue.js"></script>
<script src="src/JS/jQuery.js"></script>
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
<script type="module" src="/src/main.js"></script>
<title></title>
</head>
<body>
<div id="app1">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>基本购物车</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>id号</th>
<th>商品名字</th>
<th>商品价格</th>
<th>商品数量</th>
<th>全选/全不选 <input type="checkbox" v-model="checkboxAll" @click="handercheckbox"></th>
</tr>
</thead>
<tbody>
<tr v-for="item in goods_list">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td><span class="btn btn-success" @click="item.count++">+</span>{{ item.count }}
<span class="btn btn-danger" @click="handleJian(item)">-</span>
</td>
<td><input type="checkbox" v-model="checkboxall" :value="item" @click="handerone"></td>
</tr>
</tbody>
</table>
<hr>
商品总价：{{ get_price() }}
<hr>
商品详情：{{ checkboxall }}
</div>
</div>
</div>
</div>
</div>
</body>
<script>
let vm = new Vue({
el: "#app1",
data: {
goods_list: [
{id: 1, name: 'XXX', price: 99, count: 2},
{id: 2, name: '西柚记', price: 59, count: 1},
{id: 3, name: '水壶转', price: 89, count: 5},
],
checkboxAll: false,
checkboxall: []
},
methods: {
get_price() {
let total = 0
for (const item of this.checkboxall) {
console.log(item)
total += item.price * item.count
}
return total
},
handercheckbox() {
if (this.checkboxAll) {
this.checkboxall = []
} else {
this.checkboxall = this.goods_list
}
},
handerone() {
if (this.checkboxall.length === this.goods_list.length) {
this.checkboxAll = true
} else {
this.checkboxAll = false
}
},
handleJian(item) {
if (item.count > 1){
item.count--
}else {
alert("商品数量最少为1")
}
}
},
})
</script>
</html>
v-moder的其他用法
v-model 之 lazy、number、trim的使用
lazy：等待input框的数据绑定时去焦点之后再变化
number：数字卡头，只保留数字，后面的字母不保留；字母开头，都保留
trim：去除首位的空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="src/JS/Vue.js"></script>
<script src="src/JS/jQuery.js"></script>
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
<script type="module" src="/src/main.js"></script>
<title></title>
</head>
<body>
<div id="app1">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>v-model 之 lazy、number、trim的使用</h1>
<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>
let vm = new Vue({
el: "#app1",
data: {
value: '',
value1: '',
value2: '',
},
methods: {},
})
</script>
</html>