Temp

1. Vue
   1. 模板

   <template>

Hello World!

   </template>

1. 1. 声明式渲染

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

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

   <template>

模板:Message

Count is: 模板:Counter.count

   </template>

1. 1. Attribute 绑定

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

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

   <template>

Make me red

   </template>

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

1. 1. 事件监听

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

   const count = ref(0)

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

   <template>
   <button @click="increment">count is: 模板:Count</button>
   </template>

1. 1. 表单绑定

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

   const text = ref()
   </script>

   <template>
   <input v-model="text" placeholder="Type here">

   </template>

1. 1. 条件渲染

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

   const awesome = ref(true)

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

   <template>
   <button @click="toggle">toggle</button>

Oh no 😢

   </template>

1. 1. 列表渲染

   <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>

• 模板:Todo.text <button @click="removeTodo(todo)">X</button>

   </template>

1. 1. 计算属性

   <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>

• <input type="checkbox" v-model="todo.done"> 模板:Todo.text <button @click="removeTodo(todo)">X</button>

   <button @click="hideCompleted = !hideCompleted">
       模板:HideCompleted ? 'Show all' : 'Hide completed'
   </button>
   </template>

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

1. 1. 生命周期和模板引用

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

   const pElementRef = ref(null)

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

   <template>

hello

   </template>

1. 1. 侦听器

   <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>

Todo id: 模板:TodoId

   <button @click="todoId++">Fetch next todo</button>

Loading...

{{ todoData }}

   </template>

1. 1. 组件

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

   <template>
   <ChildComp />
   </template>

   \\ChildComp.vue
   <template>

A Child Component!

   </template>

1. 1. 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>

模板:Msg

   </template>

1. 1. 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" />

   </template>

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

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

   <template>

Child component

   </template>

1. 1. 插槽

   \\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>