- 计算属性的基本使用
对data中变量进行加工、组合、处理
计算属性不必在末位加括号( )
<div id="app">
<!-- 没有使用计算属性写法 -->
<h2>{{firstName+' '+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<!-- 使用计算属性写法 -->
<h2>{{fullName}}</h2>
</div>
<script type="text/javascript">
const app=new Vue({
el:'#app',
data:{
firstName:'ni',
lastName:'hao'
},
// 属性命名用名词
computed:{
fullName:function(){
return this.firstName + ' ' + this.lastName
}
},
//方法命名前边用动词
methods:{
getFullName:function(){
return this.firstName + ' ' + this.lastName
}
}
})
</script>
- 计算属性的复杂使用
<div id="app">
<h2>总价格 {{totalPrice}}</h2>
</div>
<script type="text/javascript">
const app=new Vue({
el:'#app',
data:{
books:[
{id:0,name:'a',price:20},
{id:1,name:'b',price:30},
{id:2,name:'c',price:40}
]
},
computed:{
totalPrice:function(){
let total=0
this.books.forEach((v,i)=>{
total+=v.price
})
return total
}
}
})
</script>
- 遍历数组的几种方法
- forEach
按升序为每个元素执行一次提供的函数
除抛出异常,无法中止循环
格式:array.forEach(回调函数(当前元素(必填)、元素索引(可选)、数组(可选))=>{函数体})
2.for循环
for(索引变量 in 数组){数组[索引变量]}
for(当前元素 of 数组){当前元素}
3.reduce
为每个元素执行一次提供的回调函数。
array.reduc((累加器(必填),元素(必填),索引(可选),元素所属的数组(可选))=>{return 累加器+元素},累加器初始值(可选))
4.filter
为每个元素执行一次提供的回调函数,回调函数根据返回逻辑值,确定元素是否加入返回数组
函数执行完成返回数组
array.fitler(元素值=>{return 元素值>100})
5.map
对数组每个元素进行处理,处理的结果加入返回数组。
array.map(n=>{return n*2})
- 计算属性的setter和getter
每个计算属性都包含1个setter(不常用)和1个getter
计算属性本质上就是1个属性,函数形式只是计算属性的简写形式
//计算属性的简写形式
computed:{
fullName:function(){
return this.firstName + ' ' + this.lastName
}
}
计算属性完整的写法
computed:{
fullName:{
get:function(){
return this.firstName + ' ' + this.lastName
},
//计算属性一般没有set方法,可省略
set:function(e){
//e为自定义变量名
const names=e.split(' ')
this.firstName=names[0]
this.lastName=names[1]
}
}
}
- 计算属性的缓存
计算属性具有缓存机制,效率更高,如果多次使用只会调用一次。
-
let及var引起的JS闭包
相当于定义了一个函数(JS中函数有块作用域),并立即调用执行
(function(i){
console.log((i))
})('123456789')
- const的使用
优先使用const,cosnt 定义常量时必须赋值。常量的含义是指向的对象不能修改,但可以修改对象内部的属性。
-
对象字面量的增强写法
属性的增强写法
let name='王五'
stu:{
name, //等于同name:name
age:23,
class:'一班'
}
函数的增强写法
//ES5老写法
abc:function(){
},
//ES6增强写法
abc(){
}
watch观察数据变化
- watch的精简写法
//watch的精简写法
watch:{
firstName(newValue){
this.fullName=newValue+'-'+this.lastName
}
}
- watch的完整写法
watch:{
firstName:{
immediate:true,
handler(newValue,oldValue){
this.fullName=newValue+'-'+this.lastName
}
}
}
完整写法是写成对象的形式,immediate:true的意思是在初始化时就会调用一次。handler中的形参第1个是新值,第2个是旧值。
配置watch的两种方法:1.new Vue时传入配置;2.vm.$watch('要监视的data属性名称',{immediate:true,handler(newValue,oldValue){this.fullName=newValue+'-'+this.lastName}} 第一个参数必须为字符串。
计算属性与watch区别:watch可以执行异步操作