08-(掌握)v-on的基本使用和语法糖P30 - 00:05
与用户交互如何监听事件？v-on：click
语法糖写法@click
09-(掌握)v-on的参数传递问题P31 - 00:25
1、如果该方法不需要额外参数，那么方法后的（）可以不添加
2、如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。
<div id="app">
<!--1、事件调用的方法没有参数，小括号可加可不加，没有参数的情况下-->
<button @click="btn1Click">按钮1</button>
<button @click="btn1Click()">按钮1</button>
<!--2、在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，这时候， vue会默认将浏览器生产的 event事件对象作为参数传入到方法-->
<button @click="btn2Click()">按钮2</button>
<button @click="btn2Click(123)">按钮2</button>
<!--3、方法定义时，我们需要event对象，同时又需要其他参数,在调用方法时，如何手动的获取到浏览器参数的event对象：$event-->
<button @click="btn3Click('abc',$event)">按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</div>
<!--使用vue-->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊"
},
methods:{
btn1Click(){
console.log("btn1Click")
},
btn2Click(abc){
console.log(abc)
},
btn3Click(abc,event){
console.log(abc)
}
},
})
</script>
10-(掌握)v-on的修饰符使用P32 - 00:16
<div id="app">
<div @click="divClick">
div点击
<!--阻止事件冒泡点击。.stop-->
<button @click.stop="btnClick">按钮</button>
</div>
<form action="baidu">
<!--阻止表单提交跳转 .prevent-->
<input type="submit" value="提交" @click.prevent="subClick">
</form>
<!--键盘回车事件触发 .enter-->
<input type="text" @keyup.enter="keyUp">
<!--执行一次就中断，不可再次回调 .once-->
<button @click.once="btn2Click"> 按钮2</button>
</div>
<!--使用vue-->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊"
},
methods:{
divClick(){
console.log("divClick")
},
btnClick(){
console.log("btnClick")
},
subClick(){
console.log("subClick")
},
keyUp(){
console.log("监听键盘事件")
},
btn2Click(){
console.log("执行一次不再回调")
}
}
})
</script>
11-(掌握)v-if和v-else-if和v-else的使用P33 - 07:34
13-(理解)登录切换的input复用问题P35 - 01:58
切换input过程中出现重复利用的问题，可以在对应的input中添加key属性即可解决
14-(掌握)v-show的使用以及和v-if的区别P36 - 00:07
1、v-if:当条件为false时，包含v-if指令的元素，根本不会存在dom中，（删除创建循环）
2、v-show:条件为false时，v-show只是给我们的元素添加一个行内样式：display:none。（只是改变样式而已 ）
3、如何选择
- 当需要在显示影藏之间切换很频繁时，使用v-show
- 当只有一次切换是，通过使用v-if
15-(掌握)v-for遍历数组和对象P37 - 00:04
一、数组中遍历
1、在遍历过程中，没有使用索引值（下标值）
<li v-for="item in users">{{item}}</li>
2、在遍历过程中，获取索引值
<li v-for="(item,index)in users">{{index}}{{item}}</li>
二、对象遍历
1、在遍历对象的过程中，如果只是获取一个值，那么获取的是value
<li v-for="item in userObj">item</li>
2、获取key和value,格式（value,key）
<li v-for="(value,item) in userObj">{{value}}{{item}}</li>
3、获取key,vuale,index 格式：（value，key,index）
<li v-for="(value,item,index) in userObj">{{value}}{{item}}</li>
16-(理解)v-for-绑定和非绑定key的区别P38 - 00:06
17-(掌握)数组中哪些方法是响应式的P39 - 00:05
// 1、push()方法追加。
// this.users.push("111","sdsd")
// 2、prop():删除数组中的最后一个元素
// this.users.prop()
// 3、shift()：删除数组中的第一个元素
// this.users.shift()
// 4、unshift():在数组最前面添加元素
// this.users.unshift("111","sdsd")
// 5、splice():删除元素/插入元素/替换元素/（第一个参数表示从第几个（索引）元素开始）
// 删除元素：第二个参数传入你要删除几个元素（如果没有传，就删除后面所有的元素）
// 替换元素：第二个参数表示我们要替换几个元素，后面是用于替换前面的元素
// 插入元素：第二个参数，传入0，并且后面跟上要插入的元素
// 6、sort():数组排序
// 7、reverse()反转
//8、注意：通过索引值修改数组中的元素不能响应到页面，只会改变数组内部数据 this.users[0]="1111",
