1.计算属性
所有的计算属性都以函数的形式写在vue实例的computed选项内,最终返回计算后的结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>总价:{{prices}}</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
package1:[
{
name:'huawei p30',
price:3499,
count:2
},
{
name:'OPPO reno2',
price:4599,
count:4
}
],
package2:[
{
name:'apple',
price:3,
count:5
},
{
name:'banana',
price:2,
count:10
}
]
},
computed:{
prices(){
var prices = 0
for(var i=0;i<this.package1.length;i++){
prices += this.package1[i].price*this.package1[i].count
}
for(var i=0;i<this.package2.length;i++){
prices += this.package2[i].price*this.package2[i].count
}
return prices
}
}
})
</script>
</body>
</html>
每个计算属性都有一个getter和setter;计算属性不仅依赖当前实例的数据,还依赖其他实例的数据
计算属性缓存:
计算属性是基于它的依赖缓存的,一个计算属性所依赖的数据发生变化时,才会重新取值;但methods不一样,只要重新渲染,就会被调用,函数也会被执行
2.v-bind及class和style的绑定
v-bind:动态更新HTML元素上的属性。元素的样式名称class和内联样式style也是HTML的属性,也可以用v-bind指令。
绑定class的几种方式:
(1)对象语法
<div :class="{'active':idActive}"></div>
类名active依赖于数据isActive,当其为true时,div会拥有类名active,否则没有。
对象中也可以传入多个属性,动态切换class;:class可以和普通class共存:
<div :class="{'active':idActive,'error':isError}" class="action"></div>
(2)数组语法
当需要应用多个class时,可使用数组语法
<div :class="[activeCls,errorCls]"></div>
data:{
activeCls:'active',
errorCls:'error'
}
(3)在组件上使用
如果直接在自定义组件上使用class或:class,样式规则会直接应用到这个组件的根元素上:
声明一个组件:
Vue.component('my-component',{
template:'<p class="article">一些文本</p>'
})
在调用这个组件时,应用对象语法给组件绑定class:
<my-component :class="{'active':isActive}"></my-component>
data:{ isActive:true }
最后渲染的结果为:
<p class="article active">一些文本</p>
这种用法仅适用于自定义组件的最外层是一个根元素,否则会无效。
绑定内联样式:
使用:style给元素绑定内联样式,也有对象语法和数组语法
<div :style="{'color':color,'fontSize':fontSize + 'px'}">文本</div>
data:{
color:'red',
fontSize:14
}
但一般不直接将样式全放在元素上,会写在data里:
<div :style="styles">文本</div>
data:{
styles:{
color:'red',
fontSize:14 + 'px'
}
}
3.内置指令
(1)v-cloak
解决初始化慢导致页面闪动问题,和display:none配合使用;
当网速较慢,vue.js文件还没加载完时,页面会显示{{message}}字样,直到vue创建实例编译模板时,DOM才会被替换,
这个过程屏幕有闪动,加一句css就可以解决问题:
[v-cloak]{
display:none
}
(2)v-once
定义它的元素或组件只渲染一次,包括元素或组件的所有子节点
首次渲染后,不再随数据的变化重新渲染,将被视为静态内容
(3)条件渲染指令
v-if v-else-if v-else
(4)v-show
v-if 与 v-show 的区别:
v-if是真正的条件渲染,会根据表达式适当的销毁或重建元素及绑定的事件或子组件,只有在条件第一次变为真时才开始编译;
v-show是简单的css属性切换,无论条件真与否,都会被编译。
v-if适用于条件不经常改变的场景,v-show适用于频繁切换条件
(5)列表渲染指令v-for
<div id="app">
<ul>
<li v-for="book in books">{{book.name}}</li>
</ul>
</div>
也可以用v-for=“book of books” ; 也可以加索引: v-for= “(book,index)in books ”
v-if 和 v-for 都可以用在内置标签<template></template>上
数组和对象都可以使用v-for 进行遍历; 遍历对象时有两个可选参数:key index
v-for还可以迭代整数:
<span v-for="n in 10">{{n}}</span>
数组更新:
vue的核心是数据与视图的双向绑定;
数组方法:
会改变原数组: push( ) 、pop()、shift()、unshift()、splice()、sort()、reverse()
不会改变原数组:filter()、concat()、slice()
过滤与排序:
当不想改变原数组,只是通过数组的副本做过滤或排序的显示时,可以使用计算属性来返回过滤或排序后的数组:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<template v-for="book in filterBooks">
<li>书名:{{book.name}}</li>
<li>作者:{{book.author}}</li>
</template>
</ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
books:[
{
name:'《vue.js实战》',
author:'梁灏'
},
{
name:'《JavaScript语言精粹》',
author:'DC'
},
{
name:'《JavaScript高级程序设计》',
author:'NC'
}
]
},
computed:{
filterBooks(){
return this.books.filter((book) => {
return book.name.match(/JavaScript/)
})
}
}
})
</script>
</body>
</html>
上边代码是将书名中包含JavaScript关键词的数据过滤出来,计算属性filterBooks依赖books,但不会修改books
实现排序也类似:
computed:{
sortBooks(){
return this.books.sort((a,b) => {
return a.name.length<b.name.length
})
}
}
4.方法与事件
v-on 事件处理
<button @click="counter ++">+1</button>
<button @click="handleAdd()">+1</button>
<button @click="handleAdd(10)">+10</button>
对于handleAdd()方法传参:
handleAdd(count){
count = count || 1
this.counter += count
}
vue提供一个特殊的变量$event,用于访问原生DOM事件:
<a href="http://www.apple.com" @click="handleClick('禁止打开',$event)">打开链接</a>
handleClick(message,event){
event.preventDefault()
window.alert(message)
}
修饰符:
event.preventDefault( ) 也可以用vue修饰符实现,在@绑定的事件后加小圆点“.” ,跟后缀使用修饰符
(1).stop @click.stop="handle" 阻止单击事件冒泡
(2).prevent @submit.prevent="handle" 提交事件不再重载页面
(3).capture @click.capture="handle" 添加事件侦听器时使用事件捕获模式
(4).self @click.self="handle" 只当事件在该元素本身(而不是子元素)触发时触发回调
(5).once @click.once="handle" 只触发一次