导航

vue

一篇文章不足以介绍一个框架，本文仅展示部分使用示例，以与其他框架进行横向对比

数据双向绑定示例

`v-model`示例

vue提供了v-model指令作为语法糖

vue

<template>
    <div id="app">
        <div>msg: {{ msg }}</div>
        <input v-model="msg" />
    </div>
</template>

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

const msg = ref('')
</script>

不使用`v-model`示例

vue

<template>
    <div id="app">
        <div>msg: {{ msg }}</div>
        <input :value="msg" @input="inputHandler" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const msg = ref('')

const inputHandler = (e: Event) => {
    msg.value = (e.target as HTMLInputElement).value
}
</script>