一、计算属性 : computed
vue方便我们对数据进行计算或者处理 提供了计算属性
作用：
- 响应式计算数据
基本使用
<body>
<div id="app">
<!-- 通过函数名返回计算后的值 -->
{{value}}
</div>
<script>
// 实例化
let app = new Vue({
el: '#app',
data: {
},
computed: {
value () {
// 通过return将 计算的结果返回
return 1 + 2
}
}
})
</script>
</body>
二、侦听器
watch 侦听器允许开发者监听数据的变化，从而对数据的变化做特定的操作
- 对象格式
- 普通用法
watch:{
Datavalue:{ // 侦听对象
// 函数handler有两个默认形参 分别代表 更新后和更新前的值
handler(i,x){
console.log(`更新后的值：${i},更新前的值: ${x}`);
console.log('侦听到事情后 一般我们会做一些事情 就可以在侦听器内 来写
逻辑代码');
},
}
}
- 深度监听 (deep)
一般用于监听对象， 可以深度监听到对象中的值 默认为关闭 false
打开将 deep设置为 true
Datavalue:{ // 侦听对象
handler(i){ // 深度监听值只有更新后的值
console.log(`深度侦听器侦听到的值 为 : ${i.money}`);
},
// 开启侦听器 控制侦听器深度监听到对象中每一个属性的变化
deep:true
}
}
- 自动触发 immediate
// 可以控制侦听器打开页面自动触发一次 ,默认为false
immediate: true
总结 ：
- 对象格式
- 对象中的数据可以监听
可以设置 deep:true 开启深度监听
- 首次进入浏览器的时候，可以触发一次侦听器
可以设置 immediate: true
- 对象中的数据可以监听
三、ref 获取 dom
在 vue 中可以通过 ref 来操作 dom
<body>
<div id="app">
<!--通过ref来获取这个dom 取名叫domref -->
<div ref="domref">我是被操控的dom</div>
<button @click="getdom">点击, 通过操控dom的方式 来使div变成红色</button>
</div>
<script>
// 实例化
let app = new Vue({
el: '#app',
data: {
},
methods: {
getdom () {
// this.$refs.domref 找到dom domref 然后通过style.color 设置颜色
this.$refs.domref.style.color = 'red'
}
}
})
</script>
</body>
- ref 是 vue 里的方法，更加安全
- vue 的主要目的是减少 dom 的操作。减少 dom 节点的消耗
