前端学习-vue学习009-侦听器

官方教程链接

• 侦听器：

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newCount) => {
  console.log(`new count is: ${newCount}`)
})

• pre标签：识别json对象中的\n\t等转义字符，展示原始的JSON对象结构。
• v-if v-else
• async await
• fetch

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

<script lang="ts" setup>
  import { ref,onMounted, watch } from 'vue';

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

  async function fetchData() {
    todoData.value = null
    const result = await fetch(
      `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
    )
    console.log(result);
    
    todoData.value = await result.json()
  }
  fetchData()
  watch(todoId,fetchData)
  
</script>

<style>

</style>