计算属性
计算属性也是用来存储属性数据,但是具有以下特点
- 可以对数据进行逻辑处理操作,实现数据包装
- 计算属性通常依赖于当前vue对象中的普通属性
- 当依赖的普通属性发生变化时计算属性也会发生变化,实时数据监控
计算属性由两部分组成:
- get 用来获取计算属性
- set用来设置计算属性
</body>
<script>
Vue.createApp({
data(){
return {
// 普通属性
msg:"welcome to",
num:4
}
},
// 计算属性依赖于普通属性,对普通属性进行逻辑处理 该函数有返回值,用来获取属性成为get函数
computed:{
reverseMsg:function(){
return this.msg.toUpperCase().split(' ').reverse().join(' ')
},
doubleNum:{
get:function(){
return this.num*2
},
set:function(value){
{{value}}
this.num = value //doubleNum 依赖于num 所以要给num赋值
}
}
},
methods:{
}
}).mount('#app')
</script>
监视器
监视器(watch)是用来监视数据的变化,对数据进行监控
定义监视器的两种方式:
- 在vue实例内部通过watch选项
- 通过vue实例的$watch()方法
<body>
<div id="app">
<input type="text" v-model="name">
<hr>
<p>{{user.password}}</p>
<input type="text" v-model="user.password">
</div>
</body>
<script>
Vue.createApp({
data(){
return {
name:'tom',//基本数据类型
user:{ //引用数据类型
id:1001,
username:'admin',
password:'123'
}
}
},
watch:{
name:function(newValue,oldValue){
console.log(`name被修改,原值:${oldValue},新值:${newValue}`)
},
user(newValue){
console.log('user被修改',newValue)
}
},
methods:{
}
}).mount('#app')
</script>
实例属性
通过vue实例对象可以直接访问的属性,成为实例属性
实例属性都以$开头
- vm.$el:当前Vue实例使用的根DOM元素
- vm.$data:当前vue实例观察的数据对象
- vm.$options:当前实例的初始化选项
- vm.$refs:当前vue实例容器中定义了ref属性的所有DOM元素
<body>
<div id="app">
<p>{{msg}}
<span>{{info}}</span>
</p>
</div>
</body>
<script>
vm = Vue.createApp({
data(){
return {
msg:'welcome',
info:'hello'
}
},
methods:{
}
}).mount('#app')
console.log(vm.$el)
</script>
<body>
<div id="app">
<p>{{msg}}
<span>{{info}}</span>
</p>
</div>
</body>
<script>
vm = Vue.createApp({
data(){
return {
msg:'welcome',
info:'hello'
}
},
methods:{
}
}).mount('#app')
console.log(vm.$data)
</script>
<body>
<div id="app">
<p>{{msg}}
<span ref="'aaa">{{info}}</span>
<span ref="'bbb">{{info}}</span>
</p>
</div>
</body>
<script>
vm = Vue.createApp({
data(){
return {
msg:'welcome',
info:'hello'
}
},
methods:{
}
}).mount('#app')
console.log(vm.$refs)
</script>
实例方法
通过Vue实例对象可以直接访问的方法,称为实例方法
实例方法都是以$开头
- vm.$watch:监视数据的变化,对数据进行监控
- vm.$nextTick:在DOM更新完成后再执行回调函数,一般在修改数据之后使用该方法,以便获取更行后的DOM并操作
模板
模板就是定义Vue时指定的页面结构构成
默认使用mount(‘选择器’)指定的挂载元素的内容来构成页面模板
可以使用template选项独立定义页面模板,此时挂载元素的内容将被忽略
生命周期
vue实例从创建到销毁的过程,成为生命周期,共有八个阶段:
- beforeCreate、created
- beforeMount、mounted
- beforeUpdate、updated
- beforeUnmount、unmounted
在生命周期的每个阶段头提供了相应的钩子函数,可以在狗子函数中执行操作,操作生命周期的各个阶段
<body>
<div id="app">
<p>{{msg}}</p>
</div>
</body>
<script>
vm = Vue.createApp({
data(){
return {
msg:'welcome',
info:'hello'
}
},
beforeCreate(){
console.log('beforeCreate---实例刚刚创建,初始化环境事件和生命周期钩子函数')
console.log(this.$el)
console.log(this.$data)
},
created(){
console.log('created---实例已经完成初始化(完成数据的监测和注入)')
console.log(this.$el)
console.log(this.$data)
},
beforeMount(){
console.log('beforeMount---挂载之前,此时模板已经编译,但是没有关联到页面上')
console.log(this.$el)
console.log(this.$data)
},
mounted(){
console.log('mounted---挂载完成,已经关联到页面上')
console.log(this.$el)
console.log(this.$data)
},
beforeUpdate(){
console.log('beforeUpdate---Dom更新之前执行')
console.log(this.$el)
console.log(this.$data)
},
updated(){
console.log('beforeUpdate---Dom更新完成')
},
}).mount('#app')
</script>