Vue学习（第二天）
一、 ES6补充
1.1 块级作用域
在ES6之前因为if和for都没有块级作用域，所以在很多时候，都必须借助于函数（function）的作用域来解决引用外面变量的问题
1.1.1 错误的遍历方式
var btns = document.getElementsByTagName('button');for (var i = 0; i < btns.length; i++) {btns[i].addEventListener('click', function() {console.log('第' + i + '个按钮被点击了...');})}
1.1.2 通过闭包解决var的块级作用域问题
for (var i = 0; i < btns.length; i++) {(function(i) {btns[i].addEventListener('click', function() {console.log('第' + i + '个按钮被点击了...');})})(i)}
1.1.3 使用let关键子
for (let i = 0; i < btns.length; i++) {btns[i].addEventListener('click', function() {console.log('第' + (i + 1) + '个按钮被点击了...');})}
1.2 const关键子
1.2.1 被const所修饰的标识符在定义时必须初始化
1.2.2 被const所修饰的标识符被赋值后不能修改
1.2.3 常量的含义是指向的对象不能修改，但是可以改变对象内部的属性
obj = {name:'why',}obj.name = 'Hello World';console.log(obj);
1.3 增强写法
1.3.1 属性的增强写法
const name = 'why';const age = 18;const height = 1.88;// ES5的写法const obj = {name: name,age: age,height: height}console.log(obj.name);// ES6的写法const obj = {name,age,height}
1.3.2 方法的增强写法
const obj = {run: function() {},eat: function() {}}// ES6的增强写法const obj = {run() {}eat() {}}
二、事件监听
2.1 入门
<button v-on:click='add'>+</button><button v-on:click='sub'>-</button>//语法糖<button @click='add'>+</button><button @click='sub'>-</button>
2.2 参数问题
2.2.1 事件所调用的方法没有参数
//情况相同<button @click='btnClick'>按钮1</button><button @click='btnClick()'>按钮1</button>
2.2.2 事件所调用的方法有参数，但是却省略了()
//第一个参数传入MouseEvent<button @click=btn2Click>按钮2</button>undefined<button @click=btn2Click()>按钮2</button>//输出123<button @click=btn2Click(123)>按钮2</button>
2.2.3 事件所调用的方法需要同时传入多个参数且有一个参数是事件
//第一个参数是事件<button @click=btn3Click>按钮3</button>//全为undefined<button @click=btn3Click()>按钮3</button>//报错，方法不存在<button @click=btn3Click(abc)>按钮3</button>//将事件对象传入第2个参数<button @click=btn3Click(123,$event)>按钮3</button>
2.3 修饰符
2.3.1 stop 防止冒泡事件
<div @click='divClick'>this a div<!-- 防止冒泡事件 --><button @click.stop='btnClick'>按钮</button></div>
2.3.2 prevent 阻止默认事件，如阻止表单提交
<form action="www.baidu.com" method="post"><!-- prevent 阻止默认事件 --><input type="submit" value="提交" @click.prevent='submitClick'></form>
2.3.3 keyup 监听指定事件的点击
<input type="text" @keyup.enter='keyUpClick'>
2.3.4 once 只执行一次
<button @click.once='onceClick'>按钮</button>
三、条件判断
3.1 入门
<h2 v-if='grade>90'>优秀</h2><h2 v-else-if='grade>75'>良好</h2><h2 v-else-if='grade>=60'>合格</h2><h2 v-else>不合格</h2>
3.2 用户登录方式切换
<body><div id="app"><span v-if='isUser'><label for="username">用户账号</label><input type="text" id="username" placeholder="用户账号" key="username"></span><span v-else><label for="email">用户邮箱</label><input type="text" id="eamil" placeholder="用户邮箱" key="email"></span><button @click='isUser = !isUser'>切换类型</button></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {isUser: true,},});</script>
</body>
3.3 用户登录方式切换案例的问题
Vue中为了提高性能，对于在虚拟DOM中的元素进行了复用，即真正在执行时只取其一，加上key可以区分开来不会复用
3.4 v-show与v-if的区别
v-if：不显示元素且组件不存在
v-show：不显示元素但组件存在于DOM中，只是存在display属性，当切片频繁时，使用v-show，否则使用v-if
<div id="app"><h2 v-if='flag' id="a">{{message}}</h2><h2 v-show='flag' id="b">{{message}}</h2><h2></h2></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {message: '你好呀！',flag: true,}})</script>
四、循环遍历
4.1 v-for遍历数组
<div id="app"><ul><!-- item:数组的值index:索引下标--><li v-for='(item,index) in names'>第{{index+1}}个人的名字是：{{item}}</li></ul></div><script type="text/javascript" src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {names: ['张三', '李四', '王五', '马六'],}});</script>
4.2 v-for遍历对象
<div id="app"><ul><!-- item:属性值key:属性名index:对象的索引下标--><li v-for='(item,key,index) in info'>{{item}}+{{key}}+{{index}}</li></ul></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {info: {name: 'zhangsan',age: 18,height: 22}}})</script>
4.3 vue中v-for为何要加key
在DOM和key之间进行绑定，提交性能，比如在数组中间插入元素
<div id="box"><div><input type='text' v-model="name"><button @click="add">添加</button></div><ul><li v-for="(item,i) in list" :key="item.id"><input type="checkbox">{{item.name}}</li></ul></div><script src="../js/vue.js"></script><script>var vm = new Vue({el: '#box',data: {name: '',id: 3,list: [{ id: 1, name: '张三' },{ id: 2, name: '李四' },{ id: 3, name: '王二' }]},methods: {add() {this.list.unshift({ id: ++this.id, name: this.name })this.namne = ''}}});</script> { id: 2, name: '李四' },{ id: 3, name: '王二' }]},methods: {add() {this.list.unshift({ id: ++this.id, name: this.name })this.namne = ''}}});</script>
4.4 关于数组的常用响应式方法
<body><div id="app"><ul><li v-for='item in letters'>{{item}}</li></ul><hr><button @click='push'>push</button><button @click='pop'>pop</button><button @click='shift'>shift</button><button @click='unshift'>unshift</button><button @click='splice'>splice</button><button @click='sort'>sort</button><button @click='reverse'>reverse</button></div><script src="../js/vue.js"></script><script>const app = new Vue({el: '#app',data: {letters: ['a', 'b', 'c', 'd', 'e'],},methods: {push() {// 末尾添加元素this.letters.push('f');},pop() {//删除末尾元素this.letters.pop();},shift() {//头部删除元素this.letters.shift();},unshift() {//头部添加元素this.letters.unshift('f');},splice() {//splice//1.删除元素：splice(start,length) 从start位置开始，删除length个元素// this.letters.splice(1,2);//2.替换元素//第二个参数表示要替换几个元素 ，后面是用于替换的元素// this.letters.splice(1,1,'m','n');//3.插入元素this.letters.splice(1, 1, 'x', 'y', 'z');},sort() {this.letters.sort();},reverse() {this.letters.reverse();}// 注意：通过索引修改值的话不是响应式的// this.letters[0]='b';//set(要修改的对象，索引值，更新值)// Vue.set();}});</script>
</body>
回顾
- 一、 ES6补充
- 1.1 块级作用域
- 1.1.1 错误的遍历方式
- 1.1.2 通过闭包解决var的块级作用域问题
- 1.1.3 使用let关键子
- 1.2 const关键子
- 1.2.1 被const所修饰的标识符在定义时必须初始化
- 1.2.2 被const所修饰的标识符被赋值后不能修改
- 1.2.3 常量的含义是指向的对象不能修改，但是可以改变对象内部的属性
- 1.3 增强写法
- 1.3.1 属性的增强写法
- 1.3.2 方法的增强写法
- 二、事件监听
- 2.1 入门
- 2.2 参数问题
- 2.2.1 事件所调用的方法没有参数
- 2.2.2 事件所调用的方法有参数，但是却省略了()
- 2.2.3 事件所调用的方法需要同时传入多个参数且有一个参数是事件
- 2.3 修饰符
- 2.3.1 stop 防止冒泡事件
- 2.3.2 prevent 阻止默认事件，如阻止表单提交
- 2.3.3 keyup 监听指定事件的点击
- 2.3.4 once 只执行一次
- 三、条件判断
- 3.1 入门
- 3.2 用户登录方式切换
- 3.3 用户登录方式切换案例的问题
- 3.4 v-show与v-if的区别
- 四、循环遍历
- 4.1 v-for遍历数组
- 4.2 v-for遍历对象
- 4.3 vue中v-for为何要加key
- 4.4 关于数组的常用响应式方法
发布评论