03计算&侦听

计算属性

在模版语法可以做简单的逻辑，但是复杂的逻辑不太适合。此时可以通过计算属性解决。

选项式

<template>
  <p>
    请输入您的年龄：<input type="number" v-model="age">
  </p>
  模版语法实现
  <p>
    是否成年：{{ age >= 18 ? '是' : '否' }}
  </p>
  计算属性实现
  <p>
    是否成年：{{ isDdult }}
  </p>
</template>
 
<script>
export default {
  data() {
    return {
     age: 0
    }
  },
  //计算属性computed
  computed: {
    isDdult(){
      return this.age >= 18 ? '是' : '否';
    }
  }
}
</script>

组合式

<template>
    <p>
      请输入您的年龄：<input type="number" v-model="age">
    </p>
    模版语法实现
    <p>
      是否成年：{{ age >= 18 ? '是' : '否' }}
    </p>
    计算属性实现
    <p>
      是否成年：{{ isDdult }}
    </p>
  </template>
  
  <script setup>
    import {ref,computed} from 'vue';
 
    let age = ref(0);
 
    let isDdult = computed(()=>{
        return age.value >= 18 ? '是' : '否';
    });
  </script>

类和样式绑定

:class和:style是v-bind的中的一种，只不过vue对这两个进行了功能增强

:class

选项式

<template>
  <!-- 绑定对象 -->
  <p :class="{ 'myStyle1': isActive1, 'myStyle2': isActive2 }">测试文本</p>
  <p :class="objStyle">测试文本</p>
  <!-- 数组绑定 -->
  <p :class="[arrStyle1,arrStyle2]">测试文本</p>
</template>
 
<script>
export default {
  data() {
    return {
      isActive1: true,
      isActive2: true,
      objStyle: {
        myStyle1: true,
        myStyle2: false
      },
      arrStyle1: 'myStyle1',
      arrStyle2: 'myStyle2'
 
    }
  }
}
</script>
 
<style>
.myStyle1 {
  color: red;
}
 
.myStyle2 {
  font-size: 30px;
}
</style>

组合式

<template>
  <!-- 绑定对象 -->
  <p :class="{ 'myStyle1': testStyle.isActive1, 'myStyle2': testStyle.isActive2 }">测试文本</p>
  <p :class="testStyle.objStyle">测试文本</p>
  <!-- 数组绑定 -->
  <p :class="[testStyle.arrStyle1,testStyle.arrStyle2]">测试文本</p>
</template>
 
<script setup>
import { reactive } from 'vue';
 
  let testStyle = reactive({
        isActive1: true,
        isActive2: true,
        objStyle: {
          myStyle1: true,
          myStyle2: false
        },
        arrStyle1: 'myStyle1',
        arrStyle2: 'myStyle2'
  })
</script>
 
<style scoped>
.myStyle1 {
  color: red;
}
 
.myStyle2 {
  font-size: 30px;
}
</style>

:style

选项式

<template>
  <p :style="myStyle">测试文本</p>
</template>
 
<script>
export default {
  data() {
    return {
      myStyle: {
        color: 'red',
        fontSize: '30px',
        backgroundColor: 'yellow'
      }
 
    }
  }
}
</script>

组合式

<template>
    <p :style="myStyle">测试文本</p>
</template>
 
<script setup>
    import { reactive } from 'vue';
 
    let myStyle = reactive({
        color: 'red',
        fontSize: '30px',
        backgroundColor: 'yellow'
    })
</script>

侦听属性

侦听属性watch：侦听data中的数据的变化，一旦数据发生变化watch中对应的函数就会被触发

选项式

<template>
  <input type="text" v-model="message">
  <h1>{{ message }}</h1>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'hello'
    }
  },
  watch:{
    // 函数的名称必须是被侦听的变量的名称
    //newValue：改变后的值
    //oldValue：改变前的值
    message(newValue,oldValue){
      console.log(newValue+":"+oldValue)
    }
  }
}
</script>

组合式

<template>
    <input type="text" v-model="message">
    <h1>{{ message }}</h1>
</template>
 
<script setup>
    import { ref, watch } from 'vue';
 
    let message = ref("");
 
    watch(message,(newValue,oldValue)=>{
        console.log(newValue+":"+oldValue)
    })
</script>

深层侦听(侦听对象)

选项式

<template>
  <input type="text" v-model="user.name">
  <h1>{{ user.name }}</h1>
</template>
 
<script>
export default {
  data() {
    return {
      user: {
        name: '张三'
      }
    }
  },
  watch:{
    user: {
      handler(newValue,oldValue){
        // 注意：在嵌套的变更中，
        // 只要没有替换对象本身，
        // 那么这里的 `newValue` 和 `oldValue` 相同
        console.log(newValue.name+":"+oldValue.name)
      },
      deep: true
    }
  }
}
</script>

组合式

<template>
	<input type="text" v-model="user.name">
	<h1>{{ user.name }}</h1>
</template>
 
<script setup>
	import { reactive,watch } from 'vue';
	let user = reactive({
		name: '张三'
	})
	
	watch(user,(newValue, oldValue)=>{
		// 在嵌套的属性变更时触发
		// 注意：`newValue` 此处和 `oldValue` 是相等的
		// 因为它们是同一个对象！
		console.log(newValue.name+":"+oldValue.name)
	})
</script>

模版引用

模版引用：像js那样操纵dom

vue不推荐直接操纵dom，但是如果项目中不得不用，vue提供了方式操纵dom。

步骤 1、在节点上加上ref属性 2、通过this.$refs.属性名 获取dom

js获取和ref和refs区别：\refs方式获取可以用vue特性，js方式不行

选项式

<template>
  <div ref="box" id="dd">{{ msg }}</div>
  <button type="button" @click="getDom">获取dom</button>
</template>
 
<script>
export default {
  data() {
    return {
      msg: "你好"
    }
  },
  methods:{
    getDom(){
      //this.$refs.box方法获取dom,之后就可以使用js的属性方法操作dom了
      console.log(this.$refs.box.innerHTML = '哈哈哈哈哈')
      // console.log(document.getElementById('dd').innerHTML = '哈哈哈哈哈')
    }
  }
}
</script>

组合式

<template>
	<div ref="box" id="dd">{{ msg }}</div>
	<button type="button" @click="getDom">获取dom</button>
</template>
 
<script setup>
	import { ref } from 'vue';
	
	let msg = ref('你好');
	
	// 声明一个 ref 来存放该元素的引用
	// 必须和模板里的 ref 同名
	let box = ref(null);
	
	function getDom(){
		let dom = box.value;
		console.log(dom)
		dom.innerHTML = '哈哈哈哈哈'
	}
</script>