Vue3-组合式(精简版)

# 声明式渲染

能够实现动态更变变量实时同步

API :

reactive() 用于数组以及内置类型
ref() 接收任意类型

以上两者使用方式一样

代码示例 :

<template>
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.count }}</p>
</template>

<script setup>
import { reactive, ref } from 'vue'

const counter = reactive({ count: 0 })
const message = ref('Hello World!')
</script>

# Attribute绑定

官方文档 : 点击跳转 (opens new window)

实现文本插值功能 , 将变量值插值写入到组件参数中

原始写法 : v-bind指令

简写 : : (冒号代替)

代码示例 : 为h1标签追加样式

<template>
  <!-- 原始写法 -->
  <h1 v-bind:class="titleClass">Make me red1</h1>
  <!-- 简写 -->
  <h1 :class="titleClass">Make me red2</h1>
</template>

<script setup>
import { ref } from 'vue'

const titleClass = ref('title')
</script>

<style>
.title {
  color: red;
}
</style>

# 事件监听

官方文档 : 点击跳转 (opens new window)

原始写法 : v-on指令

简写 : @

代码示例 :

<template>
  <button v-on:click="increment">count is1: {{ count }}</button>
  <br>
  <button @click="increment">count is2: {{ count }}</button>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

# 表单绑定

官方文档 : 点击跳转 (opens new window)

双向绑定

原始写法 :

<template>
  <input :value="text" @input="onInput">
  <p>{{ text }}</p>
</template>

<script setup>
import { ref } from 'vue'

const text = ref('')

function onInput(e) {
  text.value = e.target.value
}
</script>

简写 : v-model指令

<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>

<script setup>
import { ref } from 'vue'

const text = ref('')
</script>

# 条件渲染

官方文档 : 点击跳转 (opens new window)

写法 : v-if指令 & v-else指令

代码示例 :

<template>
  <button @click="awesome = !awesome">toggle</button>
  <h1 v-if="awesome">状态1 : {{awesome}}</h1>
  <h1 v-else>状态2 : {{awesome}}</h1>
</template>

<script setup>
import { ref } from 'vue'

const awesome = ref(true)
</script>

# 列表渲染

官方文档 : 点击跳转 (opens new window)

重复渲染标签

原始写法 : v-for指令

代码示例 :

<template>
  <!-- 确保提交事件将不再重新加载页面 -->
  <!-- https://cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers -->
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'

// 给每个 todo 对象一个唯一的 id
let id = 0

const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])

function addTodo() {
  // push追加
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}

function removeTodo(todo) {
  // 过滤排除覆盖
  todos.value = todos.value.filter(t => t !== todo)
}
</script>

# 计算属性

官方文档 : 点击跳转 (opens new window)

API : computed() 动态计算数据结果进行响应

代码示例 :

<template>
  <p>当前时间: {{ formattedDateTime }}</p>
</template>

<script setup>
import { ref, computed } from 'vue';

const currentDate = ref(new Date());

const formattedDateTime = computed(() => {
  return currentDate.value.toLocaleString('en-US');
});
// 动态变化
setInterval(() => {
  currentDate.value = new Date();
}, 1000);
</script>

# 生命周期

生命周期 : 点击跳转 (opens new window)

API :

onBeforeMount() 组件挂载前执行
onMounted() 组件挂载后执行
... (其他自行查阅API)

代码示例 : 挂载直接后内容直接别覆盖

<template>
  <p ref="pElementRef">hello</p>
</template>
<script setup>
import { ref, onMounted } from 'vue'

const pElementRef = ref(null)
onMounted(() => {
  pElementRef.value.textContent = '覆盖!'
})
</script>

# 侦听器

官方文档 : 点击跳转 (opens new window)

监听指定变量变化时触发的函数

API : watch() 监听变量

代码示例 :

<script setup>
import { ref, watch } from 'vue'

let currentDate = ref(new Date());
watch(currentDate, newVal => {
  console.log(`监听到新日期数据: ${newVal}`)
  currentDate.value = newVal
})
  
// 动态变化
setInterval(() => {
  currentDate.value = new Date();
}, 2000);
</script>

<template>
  <p>当前时间: {{ currentDate }}</p>
</template>

# Props

官方文档 : 点击跳转 (opens new window)

组件数据传递

API : defineProps()

代码示例 :

<!-- 父组件 -->
<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'
</script>

<template>
  <ChildComp msg="hello" />
</template>

<!-- 子组件 -->
<script setup>
const props = defineProps({
  msg: String
})
</script>

<template>
  <h2>{{ msg || '数据不能存在' }}</h2>
</template>

# 组件事件

官方文档 : 点击跳转 (opens new window)

API : defineEmits()

代码示例 :

<!-- 父组件 -->
<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const childMsg = ref('无数据')
</script>

<template>
  <ChildComp @response="(msg) => childMsg = msg" />
  <p>{{ childMsg }}</p>
</template>

<!-- 子组件 -->
<script setup>
const emit = defineEmits(['response'])

const onInput = e => {
  emit('response', e.target.value)
}
</script>

<template>
  <h2>Child component</h2>
  <input :value="text" @input="onInput">
</template>

# 插槽

官方文档 : 点击跳转 (opens new window)

子组件模板片段插入

标签 : <slot>

代码示例 :

<!-- 父组件 -->
<template>
  <ChildComp>Message: {{ msg }}</ChildComp>
</template>
<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const msg = ref('from parent')
</script>
<!-- 子组件 -->
<template>
  <h2>ChildComp</h2>
  <slot>Fallback content</slot>
</template>

#Vue

← Vue-状态管理