1、声明式渲染

1.1、单文件组件

Vue 单文件组件 (Single-File Component，缩写为 SFC)。
将从属于同一个组件的 HTML、CSS 和 JavaScript 封装在使用 .vue 后缀的文件中。

1.2、响应式对象

reactive() API 来声明响应式状态。
将初始对象作为参数传入
由 reactive() 创建的对象都是 JavaScript Proxy，其行为与普通对象一样：

import { reactive } from 'vue'

const counter = reactive({
  count: 0
})

console.log(counter.count) // 0
counter.count++

ref可以包装任何类型的值，参数是初始值
返回一个对象，有value属性

import { ref } from 'vue'
const message = ref('Hello World!')
console.log(message.value) // "Hello World!"
message.value = 'Changed'

把数据包装成响应式数据之后，修改数据，页面会同步展示

<script setup>
import { ref } from 'vue'
let message = ref('make me dynamic')
message = '556'
// 组件逻辑
// 此处声明一些响应式状态
</script>

<template>
  <h1>{{message}}</h1>
</template>

2、属性绑定

语法：:属性名 = “对象名”

<div :id="dynamicId"></div>

2.1 class绑定语法

不要忘记：和“”

值为对象：键名为类名，键值为是否显示类名

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

数组语法-每一个数组名就是一个类 <div v-bind:class="[activeClass, errorClass]"></div>

3、事件监听

语法-@click = “事件处理函数名”注意别加括号

4、表单绑定

将input的value值和text值绑定，不用手写oninput函数。

<input v-model="text">

5、if else

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

6、列表渲染

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

v-for="todo in todos"

应用实例-添加列表项-删除列表项

<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() {
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <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里面定义变量和函数，在template里面定义视图模版
<input id = 'todo.id' type = "checkbox" v-model="todo.done" name = "course">{{todo.text}}

computed计算属性

些数据是根据现有的响应式数据计算得出时，就可以使用计算属性（computed properties）。
计算属性会基于它们依赖的响应式数据进行计算，并且会缓存计算结果。
只有在响应式数据变化时才会重新计算。
参数是箭头函数，返回新的值

const completedTodos = computed(() => { return todos.value.filter(todo => todo.done) })

watch侦听器

watch(todoId,()=>{
  todoData.value.id = todoId
})

有两个参数，第一个参数是被侦听的响应式数据
第二个参数是回调函数，处理副作用
一旦被侦听的数据改变，就会执行回调函数

props

父组件给子组件传递动态参数，要用:v-bind语法

  <ChildComp :msg = "greeting" />
  //如果不用:语法会显示greeting

子组件引入props
vue3提出的defineprops可以在编译时优化

const props = defineProps({ title: String, count: { type: Number, default: 0 } })

@input="$emit('update:modelValue', $event.target.value)"解析

@input：这是 Vue 中用于监听输入事件的一种缩写语法。它等价于 v-on:input，表示监听 <input> 元素的输入事件。
$emit('update:modelValue', $event.target.value)：这是在输入事件触发时执行的表达式。
$emit 是 Vue 实例的方法，用于触发自定义事件。在这里
它触发了一个名为 update:modelValue 的自定义事件，并传递了一个参数 $event.target.value
其中 $event 是事件对象，$event.target.value 表示输入框当前的值。

总的来说，这段代码的作用是：当 <input> 元素的值发生变化时，触发一个名为 update:modelValue 的自定义事件，并将输入框的当前值作为参数传递给父组件。这种模式通常用于实现 Vue 中的双向绑定。

插槽

除了通过 props 传递数据外，父组件还可以通过插槽 (slots) 将模板片段传递给子组件：

<ChildComp>
  This is some slot content!
</ChildComp>

传入的值会在子组件的slot处展示

<template>
<slot></slot>
</template>

Vue基础教程