计算属性
在模板中需要显示一些data的数据,但是有时需要对数据进行转化再显示,或者需要多个数据结合进行显示,可以使用计算属性computed,计算属性是一个对象,对象中每个数据为一个函数,通过return返回数据,而再html中表示时不需要加括号,用函数名就能表示
例如:需要将firstName和lastName连接并且中间空格隔开
<div id="app">
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
firstName:'Lebron',
lastName:'James',
},
computed:{
fullName() {
return this.firstName+" "+this.lastName;
}
}
})
</script>
例如:显示书的总价格
<div id="app">
<h2>书的总价格:{{allPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
books:[{id:110,name:'代码大全',price:119},
{id:110,name:'深入计算机原理',price:119},
{id:110,name:'操作系统',price:119}
]
},
computed:{
allPrice () {
let result=0;
for(let i = 0;i<this.books.length;i++){
result+=this.books[i].price;
}
return result;
}
}
})
</script>
计算属性一般是只读属性,一般没有set属性,全部表示为
fullName:{
set:function(newValue){
console.log("调用了set方法"+newValue)
},
get:function () {
return this.firstName+" "+this.lastName;
}
}
计算属性或者methods都可以实现功能,但是计算属性具有缓存功能,如果使用多次,他只会调用一次,但是methods中的方法会调用多次
事件监听
前端开发中,经常进行交互,比如:点击,拖拽,键盘事件等等,在vue中我们通过v-on来实现,v-on的语法糖是@,v-on通过方法实现,方法定义在methods中,methods为一个对象,内部都是函数,例如监听点击:@click=“method”,后面写函数名,有参数需要加括号
例如:通过按钮来进行加减
<body>
<div id="app">
<h2>{{message}}</h2>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:0
},
methods:{
increment(){
this.message++;
},
decrement(){
this.message--;
}
}
})
</script>
</body>
方法的参数问题
1,如果方法没有参数,可以直接@click="btn1click()"或者不需要后面的括号 @click="btn2click"都正确
2,如果方法有参数 btn3click(abc)
2.1,如果@click后方法不写括号,直接报错,例如@click=“btn3click”
2.2,如果@click后方法写括号,不写参数,不会报错,会自动返回浏览器默认产生的event对象
3,如果方法的参数中包含event对象btn5click(abc,event)
正确的调用方法:@click=“btn5click(123,$event)”,或者@click="btn5click(123)实现效果相同4
总结:
如果函数需要参数,但是没有传,形参为undefined
如果省略括号,这时候vue会默认将浏览器生产的event对象传递到函数
v-on修饰符
<body>
<div id="app">
//.stop修饰符的使用
<div @click="divClick">
<button @click.stop="btnClick">按钮1</button>
</div>
//.prevent修饰符的使用,阻止默认行为
<form action="baidu">
<input type="submit" value="提交" @click="submitClick()">
</form>
//监听某个键盘的键帽,下面表示监听回车
<input type="text" @keyup.enter="keyUp()"><br>
//.once修饰符的使用,第一次点有反应,之后点击没有反应
<button @click.once="btn2Click()">按钮2</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"你好"
},
methods:{
btnClick(){
console.log('btnClick');
},
divClick(){
console.log('divClick');
},
submitClick(){
console.log('submitClick');
},
keyUp(){
console.log('keyUp');
},
btn2Click(){
console.log('btn2Click');
},
}
})
</script>
</body>
js高阶函数
for循环等价性
let totalPrice=0;
for(let i=0;i<this.books.length;i++){
totalPrice+=this.books[i].price*this.books[i].count;
}
等价于:
let totalPrice=0;
for(let i in this.books){
totalPrice+=this.books[i].price*this.books[i].count;
}
等价于
let totalPrice=0;
for(let book of this.books){
totalPrice+=book.price*book.count;
}
例如:nums=[10,20,110,140,234,400]
filter
当回调函数返回true时加入新的数组中,返回false时会自动去掉
let num1=nums.filter(function(n){//会回调6次
return n<100
})
//表示返回小于100的数加到num1数组中
map
let num2 = num1.map(function(n){
return n*2
})
//表示num1数组中的每一个数乘以2
reduce
对数组中所有内容进行汇总
//函数包含两个参数
let num3 = num2.reduce(function(preValue,n){
//preValue表示上一个返回值
return preValue+n
},0)
//0表示初始化值
高阶函数简写
参数=>返回值
例如:
let num1=nums.filter(n => n<100) ;
let num2 = num1.map(n => n*2);
let num3 = num2.reduce((preValue,n) => preValue+n ,0);
//整合如下:
let num3 = nums.filter(n => n<100).map(n => n*2).reduce((preValue,n) => preValue+n ,0);