1 列表渲染-v-for指令
1.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 id="app">
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
<hr>
<p v-for="item in names">名字：{{item}}</p>
<hr>
<a href="" v-for="name in names">{{name}}</a>
<hr>
<div v-for="name in names">
<a href="">{{name}}</a>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
names: ['张三', '彭于晏', '迪丽热巴', 'lqz']
},
})
// es6 对象写法
// 1 基础写法
// var userinfo={'name':'lqz','age':19}
// console.log(userinfo)
// 2 省略key的引号 key 值不能出 - js 变量名中不能出现 -
// var userinfo = {name: 'lqz', age: 19}
// console.log(userinfo)
// 3 对象中直接放变量
// var name = 'lqz'
// var age = 19
// var userinfo = {name, age} // {name: 'lqz', age: 19}
// console.log(userinfo)
// 4 对象中 方法
// var name = 'lqz'
// var age = 19
// var userinfo = {
// name, age, 'showName': function () {
// console.log('名字是：'+name)
// console.log(this) // python 对象中 有self， 这个this就是当前 实例对象
// console.log('另一个取名字的方式：'+this.name) // python 对象中 有self， 这个this就是当前 实例对
// }
// }
// userinfo.showName()
// 5 方法简写
// 如果不在 实例对象内部 this代指window对象，就是bom对象，this可以不写
// 后期会遇到this指向的问题
// var showName = function () {
// // console.log(this.location) // 代指当前window对象 浏览器，bom对象
// // console.log(location) // 代指当前window对象 浏览器，bom对象,不写this
// console.log('另一个取名字的方式：' + this.name)
// }
// var name = 'lqz'
// var age = 19
// var userinfo = {
// name, age, showName
// }
// userinfo.showName()
// 6 最终
// var name = 'lqz'
// var age = 19
// var userinfo = {
// name, age, showName() {
// console.log('另一个取名字的方式：' + this.name)
// }
// }
/*
showName(){
console.log('另一个取名字的方式：' + this.name)
}
showName:function(){
console.log('另一个取名字的方式：' + this.name)
}
*/
</script>
</html>
1.2 显示购物车案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim"
crossorigin="anonymous"></script>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-6 offset-3">
<h1 class="text-center">购物车</h1>
<div v-if="goodsList.length==0">购物车空空如也</div>
<table class="table" v-else>
<thead>
<tr>
<th scope="col">商品id</th>
<th scope="col">商品名字</th>
<th scope="col">商品数量</th>
<th scope="col">商品价格</th>
<th scope="col">商品图片</th>
</tr>
</thead>
<tbody>
<tr class="table-danger" v-for="good in goodsList">
<th scope="row">{{good.id}}</th>
<td>{{good.name}}</td>
<td>{{good.count}}</td>
<td>{{good.price}}</td>
<td><img :src="good.img" alt="" width="50px" height="50px"></td>
</tr>
</tbody>
</table>
<button class="btn btn-danger" @click="loadData">加载购物车</button>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
goodsList: []
},
methods: {
loadData() {
this.goodsList = [
{id: 1, name: '短裙', count: 2, price: 99, img: './img/1.png'},
{id: 2, name: '短裤', count: 6, price: 88, img: './img/1.png'},
{id: 3, name: '短袖', count: 3, price: 109, img: './img/1.png'},
{id: 4, name: '卫衣', count: 1, price: 55, img: './img/1.png'},
{id: 5, name: '黑丝', count: 200, price: 9.9, img: './img/1.png'},
]
}
}
})
</script>
</html>
1.3 v-for可以循环的类型
## 跟js的in 是反的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<script
src="./js/jq.js"></script>
</head>
<body>
<div id="app">
<h1>循环数组</h1>
<ul>
<li v-for="(item,index) in names">{{item}}--->{{index}}</li>
</ul>
<hr>
<h1>循环对象</h1>
<ul>
<li v-for="(value,key) in userinfo">key是:{{key}}----value是：{{value}}</li>
</ul>
<hr>
<h1>循环字符串</h1>
<ul>
<li v-for="(value,index) in s">{{value}}---{{index}}</li>
</ul>
<hr>
<h1>循环数字</h1>
<ul>
<li v-for="(item,index) in 10">{{item}}--->{{index}}</li>
</ul>
<hr>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
names: ['张三', '彭于晏', '迪丽热巴', 'lqz'],
userinfo: {name: 'lqz', age: 19, hobby: '篮球'},
s: 'lqz is handsome'
},
})
// 补充：js的循环方式
// 1 基于索引的循环---》最基本的
// for (var i = 0; i < 10; i++) {
// console.log(i)
// }
// 2 in 循环
// var names = ['lqz', '小红', '小吕'] // 数组
// for (item in names) { // 循环索引
// // console.log(item)
// console.log(names[item])
// }
// var userinfo = {'name': 'lqz', 'age': 19} // 对象
// for (item in userinfo) { // 循环的是key
// console.log(userinfo[item])
// }
// var s = 'lqz' // 字符串
// for (item in s) { //索引
// console.log(s[item])
// }
// 3 of 循环
// var names = ['lqz', '小红', '小吕'] // 数组
// for (item of names) { // 循环 具体值
// console.log(item)
// }
// var userinfo = {'name': 'lqz', 'age': 19} // 对象 不能用of循环
// for (item of userinfo) { // 循环的是value
// console.log(item)
// }
// var s = 'lqz' // 字符串
// for (item of s) { // 循环 value
// console.log(item)
// }
// for (item of 10) { // 不能循环数字
// console.log(item)
// }
// 4 数组的方法，实现循环
// var names = ['lqz', '小红', '小吕']
// names.forEach(function (value,index) {
// console.log(index)
// console.log(value)
// })
// var userinfo = {'name': 'lqz', 'age': 19} // 没有循环方法
// 5 jq 的each循环
// var names = ['lqz', '小红', '小吕']
// $.each(names, function (index, value) {
// console.log(index)
// console.log(value)
// })
var userinfo = {'name': 'lqz', 'age': 19}
$.each(userinfo, function (key, value) {
console.log(key)
console.log(value)
})
</script>
</html>
1.4 js中循环方式
// 补充：js的循环方式
// 1 基于索引的循环---》最基本的
// for (var i = 0; i < 10; i++) {
// console.log(i)
// }
// 2 in 循环
// var names = ['lqz', '小红', '小吕'] // 数组
// for (item in names) { // 循环索引
// // console.log(item)
// console.log(names[item])
// }
// var userinfo = {'name': 'lqz', 'age': 19} // 对象
// for (item in userinfo) { // 循环的是key
// console.log(userinfo[item])
// }
// var s = 'lqz' // 字符串
// for (item in s) { //索引
// console.log(s[item])
// }
// 3 of 循环
// var names = ['lqz', '小红', '小吕'] // 数组
// for (item of names) { // 循环 具体值
// console.log(item)
// }
// var userinfo = {'name': 'lqz', 'age': 19} // 对象 不能用of循环
// for (item of userinfo) { // 循环的是value
// console.log(item)
// }
// var s = 'lqz' // 字符串
// for (item of s) { // 循环 value
// console.log(item)
// }
// for (item of 10) { // 不能循环数字
// console.log(item)
// }
// 4 数组的方法，实现循环
// var names = ['lqz', '小红', '小吕']
// names.forEach(function (value,index) {
// console.log(index)
// console.log(value)
// })
// var userinfo = {'name': 'lqz', 'age': 19} // 没有循环方法
// 5 jq 的each循环
// var names = ['lqz', '小红', '小吕']
// $.each(names, function (index, value) {
// console.log(index)
// console.log(value)
// })
var userinfo = {'name': 'lqz', 'age': 19}
$.each(userinfo, function (key, value) {
console.log(key)
console.log(value)
})
1.5 其他
#1 key 值的解释
-后期使用 v-for循环，在标签上，大家通常写 key属性
-key对应的value值必须 唯一 ##### 唯一####
-作用是：加速dom的替换，提高v-for循环的速度
# 2 数组，对象的更新
有些方法---》没有监控
如果数组，对象，修改了，页面没变量
Vue.set(对象, key, value值)
Vue.set(数组, 索引, value值)
2 事件处理
# input 表示的事件
-blur ：失去焦点
-focus：得到焦点
-change ：内容发生变化
-input： 只要输入内容就触发
2.1 基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>v-mode指令</h1>
用户名：<input type="text" v-model="name">--》{{name}}
<h2>blur</h2>
<input type="text" v-model="data01" @blur="haneldBlur">--》{{data01}}
<h2>focus</h2>
<input type="text" v-model="data02" @focus="haneldFocus">--》{{data02}}
<h2>change</h2>
<input type="text" v-model="data03" @change="haneldChange">--》{{data03}}
<h2>input</h2>
<input type="text" v-model="data04" @input="haneldInput">--》{{data04}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '',
data01: '',
data02: '',
data03: '',
data04: '',
},
methods: {
haneldBlur() {
alert(this.data01)
},
haneldFocus() {
console.log('来了老弟')
},
haneldChange() {
console.log(this.data03)
},
haneldInput(){
console.log(this.data04)
}
}
})
</script>
</html>
2.2 过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>过滤案例</h1>
<input type="text" v-model="search" @input="handleSearch">
<ul>
<li v-for="item in newDataList">{{item}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
search: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf'],
newDataList: ['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf'],
},
methods: {
//1 笨办法实现过滤
// handleSearch() {
// console.log(this) // this 是vue实例
// var _this = this
// // 过滤dataList 中每一个是否包含用户输入的 this.search
// this.newDataList = this.dataList.filter(function (item) {
// console.log(_this) // this 是window对象
// if (item.indexOf(_this.search) >= 0) {
// return true
// } else {
// return false
// }
// })
// // 存在俩问题
// // 1 this指向问题 在外部，定义一个_this，内部用_this
// // 2 改数据是在dataList上改的
// }
// 2 使用箭头函数
// handleSearch() {
// this.newDataList = this.dataList.filter(item => {
// if (item.indexOf(this.search) >= 0) {
// return true
// } else {
// return false
// }
// })
// },
// 3 终极方案
handleSearch() {
this.newDataList = this.dataList.filter(item => item.indexOf(this.search) >= 0)
}
}
})
// 11111 补充1：数组的过滤
var dataList = ['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf']
//1 过滤掉所有
// var newDataList = dataList.filter(function (item) {
// // return false
// return true
// })
// 2 只保留长度大于2的
// var newDataList = dataList.filter(function (item) {
// if (item.length > 2) {
// return true
// } else {
// return false
// }
// })
//3 只保留包含at的
// var search = 'at'
// var newDataList = dataList.filter(function (item) {
// if (item.indexOf(search) >= 0) {
// return true
// } else {
// return false
// }
//
// })
// console.log(newDataList)
// 222222补充2， 判断子字符串是否在字符串中
// var search = 'at'
// var s = 'lqzattr'
// var res = s.indexOf(search) // 子字符串在字符串的哪个位置
// console.log(res)
// 3333 箭头函数
// 3.1 正常匿名函数写法---我们都会了
// var f =function (){
// console.log('ffff')
// }
// f()
// 3.2 箭头函数写法 把function去掉，在形参括号和函数体大括号之间加个 =>
// var f = () => {
// console.log('ffff')
// }
// f()
// 3.3 箭头函数有参数
// var f = (name) =>{
// console.log(name)
// }
// f('lqz')
// 3.4 如果只有一个参数，可以简写成 有多个参数必须加在括号中
// var f = name => {
// console.log(name)
// }
// f('lqz')
// 3.5 箭头函数有返回值
// var f = name => {
// return name + 'nb'
// }
// var res=f('lqz')
// console.log(res)
// 3.6 箭头函数有返回值,没有其他代码，可以简写
// var f = name => name + 'nnb'
//
// var res = f('lqz')
// console.log(res)
// 3.7 其他案例 add
// var f1 = function (a, b) {
// return a + b
// }
// var f1 = (a, b) => a + b
// var f1 = a => a + 100
// 3.8 箭头函数没有自己的this，箭头函数中使用的this，是它上一层的this
</script>
</html>
2.2.1 回顾
# 1 数组的过滤 filter方法
# 2 字符串包含 字符串.indexOf(子字符串)
# 3 箭头函数
2.3 事件修饰符
# 修饰点击事件的 修饰符
once
prevent
self
stop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>事件修饰符</h1>
<h2>once 只点击一次</h2>
<button @click.once="haneldClick">点我弹窗</button>
<h2>阻止a的跳转</h2>
<a href="http://www.baidu.com" @click.prevent="haneldA">点我看美女</a>
<h3>stop，子标签上用只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）</h3>
<ul @click="handlelul">
<li @click.stop="handleli">li001--不让事件往上冒泡了</li>
<li>li002</li>
</ul>
<h3>self，父签上用 ，只处理自己的事件，子控件冒泡的事件不处理</h3>
<ul @click.self="handlelul">
<li @click="handleli">li001</li>
<li>li002</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
haneldClick() {
alert('贪了')
},
haneldA() {
console.log('点了')
// if(条件){
// location.href='http://www.baidu.com'
// }
// location.href = 'http://www.cnblogs.com'
},
handleli() {
console.log('li被点击了')
},
handlelul() {
console.log('ul被点击了')
}
}
})
</script>
</html>
2.4 按键修饰符
# 按键是个事件--》keyup keydown
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>按键事件</h1>
<input type="text" @keyup="handleUp">
<h2>按键修饰符</h2>
<!-- <input type="text" @keyup.enter="handleUp02">-->
<input type="text" @keyup.13="handleUp03">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
handleUp(event) {
console.log(event.key)
},
handleUp02() {//只有按了回车，再触发函数执行
console.log('回车被敲了')
},
handleUp03() {
console.log('13对应的按键被按下了')
}
}
})
</script>
</html>
3 数据双向绑定
# v-model 指令，只针对于input标签
# 使用v-model绑定后，只要变量发生变化，页面就变化，只要页面变化，变量就变化
4 表单控制
4.1 checkbox选中，单选，多选,radio
# input 标签，使用 v-model 双向绑定
text
password
checkbox
file
radio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>checkbox</h1>
<h2>用户登录示例</h2>
<p>用户名：<input type="text" v-model="username"></p>
<p>密码：<input type="password" v-model="pwd"></p>
<p>记住密码：<input type="checkbox" v-model="rem"></p>
<p>爱好：<br>
<input type="checkbox" v-model="hobbys" value="篮球">篮球</p>
<input type="checkbox" v-model="hobbys" value="足球">足球</p>
<input type="checkbox" v-model="hobbys" value="乒乓球">乒乓球</p>
<br>
<input type="radio" v-model="radio" value="男">男
<input type="radio" v-model="radio" value="女">女
<input type="radio" v-model="radio" value="保密">保密
<button @click="handleSubmit">登录</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
username: '',
pwd: '',
rem: '', // 只做选中不选中判断 使用布尔
hobbys: [], // 放多个元素用数组
radio: ''
},
methods: {
handleSubmit() {
console.log(this.username, this.pwd, this.rem, this.hobbys,this.radio)
}
}
})
</script>
</html>
作业
# 上课讲的练习
扫一扫
2050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
