查看“Temp”的源代码

# Vue
## 模板

    <template>
    <h1>Hello World!</h1>
    </template>

## 声明式渲染

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

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

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

## Attribute 绑定

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

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

    <template>
    <h1 :class="titleClass">Make me red</h1>
    </template>

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

## 事件监听

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

    const count = ref(0)

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

    <template>
    <button @click="increment">count is: {{ count }}</button>
    </template>

## 表单绑定

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

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

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

## 条件渲染

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

    const awesome = ref(true)

    function toggle() {
    awesome.value = !awesome.value
    }
    </script>

    <template>
    <button @click="toggle">toggle</button>
    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>
    </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() {
    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">
        <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, computed } from 'vue'

    let id = 0

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

    const filteredTodos = computed(() => {
    return hideCompleted.value
        ? todos.value.filter((t) => !t.done)
        : todos.value
    })

    function addTodo() {
    todos.value.push({ id: id++, text: newTodo.value, done: false })
    newTodo.value = ''
    }

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

    <template>
    <form @submit.prevent="addTodo">
        <input v-model="newTodo">
        <button>Add Todo</button>
    </form>
    <ul>
        <li v-for="todo in filteredTodos" :key="todo.id">
        <input type="checkbox" v-model="todo.done">
        <span :class="{ done: todo.done }">{{ todo.text }}</span>
        <button @click="removeTodo(todo)">X</button>
        </li>
    </ul>
    <button @click="hideCompleted = !hideCompleted">
        {{ hideCompleted ? 'Show all' : 'Hide completed' }}
    </button>
    </template>

    <style>
    .done {
    text-decoration: line-through;
    }
    </style>

## 生命周期和模板引用

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

    const pElementRef = ref(null)

    onMounted(() => {
    pElementRef.value.textContent = 'mounted!'
    })
    </script>

    <template>
    <p ref="pElementRef">hello</p>
    </template>

## 侦听器

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

    const todoId = ref(1)
    const todoData = ref(null)

    async function fetchData() {
    todoData.value = null
    const res = await fetch(
        `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
    )
    todoData.value = await res.json()
    }

    fetchData()

    watch(todoId, fetchData)
    </script>

    <template>
    <p>Todo id: {{ todoId }}</p>
    <button @click="todoId++">Fetch next todo</button>
    <p v-if="!todoData">Loading...</p>
    <pre v-else>{{ todoData }}</pre>
    </template>

## 组件

    \\App.vue
    <script setup>
    import ChildComp from './ChildComp.vue'
    </script>

    <template>
    <ChildComp />
    </template>

    \\ChildComp.vue
    <template>
    <h2>A Child Component!</h2>
    </template>


## Props

    \\App.vue
    <script setup>
    import { ref } from 'vue'
    import ChildComp from './ChildComp.vue'

    const greeting = ref('Hello from parent')
    </script>

    <template>
    <ChildComp :msg="greeting" />
    </template>

    \\ChildComp.vue
    <script setup>
    const props = defineProps({
    msg: String
    })
    </script>

    <template>
    <h2>{{ msg || 'No props passed yet' }}</h2>
    </template>


## Emits

    \\App.vue
    <script setup>
    import { ref } from 'vue'
    import ChildComp from './ChildComp.vue'

    const childMsg = ref('No child msg yet')
    </script>

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

    \\ChildComp.vue
    <script setup>
    const emit = defineEmits(['response'])

    emit('response', 'hello from child')
    </script>

    <template>
    <h2>Child component</h2>
    </template>

## 插槽

    \\App.vue
    <script setup>
    import { ref } from 'vue'
    import ChildComp from './ChildComp.vue'

    const msg = ref('from parent')
    </script>

    <template>
    <ChildComp>Message: {{ msg }}</ChildComp>
    </template>

    \\ChildComp.vue
    <template>
    <slot>Fallback content</slot>
    </template>