Vue3学习-day2-事件绑定

修噜噜噜噜

已于 2024-03-03 01:54:02 修改

阅读量463

点赞数 6

文章标签： javascript 前端开发语言

于 2024-03-02 22:21:50 首次发布

本文链接：https://blog.csdn.net/qq_56878873/article/details/136423813

版权

本文详细介绍了在Vue3中使用setup函数实现组件的生命周期管理，包括onBeforeMount、onMounted、onBeforeUpdate和onUpdated，以及如何利用v-model进行双向数据绑定和事件处理。

摘要由CSDN通过智能技术生成

尚未解决${data.userName}抓数据失败的原因

<template>
    <div class="about">
        <h1>This is an about page</h1>
    </div>
    <h2>vue3的生命周期</h2>
    <div id="dom">{{msg}}--{{num}}</div>
    <!-- 事件及方法直接生成在setup -->
    <button v-on:click="click">点击我111</button>
    <hr>
    <!-- v-model:双向绑定 -->
    <!-- input:输入事件
        blur：失去焦点
        focus获取焦点
        change内容更改
     -->
    <input type="text" placeholder="请输入姓名" v-model="userName"><br />
    <input type="text" placeholder="请输入电话" v-model="userPhone"
        @focus="handleFocus"
        @blur="handleBlur"
        @input="handleInput"
    ><br />
    <textarea placeholder="请输入您的建议" cols="30" rows="10" v-model="userInput"></textarea>
    <p>{{userName}}--{{userInput}}--{{userPhone}}</p>
    <button @click="ssubmit">提交</button>
</template>
<script>
import { reactive, toRefs, onBeforeMount,onMounted,onBeforeUpdate,onUpdated} from "vue"
export default {
        name:"about",
        setup() {
            const data=reactive({
                msg:"nihao",
                msg2:"hello world",
                num:0,
                userName:"",
                userInput:"",
                userPhone:""
            })
            //渲染之前
            onBeforeMount(()=>{
                console.log("onBeforeMount",document.querySelector("#dom"))
            })
            //渲染之后
            onMounted(()=>{
                console.log("onMounted",document.querySelector("#dom"))
                //定时器
                setTimeout(()=>{
                    data.msg="hello"
                },2000)
            })
            onBeforeUpdate(()=>{
                console.log("onBeforeUpdate")
            })
            // dom更新之前
            onUpdated(()=>{
                console.log("onUpdated")
                //data.num+=1
                //一般不会写数据改变
            })
            const click=()=>{
                alert("点击了")
            }
            const ssubmit=()=>{
                alert('${data.userName}')
            }
            
            const handleFocus=()=>{
                console.log('获取焦点')
            }
            const handleBlur=()=>{
                console.log('失去焦点')
                if(!data.userPhone){
                    alert("手机号必填")
                }
            }
            const handleInput=()=>{
                //正则验证手机号
                if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(data.userPhone)){
                    console.log('不符合手机号')
                    
                }
            }
            
            return {
                ...toRefs(data),
                click,
                ssubmit,
                handleFocus,
                handleBlur,
                handleInput
            }
        }
}
</script>