Temp：修订间差异

来自泡泡学习笔记
跳到导航 跳到搜索
无编辑摘要
标签：已被回退
（清空全部内容）
标签：清空 手工回退
第1行： 第1行：
# 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>

2023年10月28日 (六) 20:17的版本

取自“http://bubblestudy.info/wiki/index.php?title=Temp&oldid=2266”