Vue

教程 | Vue.js

基础语法

import { createApp } from 'vue'
// 根组件
import App from './App.vue'
const app = createApp(App)

声明式渲染

import { reactive, ref } from 'vue'
const counter = reactive({
  count: 0
})
counter.count++

const message = ref('Hello World!')
message.value = 'Changed'

• reactive() 只适用于对象
• ref() 可以接受任何值类型

属性绑定

<script>
const titleClass = ref('title')
</script>
// ...
<div :class="titleClass">Something</div>

• 形如 v- 的属性是指令，其中 v-bind 可省略
• 形如 :id 的部分是指令的参数，使元素的 id 属性与 dynamicId 所指内容同步

事件监听

<script>
const count = ref(0)
const increment = () => count.value++
</script>
// ...
<button @click="increment">{{ count }}</button>

• 使用 v-on 监听 DOM 事件，v-on: 可简写为 @

表单绑定

<script>
const text = ref('')
const onInput = (e) => text.value = e.target.value
</script>
// ...
<input :value="text" @input="onInput"> 
<input v-model="text">
<p>{{ text }}</p>

• 双向绑定可简写为 v-model

条件渲染

<script>
const awesome = ref(true)
const toggle = () => awesome.value = !awesome.value
</script>
<h1 v-if="awesome">If</h1>
<h1 v-else>Else</h1>

• 使用 v-if, v-else, v-else-if 条件渲染元素

列表渲染

<script>
let id = 0
const todos = ref([
  { id: id++, text: 'First' },
  { id: id++, text: 'Second' },
])
// ...
</script>
<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
    <button @click="removeTodo(todo)">X</button>
  </li>
</ul>

• 使用 v-for 渲染列表，遍历的局部变量能在 v-for 所绑定的元素或内部访问