当前位置： 首页 > article >正文

vue知识点（2）

article 2025/3/13 1:59:21

表单输入绑定

表单输入绑定是通过 v-model 指令实现的。可以用于各种表单元素，如 <input>、<textarea>、<select> 等。

文本输入框

<template>
    <input v-model="text" placeholder="请输入文本" />
    <div>{{ text }}</div>
</template>

<script setup>
import { ref } from 'vue'
const text = ref('')
</script>

多行文本输入框

<template>
    <textarea v-model="text" placeholder="请输入多行文本" ></textarea>
    <div>{{ text }}</div>
</template>

<script setup>
import { ref } from 'vue'
const text = ref('')
</script>

复选框

单个复选框绑定布尔值

<template>
    <input type="checkbox" v-model="isChecked" />
    <label>是否同意：{{ isChecked }}</label>
</template>

<script setup>
import { ref } from 'vue'
const isChecked = ref(false)
</script>

多个复选框绑定数组

<template>
    <input type="checkbox" v-model="selectedFruits" value="苹果" />
    <label>苹果</label>
    <input type="checkbox" v-model="selectedFruits" value="香蕉" />
    <label>香蕉</label>
    <input type="checkbox" v-model="selectedFruits" value="橙子" />
    <label>橙子</label>
    <div>
        <p>你选中的水果是：{{ selectedFruits }}</p>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const selectedFruits = ref([])
</script>

单选框

<template>
    <input type="radio" v-model="selectedFruit" value="苹果" />
    <label>苹果</label>
    <input type="radio" v-model="selectedFruit" value="香蕉" />
    <label>香蕉</label>
    <input type="radio" v-model="selectedFruit" value="橙子" />
    <label>橙子</label>
    <div>
        <p>你选中的水果是：{{ selectedFruit }}</p>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const selectedFruit = ref('')
</script>

下拉选择框

单选

<template>
    <select v-model="selectedFruit">
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="橙子">橙子</option>
    </select>
    <div>
        <p>你选中的水果是：{{ selectedFruit }}</p>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const selectedFruit = ref('')
</script>

多选

<template>
	//multiple启用多选功能，按住 Ctrl 或 Command 键点击选项即可多选。
    <select v-model="selectedFruits" multiple>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="橙子">橙子</option>
    </select>
    <p>你选中的水果是：{{ selectedFruits }}</p>
</template>

<script setup>
import { ref } from 'vue'
const selectedFruits = ref([])
</script>

修饰符

Vue 为 v-model 提供了一些修饰符，用于控制数据的更新行为。
.lazy
默认情况下，v-model 会在 input 事件触发时同步数据。使用 .lazy 修饰符后，数据会在 change 事件触发时同步（通常在输入框失去焦点时）。

//在 "change" 事件后同步更新而不是 "input"
<input v-model.lazy="message" placeholder="请输入内容">

.number
将用户输入的值自动转换为数字类型。

//number 修饰符会在输入框有 type="number" 时自动启用
<input v-model.number="age" type="number" placeholder="请输入年龄">

.trim
自动去除用户输入内容的首尾空白字符。

<input v-model.trim="message" placeholder="请输入内容">

自定义组件的 v-model

//自定义输入组件
<template>
    <div>
        <CustomInput v-model="message"></CustomInput>
        <p>输入的内容是：{{ message }}</p>
    </div>
</template>

<script setup>
import CustomInput from '../components/CustomInput.vue'
import { ref } from 'vue'

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

//在 CustomInput.vue 中
<template>
    <input
        :value="modelValue"
        //事件监听器，用于监听输入框的输入事件。通过 $emit 方法向上级组件发送一个名为 update:modelValue 的自定义事件，并将输入框当前的值 ($event.target.value) 作为参数传递出去。
        @input="$emit('update:modelValue', $event.target.value)"
        placeholder="请输入内容"
    />
</template>

<script setup>
//用于定义组件接收的属性。
defineProps(['modelValue'])
//用于定义组件可以触发的自定义事件。
defineEmits(['update:modelValue'])
</script>

侦听器

用于监听数据变化并执行特定的逻辑。使用 watch 函数监听一个特定的数据属性，并在该属性发生变化时执行回调函数。

<template>
    <div>
        <input v-model="message" placeholder="请输入内容" />
        <p>新值：{{ updatedMessage }}</p>
        <p>旧值：{{ oldMessage }}</p>
    </div>
</template>

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

const message = ref('')
const updatedMessage = ref('')
const oldMessage = ref('')
//用于监听 message 数据的变化，当 message 数据发生变化时，会触发回调函数。
watch(message, (newVal, oldVal) => {
    updatedMessage.value = newVal
    oldMessage.value = oldVal
})
</script>

watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组。

<template>
    <div>
        <button @click="handleClick">点击++</button>
    </div>
</template>

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

const x = ref(0)
const y = ref(0)

const handleClick = () => {
    x.value++
    y.value++
}

// 单个 ref
watch(x, (newX) => {
    console.log(`x is ${newX}`)
})

// getter 函数
watch(
    () => x.value + y.value,
    (sum) => {
        console.log(`sum of x + y is: ${sum}`)
    }
)

// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
    console.log(`x is ${newX} and y is ${newY}`)
})
</script>

但是，不能直接侦听响应式对象的属性值

const obj = reactive({ count: 0 })

// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`Count is: ${count}`)
})

应该用一个返回该属性的 getter 函数

// 提供一个 getter 函数
watch(
  () => obj.count,
  (count) => {
    console.log(`Count is: ${count}`)
  }
)

深层侦听器

直接给 watch() 传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发。

<template>
    <div>
        <button @click="handleClick">点击++</button>
    </div>
</template>

<script setup>
import { ref, watch, reactive } from 'vue'

const obj = reactive({ count: 0, name: '张三' })

const handleClick = () => {
    obj.count++
}

watch(obj, (newValue, oldValue) => {
    // 在嵌套的属性变更时触发
    // 注意：`newValue` 此处和 `oldValue` 是相等的
    // 因为它们是同一个对象！
    console.log(newValue, oldValue)
})
</script>

显式地加上 deep 选项，强制转成深层侦听器

<template>
    <div>
        <button @click="handleClick">点击</button>
    </div>
</template>

<script setup>
import { ref, watch, reactive } from 'vue'

const state = reactive({
    someObject: {
        count: 0,
        name: '张三',
        info: {
            address: '张家口',
        },
    },
})

const handleClick = () => {
    // 如果整个对象被替换，`newValue` 和 `oldValue` 是不相等的
    state.someObject = {
        count: 1,
        name: '王五',
    }
    // 如果只修改对象的属性，`newValue` 此处和 `oldValue` 是相等的
    // 只有加上 `deep: true` 才会改变 address 的值
    state.someObject.info = {
        address: '王家口',
    }
}

watch(
    () => state.someObject,
    (newValue, oldValue) => {
        // 注意：`newValue` 此处和 `oldValue` 是相等的
        // *除非* state.someObject 被整个替换了，`newValue` 和 `oldValue` 才会不相等
        console.log(newValue, oldValue)
    },
    { deep: true }
)
</script>

即时回调的侦听器

默认情况下，侦听器只有在监听的数据发生变化时才会触发。如果希望侦听器在初始化时立即执行一次，可以使用 immediate 选项。

<template>
    <div>
        <button @click="handleClick">点击</button>
    </div>
</template>

<script setup>
import { ref, watch, reactive } from 'vue'

const source = ref(0)

const handleClick = () => {
    source.value++
}

watch(
    source,
    (newValue, oldValue) => {
        // 立即执行，且当 `source` 改变时再次执行
        console.log(newValue, oldValue)
        if (newValue === 1) {
            source.value = 0
        }
    },
    { immediate: true }
)
</script>

watchEffect

用于自动追踪依赖并执行副作用的函数。它类似于 watch，但更加简洁，适合用于不需要显式指定监听数据，而是自动追踪回调函数中使用的响应式数据的场景。
在回调函数中自动追踪所有使用的响应式数据。当这些数据发生变化时，回调函数会重新执行。

<template>
    <div>
        <button @click="handleClick">点击</button>
    </div>
</template>

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

const source = ref(0)

const handleClick = () => {
    source.value++
}

watchEffect(() => {
    console.log(source.value)
})
</script>

停止侦听器

同步语句创建的侦听器，会自动绑定到宿主组件实例上，并且会在宿主组件卸载时自动停止。
如果用异步回调创建一个侦听器，那么它不会绑定到当前组件上，你必须手动停止它，以防内存泄漏。

<template>
    <div>
        <button @click="handleClick">点击</button>
    </div>
</template>

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

const source = ref(0)

const handleClick = () => {
    source.value++
}

let stop = null

stop = watchEffect(() => {
    console.log(source.value)
    if (source.value === 5) {
        stop()
        console.log('侦听已停止')
    }
})

// 5 秒后停止侦听
setTimeout(() => {
    stop()
    console.log('侦听已停止')
}, 5000)
</script>

http://www.kler.cn/a/582127.html

相关文章：

  • Docker基础入门
  • 从0到1搭建前端项目
  • ROS实践（四）机器人建图及导航
  • C++ 布尔类型（bool）深度解析
  • Nginx快速安装-Linux-CentOS7
  • Docker介绍和安装
  • Three.js 进阶(灯光阴影关系和设置、平行光、阴影相机)
  • 如何将ipynb文件转换为pdf文件
  • 能否调整爬虫以支持多页商品列表？
  • 【制作PPT的AI工具】
  • http 服务器概念详细介绍
  • C++学习笔记（十六）——函数重载
  • 【每日学点HarmonyOS Next知识】重叠顺序、对话框位置、事件总线、PageMap显示、多表多item类型
  • 51单片机之蓝牙模块的使用
  • C#变量与变量作用域详解
  • 有哪些好用的AI视频加工创作网站
  • GStreamer —— 2.16、Windows下Qt加载GStreamer库后运行 - “播放教程 2：字幕管理“（附：完整源码）
  • Redis 持久化详解：RDB 与 AOF 的机制、配置与最佳实践
  • Rust规律归纳随笔
  • 【CXX】6.3 [T], mut [T] — rust::Slice＜T＞