Vue3学习笔记

仅用于本人个人学习记录

v- 开头都是vue 的指令

v-text 用来显示文本

v-html 用来展示富文本

v-if 用来控制元素的显示隐藏（切换真假DOM）

v-else-if    v-else 

v-show 用来控制元素的显示隐藏（display none block Css切换）

v-on 简写@ 用来给元素添加事件

v-bind 简写:  用来绑定元素的属性Attr

简写动态绑定

<template>
 <div :class="['hello']" >
  hello word
 </div>
 <div :style="style">
  你好！
 </div>
</template>

<script setup lang="ts">
const style =  {
 color:'red'
}
</script>

<style lang="scss">
.hello {
  color: yellow;
}
</style>

v-model 双向绑定

<template>
<input type="text" v-model="a">
<div>{{ a }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const a = ref('hello word')

</script>

<style lang="scss">

</style>

v-for 用来遍历元素

<li v-for="item in items">
  {{ item.message }}
</li>

v-once 性能优化只渲染一次

v-memo 性能优化会有缓存具体请看我的掘金
 

阻止冒泡

@click.stop

<template>
 <div class="hello" @click="parent">
  <el-button type="warning" @click.stop="children">hello</el-button>
 </div>
</template>

<script setup lang="ts">
const parent = () => {
  console.log('我是父级')
}
const children = () => {
  console.log('我是子级')
}
</script>

ref 和 reactive 都是响应式

watch 监听

const x = ref(0)
const y = ref(0)

// 单个 ref
watch(x, (newX) => {
  console.log(`x is ${newX}`)
})

// getter 函数
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`)
  }
)

// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})

watch(
  () => obj.count,
  (count) => {
    console.log(`count is: ${count}`)
  }
)

watch(
  () => state.someObject,
  (newValue, oldValue) => {
    // 注意：`newValue` 此处和 `oldValue` 是相等的
    // *除非* state.someObject 被整个替换了
  },
  { deep: true }
)

watch(source, (newValue, oldValue) => {
  // 立即执行，且当 `source` 改变时再次执行
}, { immediate: true })