Vue（1）——核心语法

1. 响应式数据与插值表达式

<script setup>
import { ref } from 'vue'
const text =ref({
  title:"标题",
  content:"内容"
})
text.value.content = "内容内容"
</script>

<template>
<h1>{{text.title}}</h1> 
<p>{{text.content}}</p>
</template>

2. 计算属性computed

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

3. 侦听器

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

4. 指令

指令	作用
v-text	插入文本
v-html	插入HTML
v-bind （简写方式:）	绑定attribute
v-on （简写方式@）	绑定事件监听器
v-for	多次渲染元素或模板块
v-if	条件渲染元素或模板块
v-model	在表单输入元素或组件上创建双向绑定

5. 修饰符（用于修饰指令）

指令	修饰符
v-on	.stop/ .prevent/ .capture/ .self/ .once/ .left/ .left/ .middle
v-model	.lazy/ .number/ .trim

更多关于指令和修饰符的内容可以通过vue官网进行查询