1.计算属性的setter和getter(为什么这里的fullName不用加括号)
因为直接调用了get里的方法所以不加()也可以显示出最终结果
注意://计算属性一般没有set方法,只读属性
可以简写做:
2.计算属性和methods的对比(计算属性的缓存)
同样执行了五次,但是methods要调用5次而computed只需要一次。
原因:计算属性会进行缓存,如果多次使用时,计算属性只会调用一次。
当改变了firstName或者lastName的值后,computed会再调用一次,而所有显示出来的词都会改变。只要firstName和lastName不变,computed都只需要调用一次。
3.ES6相关补充-块级作用域
在ES5之前因为if和for都没有块级作用域的概念,所以在很多时候,我们都必须借助于funcation的作用域来解决引用外面变量的问题
在ES6中,加入了let,let它是有我们if和for的块级作用域的。
3.闭包的结构
写一个匿名函数再嵌套一个函数,最后的(i)相当于调用该函数。
4.const的使用
const变量指向的地址不可以改变,但是可以改变对象内部的属性。这一点看到了一个小姐姐发的腾讯面试过程中有问到了const可不可以改变,所以重点了解了一下。
5.对象字面量的增强写法
<!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>
</head>
<body>
<script>
//const obj = new Object();
// const obj = {
// name :'why',
// age:18,
// height:1.88,
// run:function(){
// console.log('在奔跑');
// },
// eat:function(){
// console.log('在吃东西');
// }
// }
//1.属性的增强写法
const name = 'why';
const age = 18;
const height = 1.88;
//ES5的写法:(将上述变量放入obj中,最后显示结果能得到值)
// const obj = {
// name :'why',
// age:18,
// height:1.88,
// run:function(){
// console.log('在奔跑');
// },
// eat:function(){
// console.log('在吃东西');
// }
// }
//ES6写法:(将上述变量放入obj中,最后显示结果能得到值,ES6中会自动把值放入obj中的各个属性中)
const obj = {
name,
age,
height,
}
//2.函数的增强写法
//ES5的写法:
// const obj = {
// run:function(){
// console.log('在奔跑');
// },
// eat:function(){
// console.log('在吃东西');
// }
// }
//ES6的写法:
const obj = {
run() {
},
eat() {
}
}
</script>
</body>
</html>
6.v-on的参数问题
在没有参数时,方法后的()可以不加
当需要传入参数时,
如果是btnclcik2(abc),因为符合abc变量标识符的书写规范,所以系统会默认abc是一个变量,当找不到abc这个变量时,系统会认为你没有传参,而显示默认值undefined。
如果是<button @click=“btnclcik2(123)”>按钮2
或是<button @click=“btnclcik2(‘abc’)”>按钮2
则会正常显示123和abc
如果是<button @click=“btnclcik2”>按钮2
这个时候,Vue会默认将浏览器生成的event事件对象作为参数传入到方法。
在方法定义时,我们需要event对象,同时又需要其他参数;
在调用方法时,如何手动的获取到浏览器参数的event对象:$event
7.v-on修饰符的使用
<body>
<!-- 1..stop修饰符的使用 -->
<div id="app" @click="divclick">
<!-- 阻止事件冒泡 -->
<button @click.stop="btnclick">按钮</button>
<!-- 2..prevent修饰符的使用 -->
<form action="baidu">
<input type="submit" value="提交1">
<input @click.prevent="submitclick" type="submit" value="提交2">
</form>
<!-- 3. .监听某个键帽 -->
<form action="baidu">
<input @keyup.enter="keyupclick" type="text" value="提交2">
</form>
<!-- 4. .once修饰符的使用 -->
<button @click="btnclcik2">btn</button>
<cpn @click.native="cpnclick"></pn>
</div>
</body>
<script>
let app = new Vue({
el:'#app',
data:{
message:'Hello World'
},
methods: {
btnclick(){
console.log("btnclick");
},
divclick(){
console.log("divclick");
},
submitclick(){
console.log("submitclick");
},
keyupclick(){
console.log("keyupclick");
},
btnclcik2(){
console.log("btnclcik2");
},
},
})
</script>
Vue提供了修饰符来帮助我们方便的处理一些事件:
.stop - 调用 event.stopPropagation()。//阻止冒泡事件
.prevent - 调用 event.preventDefault()。//阻止自动事件的发生,比如提交表单,当按下提交键之后会自动提交,而.prevent就可以现在函数内处理数据再手动提交
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
8-v-if和v-else和v-else-if的使用
<!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>
</head>
<script src="../../vue.js"></script>
<body>
<div id="app">
<!-- <h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2> -->
<h1>{{result}}</h1>
</div>
</body>
<script>
let app = new Vue({
el:'#app',
data:{
message:'Hello World',
score:99,
},
computed: {
result(){
let showMessage = "888";
if(this.score>=90){
showMessage = '优秀';
}else if(this.score>=80){
showMessage = '良好';
}else if(this.score>=60){
showMessage = '及格';
}else{
showMessage = '不及格';
}
return showMessage;
},
}
})
</script>
</html>
9.登录切换案例和input服用问题
<!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>
</head>
<script src="../../vue.js"></script>
<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="email" placeholder="邮箱登录" key="email">
<input type="text" id="test" placeholder="测试">
</span>
<button @click="changeBtn">切换类型</button>
</div>
</body>
<script>
let app = new Vue({
el:'#app',
data:{
isUser:true,
},
methods: {
changeBtn(){
this.isUser = !this.isUser;
}
},
})
</script>
</html>
(可以了解一下虚拟DOM)
10.v-show的使用
在控制台输入
再查看我们的html代码:
使用v-if的片段直接没有了,而使用v-show的片段还存在,只是在元素添加了行内样式:display:none
11.v-for遍历数组和对象
01-遍历数组:
<body>
<div id="app">
<!-- 1.在遍历时没有使用索引值(下标值)-->
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
<!-- 2.在遍历的过程中获取下标志 -->
<ul>
<li v-for="(item,index) in names">{{index+1}}.{{item}}</li>
</ul>
</div>
</body>
<script>
let app = new Vue({
el:'#app',
data:{
names:['why','kobe','james','curry'],
}
})
</script>
02-遍历对象:
<body>
<div id="app">
<!-- 1.在遍历对象的过程中,如果只是获取一个值,那么获取到的是value-->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!-- 1.获取key和value (value,key)-->
<ul>
<li v-for="(value,key) in info">{{value}}-{{key}}</li>
</ul>
<!-- 3.获取value,key和index-->
<ul>
<li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
</ul>
</div>
</body>
<script>
let app = new Vue({
el:'#app',
data:{
info:{
name:'why',
age:18,
height:1.88,
}
}
})
</script>
12.v-for使用过程添加key
JavaScript splice() 方法
注意:在v-for中使用key,需要绑定的元素都只有唯一值。
疑问:文档中写了第一个参数输入负数的时候可从数组结尾处规定位置。但插入的时候总是插入到倒数第二个,有什么方法可以快速的插入到最末呢?
输入:app.letters.splice(app.letters.length,0,‘mmm’);
或者app.letters.push(‘a’,‘b’,‘c’);
即可插入到最末。
13.哪些数组的方法是响应式的?
</body>
<script>
let app = new Vue({
el:'#app',
data:{
letters:['a','b','c','d','e']
},
methods: {
btnclick(){
/* //1.push方法(可以响应式改变)
this.letters.push('f'); */
/* //2.通过索引值修改数组中的元素(不能响应式改变)
this.letters[0] = 'bbb'; */
/* //3.pop()//删除数组总的最后一个元素(可以响应式改变)
this.letters.pop(); */
/* //4.shift()//删除数组总的第一个元素(可以响应式改变)
this.letters.shift(); */
/* //5.unshift();//在数组最前面添加元素,会替代第0位(可以响应式改变)
this.letters.unshift('aaa','bbb','ccc'); */
//6.splice(start,)(可以响应式改变)
//作用:删除/插入/替换元素
//删除元素:第二个参数传入你要删除几个元素,如果第二个不传,会把从第一个元素的值开始的索引删到最后
//替换元素:第二个参数,便是我们要替换几个元素,后面是用来替换前面的元素
//插入元素:第二个参数,传入0,并且后面跟上要插入的元素
this.letters.splice(0,0,'m','l','y');
//7.sort()//排序
this.letters.sort();
//8.reverse()//反转
this.letters.reverse();
//set(要修改的对象,索引值,修改后的值)
Vue.set(this.letters,0,'bbb');
},
},
})
//面试可能会问
// 可变参数,将传入的值放进一个数组中
function sum(...num){
console.log(num);
}
sum(20,30,40,50,60,70);
</script>
(可变参数)
14.作业的回顾和完成
王红元老师的答案:
<!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>
</head>
<script src="../vue.js"></script>
<style>
.change{
color: red;
}
</style>
<body>
<!-- 作业需求:点击列表中的哪一项,那么该选项的文字变成红色 -->
<div id="app">
<ul>
<li v-for="(m,index) in movies">
<a :class="{change:currentIndex === index}" href="#"
v-on:click="press(index)">
{{index}}-{{m}}
</a>
</li>
</ul>
</div>
</body>
<script>
let app = new Vue({
el:'#app',
data:{
movies:['海王','海尔兄弟','火影忍者','进击的巨人'],
change:'change',
currentIndex:0,
},
methods: {
press:function(index){
this.currentIndex = index;
},
}
})
</script>
</html>