属性计算
计算属性:
1.定义:要用的属性不存在,要通过已有属性计算得来。2.原理:底层借助了objcet.defineproperty方法提供的getter和setter.
3.get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
5.备注:
1.计算属性最终会出现在vm上,直接读取使用即可。
2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变
<div id="root">
{{fullName}}
</div>
<script>
new vue=({
el:"root",
data:{
fristName:"张",
lastName:"三"
},
computed:{
fullName:{
get(){
return this.fristName+"-"+this.lastName
},
set(value){
const arr=value.split("-")
this.fristName=arr[0]
this.lastName=arr[1]
}
}
}
})
</script>
//简写,简写的话只能读取
<script>
new vue=({
el:"root",
data:{
fristName:"张",
lastName:"三"
},
computed:{
fullName(){
return this.fristName+"-"+this.lastName
}
}
})
</script>
天气案例
<div id="root">
<h2>今天天气为{{info}}</h2>
<button @click="weatherChange">改变天气</button>
</div>
<script>
new vue=({
el:"#root",
data:{
isHot:true
},
computed:{
info(){
return this.isHot?"晴天":"阴天"
}
},
methods:{
weatherChange(){
this.isHot=!this.isHot
}
}
})
</script>
监视属性
监视属性watch:
1.当被监视的属性变化时,回调函数自动调用,进行相关操作2.监视的属性必须存在,才能进行监视!!
3.监视的两种写法:
(1).new Vue时传入watch配置(2).通过vm.$watch监视
<div id="root">
<h2>今天天气为{{info}}</h2>
<button @click="weatherChange">改变天气</button>
</div>
<script>
const vm=new vue=({
el:"#root",
data:{
isHot:true
},
computed:{
info(){
return this.isHot?"晴天":"阴天"
}
},
methods:{
weatherChange(){
this.isHot=!this.isHot
}
},
//方法一
watch:{
isHot:{
immediate:true, //初始化调用一次
handler(newValue,oldValue){
console.log("isHot已被修改")
}
}
}
})
vm.$watch("isHot",{
immediate:true, //初始化调用一次
handler(newValue,oldValue){
console.log("isHot已被修改")
}
})
</script>
深度监视
(1).vue中的watch默认不监测对象内部值的改变(一层)。(2).配置deep:true可以监测对象内部值改变(多层)。
备注:
(1).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!(2).使用watch时根据数据的具体结构,决定是否采用深度监视。
<script>
const vm=new vue=({
el:"#root",
data:{
number:{
a:10,
b:5
}
},
watch:{
number(){
deep:true,
handler(new,old){
console.log("number改变了")
}
}
}
})
</script>
监视属性简写
<script>
const vm=new vue=({
el:"#root",
data:{
isHot:true
},
//方法一
watch:{
isHot(newValue,oldValue){
console.log("isHot已被修改")
}
}
})
//方法二
vm.$watch("isHot",function(newValue,oldValue){
console.log("isHot已被修改")
})
</script>
对比
computed和watch之间的区别:
1.computed能完成的功能,watch都可以完成。2.watch能完成的功能·computed不一定能完成.例如: watch可以进行异步操作。
两个重要的小原则:
1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象。
2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等),
最好写成箭头函数,这样this的指向才是vm或组件实例对象。
绑定class
<div id="root">
<!--字符串写法,适用于:样式类名不确定,需要动态指定-->
<button :class="mood">{{name}}</button>
<!--数组写法,适用于:样式数量不确定,类名也不确定-->
<button :class="classArr">{{name}}</button>
<!--对象写法,适用于:样式数量确定,类名也确定,但要确定动态启用-->
<button :class="ato1:true ato2:true">{{name}}</button>
</div>
<script>
const vm=new vue=({
el:"#root",
data:{
mood:"moods",
classArr:["ato1","ato2","ato3"],
}
})
</script>
<stye>
.moods{}
.ato1{}
.ato2{}
.ato3{}
</stye>
绑定style
<div id="root">
<!--数组写法-->
<button :style="styleArr">{{name}}</button>
<!--对象写法-->
<button :style="styleObjet">{{name}}</button>
</div>
<script>
const vm=new vue=({
el:"#root",
data:{
styleArr:[
{fontSize:"40px"},
{color:"red"}
],
styleObjet:{fontSize:"40px"}
}
})
</script>
总结
绑定样式:
1. class样式
写法:class="xxx"xxX可以是字符串、对象、数组。
字符串写法适用于:类名不确定,要动态获取。
对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。
数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。
2. style样式
:style=""[fontsize: xxx]"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。
条件渲染
条件渲染:
1.v-if
写法:
(1).v-if="表达式”
(2).v-else-if="表达式"
(3).v-else="表达式”
适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意: v-1f可以和:v-else-if、 v-else起使用, 但要求结构不能被“打断”。
2 ,v- show
写法: v-show=" 表达式"
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
3.备注:使用v-if的时,元素可能无法获取到,面使用v-show定可以获取到。
<div id="root">
<h3>当前n为:{{n}}</h3>
<button @click="n++">点我n++</button>
<!--使用v-show做条件渲染-->
<h3 v-show="n==0">n==0</h3>
<h3 v-show="n==1">n==1</h3>
<!--使用v-if做条件渲染-->
<h3 v-if="n==0">n==0</h3>
<h3 v-else-if="n==1">n==1</h3>
<h3 v-else-if="n==2">n==2</h3>
<h3 v-else>n>2</h3>
</div>
<script>
const vm=new vue=({
el:"#root",
data:{
n:0
}
})
</script>
列表渲染
v-for指令:
1.用于展示列表数据
2.语法: v-for="(item, index) in xxx" :key="yyy"
3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)
<html>
<head>
<title>TODO supply a title</title>
<meta charset="GBK">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<!--数组遍历-->
<li><h2>人员列表<h2></li>
<li v-for="(value, index) in person" :key="index">
{{ index }}: {{ value }}
</li>
<!--对象遍历-->
<li><h2>汽车信息<h2></li>
<li v-for="(value, key ,index) in car" :key="key">
{{ index }}:{{key}} : {{ value }}
</li>
<!--字符串遍历-->
<li><h2>字符串遍历<h2></li>
<li v-for="(char,index ) in str">
{{index+1}}:{{char}}
</li>
<!--遍历指定次数-->
<li><h2>遍历指定次数<h2></li>
<li v-for="(a,index ) in 3">
{{index}}:{{a}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
person:["小王","小李","小米"],
car:{
name: "cidielc",
age: 12,
price: 190000
},
str: "abc"
}
})
</script>
</body>
</html>