08.vue.js实战笔记（计算属性、v-bind及class和style的绑定、内置指令、方法与事件）
1.计算属性所有的计算属性都以函数的形式写在vue实例的computed选项内，最终返回计算后的结果<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-wid...
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" 只触发一次
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献3条内容
所有评论(0)