Vue3 is a popular JavaScript framework for building interactive web applications. In Vue3, v-onand v-modelare two very important directives that allow you to add interactivity and responsiveness to your Vue application.
Vue3 is a popular JavaScript framework for building interactive web applications. In Vue3, v-onand v-modelare two very important directives that allow you to add interactivity and responsiveness to your Vue application.
v-on directive
v-onInstructions are used to listen to DOM events, and when the event is triggered, execute the specified method. This directive can be added to any HTML element, such as buttons, text boxes, etc.
The syntax format is as follows:
<button v-on:click="methodName">Click me</button>In the above example, v-onthe directive will listen for button click events, and when the button is clicked, methodNamethe method will be called.
You can also use abbreviated syntax for v-oninstructions. For example, you could replace the example above with:
<button @click="methodName">Click me</button>Here, @clickequates to v-on:click.
v-model directive
v-modelDirectives are used to bind data two-way between form elements and Vue instances. This means that when the value of the form element changes, the data in the Vue instance is automatically updated, and vice versa. v-modelDirectives can be applied to various form elements such as text boxes, radio buttons, checkboxes, etc.
The syntax format is as follows:
<input v-model="propertyName">In the above example, the directive binds v-modelthe value of the input box to the property in the Vue instance . propertyNameIf the user changes the value of the input box, the property in the Vue instance propertyNamewill also be automatically updated.
Note that v-modeldirectives only work on simple form elements. For complex form elements such as checkboxes and checkboxes, you need to implement two-way binding manually using v-binddirectives and directives.v-on
In short, v-oninstructions are used to listen to DOM events, and v-modelinstructions are used to implement two-way binding between form elements and Vue instances. Using these two directives can greatly enhance the interactivity and responsiveness of your Vue application.
example
<template>
<div>
<p id="dom">{
{msg}}</p>
<!-- v-on:事件名="事件方法" 绑定事件 简写@:事件名="事件方法" -->
<button @click="handClick">Click</button>
<!-- model 双向绑定 -->
<input v-model="useName" placeholder="请输入姓名" type="text">
<!-- <input v-model="useName" placeholder="请输入姓名" type="text"> -->
<textarea placeholder="请输入建议" v-model="useInput" id="" cols="30" rows="10"></textarea>
<p>{
{useName}}----{
{useInput}}</p>
<button @click="submit">submit</button>
<!-- input 输入事件
blur：失去焦点
focus：获取焦点
change：内容更改
-->
<input type="text" @blur="blur" v-model="userPhone">
</div>
</template>
<script>
// @ is an alias to /src
import { reactive, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from "vue";
export default {
name: 'name',
setup() {
const data = reactive({
msg: '你好',
useName: '',
useInput: '',
userPhone: '',
})
// 数据渲染前
onBeforeMount(() => {
console.log('onBeforeMount', document.querySelector('#dom'));
})
// 数据渲染后
onMounted(() => {
console.log('onMount', document.querySelector('#dom'));
setTimeout(() => {
data.msg = 'xxxxxxx';
}, 2000)
})
// 数据更新前
onBeforeUpdate(() => {
console.log('onBeforeUpdate');
})
// 数据更新后
onUpdated(() => {
console.log('onUpdated');
})
const handClick = () => {
alert("你好");
}
const submit = () => {
alert(`${data.useName}的建议是${data.useInput}`);
}
const blur = () => {
let reg = /^[1][1,4,5,7,8][0-9]{9}$/;
if (data.userPhone === '') alert('手机号不能为空')
else if (!reg.test(data.userPhone)) {
alert('请正确输入手机号');
}
}
return {
...toRefs(data),
handClick,
submit,
blur,
}
},
}
</script>