day41 vue基础二
v-model 双向绑定 基础原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input v-model='msg2' type="text" >
<button @click='showdata'>点击查看数据</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 欢迎进入vue元编程的世界
var app = new Vue({
el: '#app',
data: {
msg2: '我是msg2'
},
methods:{
showdata(){
console.log(this.msg2)
}
}
})
</script>
</html>
总结 V-model 就是基础1写法的语法糖 ！！！
01 vue 冒泡 以及解决 以及捕获
事件冒泡及其解决方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#big {
width: 300px;
height: 300px;
background-color: red;
}
#erwa {
width: 200px;
height: 200px;
background-color: blue;
}
#sanwa {
width: 100px;
height:100px ;
background-color: white;
}
</style>
</head>
<body>
<div id="app">
<div id='big' @click.stop= "say('大娃',$event)">
<div id="erwa" @click.stop= "say('二娃',$event)">
<div id="sanwa" @click.stop="say('三娃',$event)">
<a @click.stop.prevent ='aaa' href="https://www.baidu.com/">baidu</a>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
// 欢迎进入vue元编程的世界
var app = new Vue({
el:'#app',
data:{
msg:'hello world'
},
methods:{
say(name,dfdfdfefef){
console.log('进入了say方法' + name)
console.log(dfdfdfefef)
},
aaa(){
console.log('进入aaa里面了')
}
}
})
</script>
</html>
vue冒泡对应的就是捕获
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a1 {
width: 300px;
height: 300px;
background-color: red;
}
.a2 {
width: 200px;
height: 200px;
background-color: blue;
}
.a3 {
width: 100px;
height:100px ;
background-color: white;
}
</style>
</head>
<body>
<div>
<div id="app">
<div class="a1" @click.capture="click1">
<div @click.capture="click2" class="a2">
<div @click.capture="click3" class="a3">
click3
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'hellowolrd',
msg2:'你好世界'
},
methods: {
click1() {
console.log("click1")
},
click2() {
console.log("click2")
},
click3(){
console.log('click3')
}
}
})
</script>
</body>
</html>
vue键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input @keyup.enter='submit' type="text">
<input @keyup.delete='d' type="text">
<input @keyup.esc='esc' type="text">
<p>空格</p>
<input @keyup.space='space' type="text">
<input @keyup.up='up' type="text">
<input @keyup.down='down' type="text">
<input @keyup.left='left' type="text">
<input @keyup.right='right' type="text">
<p>f1</p>
<input @keyup.f1='f1' type="text">
<p>A</p>
<input @keyup.A='a' type="text">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
Vue.config.keyCodes.f1 = 112
Vue.config.keyCodes.A = 65
// 欢迎进入vue元编程的世界
var app = new Vue({
el:'#app',
data:{
msg:'hello world'
},
methods:{
submit(){
console.log('我按下了回车键盘')
},
d(){
console.log('进入d里面了')
},
esc(){
console.log('进入了tab键盘')
},
space(){
console.log('进入空格里面了')
},
up(){
console.log('up')
},
down() {
console.log('down')
},
left(){
console.log('left')
},
right(){
console.log('right')
},
f1(){
console.log('f1')
},
a(){
console.log('aaaaa')
}
}
})
console.log(app)
</script>
</html>
v-for的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li :key='index' v-for='(item,index) in fruits'>
{{item}}----{{index}}
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 欢迎进入vue元编程的世界
var app = new Vue({
el: '#app',
data: {
fruits: ['apple', 'pear', 'banana', 'orange']
}
})
</script>
</html>
v-for key绑定的坑 （拓展代码 理解底层index什么时候可以绑定 什么时候注意）
三胞胎站立成一排，你怎么知道谁是老大？
如果老大皮了一下子，和老三换了一下位置，你又如何区分出来？
给他们挂个牌牌，写上老大、老二、老三。
这样就不会认错了。key就是这个作用。
当绑定index时,不能随意进行队列的插入,当改变index下标时,对应绑定的内容也会改变
06 v-for 对象和数组的比较学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<!-- 数组循环 -->
<li v-for="(item,index) in fruits">
{{item}} -------- {{index}}
</li>
<!-- 对象循环 多了一个key 选项 形参可以随意命名 -->
<li v-for="(item,key,index) in user">
{{item}} ------ {{key}} ------- {{index}}
</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 欢迎进入vue元编程的世界
var app = new Vue({
el: '#app',
data: {
fruits: ['apple', 'pear', 'banana', 'orange'],
user: {
username: 'zs',
gender: '男',
age: 22
}
},
})
</script>
</html>
总结V-for
1 v-for支持嵌套遍历 非常强大
2 v-for 不是for in for of 是一个vue提供的 二合一 既可以遍历对象 也可以遍历数组的一个 遍历指令
遇到对象 就是对象的参数 (item,key,index) in user
遇到数组就是数组的参数 v-for="(item,index) in fruits"
3 都需要用key值去绑定 !!
07 v-if v-show 区别 以及v-if 高级用法
（1）手段：
v-if 是动态的向DOM树内添加或者删除DOM元素；
v-show 是通过设置DOM元素的display样式属性控制显隐；
（2）编译过程：
v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-show只是简单的基于css切换；
（3）性能消耗：
v-if 有更高的切换消耗；
v-show 有更高的初始渲染消耗；
（4）使用场景：
v-if 适合运营条件不大可能改变；
v-show 适合频繁切换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if='flag'>
我在这里
</div>
<div v-show='flag2'>
show在这里
</div>
<div v-if="score >=90">
<h1>优秀</h1>
</div>
<div v-else-if="score >=80 && score <90">
<h1>良好</h1>
</div>
<div v-else-if="score >=60 && score <80">
<h1>中等</h1>
</div>
<div v-else>
<h1>不及格</h1>
</div>
<div v-if="score >=90">
<h1>优秀</h1>
</div>
<div v-if="score >=80 && score <90">
<h1>良好</h1>
</div>
<div v-if="score >=60 && score <80">
<h1>中等</h1>
</div>
<div v-if="score < 60">
<h1>不及格</h1>
</div>
</div>
</body>
<script src="./vue.js"></script>
<script>
// 欢迎进入vue元编程的世界
var app = new Vue({
el: '#app',
data: {
score: 99,
flag: 1,
flag2: 1,
obj: {
age: 26,
name: '段誉'
}
}
})
</script>
</html>
08 vue v-bind 动态绑定样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class ="{active:isActive}">
class样式
</div>
<button @click='aaa'>变</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 欢迎进入vue元编程的世界
var app = new Vue({
el: '#app',
data: {
isActive:true
},
methods:{
aaa(){
console.log('进入aaa里面了')
this.isActive = !this.isActive
}
}
})
</script>
</html>
09 v-bind动态绑定样式之数组用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
color: red;
}
.fff{
background-color: blueviolet;
width: 500px;
height: 500px;
}
.aaaaa{
background-color: rgb(216, 21, 102);
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="app">
<div :class ="[activeClass,a2]">
class样式
</div>
<button @click='aaa'>改变</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 欢迎进入vue元编程的世界
var app = new Vue({
el: '#app',
data: {
a2:'fff',
activeClass:"active"
},
methods:{
aaa(){
console.log('aaa')
// this.a2 = 'fffffff'
this.a2 = 'aaaaa'
}
}
})
</script>
</html>
宏任务和微任务的复习:
异步任务分为:宏任务和微任务
简单来说:先微后宏
