vue的基本使用

1.vue的基本介紹

一個vue文件基本被分為了3個部分

<!-- js部分 -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<!-- HTML部分 -->
<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>
<!-- CSS部分 -->
<style scoped>
button {
  font-weight: bold;
}
</style>

編寫文件會分成這個3塊進行編寫

2.變量的定義和使用

(1)reactive()

我們可以使用 Vue 的 reactive() API 來聲明響應式狀態。

<script setup>
import { reactive } from 'vue'
// 定義變量
const counter=reactive({
  count:0
})
</script>
<template>
<!-- 取變量的值 -->
  <h1>{{counter.count}}</h1>
</template>

reactive() 只適用于對象 (包括數組和內置類型，如 Map 和 Set)

(2)ref()

一個 API ref() 則可以接受任何值類型。ref 會返回一個包裹對象，并在 .value 屬性下暴露內部值。

<script setup>
import { ref } from 'vue'
// 定義變量
const count=ref(0)
//修改變量
count.value=1
</script>

<template>
<!-- 輸出變量，輸出變量的時候，無需再加.value-->
  <h1>{{count}}</h1>
</template>

2動態綁定

<!-- 通過使用v-bind進行動態綁定 -->
<div v-bind:id="dynamicId"></div>
<div v-bind:class="dynamicId"></div>
<!-- 可以簡寫為 -->
<div :id="dynamicId"></div>
<div :class="dynamicId"></div>

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

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

<template>
<!-- 綁定titleClass這個動態的變量 -->
  <h1 v-bind:class="titleClass">Make me red</h1>
</template>

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

3.事件監聽

<!-- 通過v-on實現監聽-->
<button v-on:click="increment">{{ count }}</button>
<!-- 可以簡寫為@click-->
<button @click="increment">{{ count }}</button>

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

const count = ref(0)
function increment(){
  count.value++
}
</script>

<template>

  <button v-on:click="increment">Count is: {{ count }}</button>
</template>

4.表單綁定

v-model 會將被綁定的值與變量的值自動同步

<input v-model="text">

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

const text = ref('')

</script>

<template>
<!-- 綁定變量text -->
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>

5.條件渲染

<!-- 通過v-if和v-else進行條件渲染 -->
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no ??</h1>

當awesome為true時就會執行v-if的語句

當awesome為false時會執行v-else的語句

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

6.列表渲染

可以使用 v-for 指令來渲染一個基于源數組的列表

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>
<!-- 在源數組上調用變更方法 -->
todos.value.push(newTodo)

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

7.計算屬性

computed()可以讓我們創建一個計算屬性 ref，這個 ref 會動態地根據其他響應式數據源來計算其 .value

<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==false) : 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" required placeholder="new todo">
    <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>

8.生命周期和模板引用

<script setup>
import { ref,onMounted } from 'vue'
// 雙向綁定變量
const pElementRef = ref(null)
// 創建生命周期鉤子,因為在script setup執行的時候，p這個標簽還沒有加載
onMounted(() => {
 pElementRef.value.textContent="你好"
})

</script>

<template>
<!-- 雙向綁定變量 -->
  <p ref="pElementRef">Hello</p>
</template>

9.偵聽器

watch(監聽的變量,調用的函數)

<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++" :disabled="!todoData">Fetch next todo</button>
  <p v-if="!todoData">Loading...</p>
  <pre v-else>{{ todoData }}</pre>
</template>

10.組件

<script setup>
 // 導入組件
import ChildComp from './ChildComp.vue'
</script>

<template>
<!-- 使用組件 -->
  <ChildComp />
</template>