Vue练习案例（中）

ljz20162024-11-18 18:23

案例一：watch用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单变化，或某个值变化</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<!-- push pop尾部追加或移除；shift unshift头部追加或移除，splice分割 -->
<body>
    <div id="Application">
        <div>{{type}} {{count}}</div>
        <button @click="click">增加</button>
        <button @click="jian">减少</button>
        <input v-model="searchText" />
    </div>
</body>
<script>
    Vue.createApp({
        data() {
            return {
                count: 0,
                searchText:""
            }
        },
        computed:{
            type(){
                return this.count>5?"大":"小"
            }
        },
        watch:{
            searchText(newValue,old){
                this.count = newValue.length
                if(this.type == "大"){
                    alert("文本太长")
                }
            }
        },
        methods: {
            click(){
                this.count = this.count+1;
            },
            jian(){
                this.count = this.count-1;
            }
        }
    }).mount("#Application");
</script>
</html>

案例二：表单绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单变化，或某个值变化</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }
    </style>
</head>
<!-- push pop尾部追加或移除；shift unshift头部追加或移除，splice分割 -->
<body>
    <div id="Application">
        <div>{{type}} {{count}}</div>
        <button @click="click">增加</button>
        <button @click="jian">减少</button>
        <input v-model="searchText" />
        <textarea v-model="textareaT"></textarea>
        <p style="white-space: pre-line;">多行文本内容：<br/>{{textareaT}}</p>
        <input type="checkbox" v-model="singleCheck" value="足球" />
        <input type="checkbox" v-model="singleCheck" value="排球" />
        <p>{{singleCheck}}</p>

        <input type="radio" v-model="qiu" value="足球2" />
        <input type="radio" v-model="qiu" value="排球1" />
        <p>{{qiu}}</p>

        <select v-model="selectList" multiple>
            <option>三国志</option>
            <option>DNF</option>
            <option>崩坏3</option>
        </select>
        <p :class="style">{{selectList}}</p>
    </div>
</body>
<script>
    Vue.createApp({
        data() {
            return {
                count: 0,
                searchText:"",
                textareaT:"",
                singleCheck:[],
                qiu:"",
                selectList:[],
                style:{
                    red: true,
                    blue: false
                },
                
            }
        },

        computed:{
            type(){
                return this.count>5?"大":"小"
            }
        },
        watch:{
            searchText(newValue,old){
                this.count = newValue.length
                if(this.type == "大"){
                    alert("文本太长")
                }
            }
            ,
            qiu(nv,oldv){
                if(nv == '排球1'){
                    this.style.red = true;
                    this.style.blue =false;
                }else{
                    this.style.red = false;
                    this.style.blue =true;
                }
            }
        },
        methods: {
            click(){
                this.count = this.count+1;
            },
            jian(){
                this.count = this.count-1;
            }
        }
    }).mount("#Application");
</script>
</html>

案例三：表单演练

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单变化，或某个值变化</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .red {
            color: red;
        }

        .blue {
            color: blue;
        }

        .container {
            margin: 0 auto;
            margin-top: 70px;
            text-align: center;
            width: 300px;
        }

        .subTitle {
            color: gray;
            font-size: 14px;
        }

        .title {
            font-size: 45px;
        }

        .input {
            width: 90%;
        }

        .inputContainer {
            text-align: left;
            margin-bottom: 20px;
        }

        .subContainer {
            text-align: left;
        }

        .field {
            font-size: 14px;
        }

        .input {
            border-radius:
                6px;
            height: 25px;
            margin-top: 10px;
            border-color: silver;
            border-style: solid;
            background-color: cornsilk;
        }

        .tip {
            margin-top: 5px;
            font-size: 12px;
            color: gray;
        }

        .setting {
            font-size: 9px;
            color: black;
        }

        .label {
            font-size: 12px;
            margin-left: 5px;
            height: 20px;
            vertical-align: middle;
        }

        .checkbox {
            height: 20px;
            vertical-align: middle;
        }

        .btn {
            border-radius: 10px;
            height: 40px;
            width: 300px;
            margin-top: 30px;
            background-color: deepskyblue;
            border-color: blue;
            Color: white;
        }
    </style>
</head>
<!-- push pop尾部追加或移除；shift unshift头部追加或移除，splice分割 -->

<body>
    <div class="container" id="app">
        <div class="container">
            <div class="subTitle">
                加入我们，一起创造美好世界
            </div>
            <h1 class="title">创建你的账号</h1>

            <div v-for="(item,index) in fields" class="inputContainer">
                <div class="field">{{item.title}}
                    <span v-if="item.required" style="color:red">*</span>
                    <input class="input" :type="item.type" v-model="item.model" />
                    <div class="tip" v-if="index==2">请确认密码长度大于6</div>
                </div>
            </div>

            <div class="subContainer">
                <div class="setting">偏好设置</div>
                <input class="checkbox" type="checkbox" /><label class="label">接受更新邮件</label>
            </div>

            <button @click="createAccount" class="btn">创建账号</button>
        </div>
    </div>
</body>
<script>
    Vue.createApp({
        data() {
            return {
                fields: [
                    {
                        title: "用户名",
                        required: true,
                        type: "text",
                        model:""
                    },
                    {
                        title: "邮箱地址",
                        required: false,
                        type: "text",
                        model:""
                    },
                    {
                        title: "密码",
                        required: true,
                        type: "password",
                        model:""
                    },
                ]
            }
        },
        computed: {
            name: {
                get() {
                    return this.fields[0].model
                },
                set(value){
                    this.fields[0].model= value
                }
            },
            email: {
                get() {
                    return this.fields[1].model
                },
                set(value){
                    this.fields[1].model= value
                }
            },
            password: {
                get() {
                    return this.fields[2].model
                },
                set(value){
                    this.fields[2].model= value
                }
            }
        },
        methods: {
            emailCheck() { 
                alert('email检查')
            },
            createAccount(){
                alert(`name=${this.name}`)
            }
        },
    }).mount("#app")
</script>

</html>

案例四：鼠标事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单变化，或某个值变化</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .container {
            margin: 0;
            padding: 0;
            /* position: absolute; */
            width: 440px;
            height: 440px;
            background-color: blanchedalmond;
            border-radius: 30px;
            z-index: 100;
        }
        .bail {
            position: absolute;
            width: 60px;
            height: 60px;
            left: 100px;
            top: 100px;
            background-color: red;
            border-radius: 30px;
            z-index: 100;
        }
    </style>
</head>

<body>
    <div id ="move2">
        <div class="container" @mousemove.stop="move">
            <div class = "bail" :style="{left:offsetX+'px', top:offsetY+'px'}">

            </div>
        </div>
    </div>

    <div id="app">
        <div @click="click">单击事件</div>
        <div @dblclick="dblclick">双击事件</div>
        <input @focus="focus" @blur="blur" @change="change" @select="select"></input>
        <div @mousedown="mousedown">鼠标按下</div>
        <div @mouseup="mouseup">鼠标抬起</div>
        <div @mousemove="mousemove">鼠标移动</div>
        <div @mouseout="mouseout" @mouseover="mouseover">鼠标移入移出</div>
        <input @keydown="keydown" @keyup="keyup"></input>

        <div @click.left="click">左键单击事件</div>
        <div @click.right="click">右键单击事件</div>
        <div @click.middle="click">中键单击事件</div>
    </div>
  
</body>
<script>
    const App = {
        methods: {
            click() {
                console.log("单击事件");
            },
            dblclick() {
                console.log("双击事件");
            },
            focus() {
                console.log("获取焦点")
            },
            blur() {
                console.log("失去焦点")
            },
            change() {
                console.log("内容改变")
            },
            select() {
                console.log("文本选中")
            },
            mousedown() {
                console.log("鼠标按键按下")
            },
            mouseup() {
                console.log("鼠标按键抬起")
            },
            mousemove() {
                console.log("鼠标移动")
            },
            mouseout() {
                console.log("鼠标移出")
            },
            mouseover() {
                console.log("鼠标移入")
            },
            keydown() {
                console.log("键盘按键按下")
            },
            keyup() {
                console.log("键盘按键抬起")
            }
        }
    }
    app1 = Vue.createApp(App).mount("#app");
    Vue.createApp({
        data() {
            return {
                offsetX:0,
                offsetY:0
            }
        },
        methods:{
            move(event){
                if(event.clientX +30>440){
                    this.offsetX = 440 -60
                }
                else if (event.clientX - 30 <0){
                    this.offsetX = 0
                }
                else{
                    this.offsetX = event.clientX-30
                }

                if(event.clientY +30>440){
                    this.offsetY = 440 -60
                }
                else if (event.clientY - 30 <0){
                    this.offsetY = 0
                }
                else{
                    this.offsetY = event.clientY-30
                }
            }
        }
    }).mount("#move2");
</script>

</html>

案例五：键盘事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单变化，或某个值变化</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            position: relative;
            margin: 0 auto;
            width: 440px;
            height: 440px;
            background-color: blanchedalmond;
        }

        .ball {
            position: absolute;
            width: 30px;
            height: 30px;
            left: 0px;
            top: 0px;
            background-color: orange;
            border-radius: 30px;
        }

        .board {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 10px;
            width: 80px;
            border-radius: 5px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">

        <!--游戏区域-->
        <div class="container">
            <!--底部挡板-->
            <div class="board" :style="{left: boardX + 'px'}"></div>
            <!--弹球-->
            <div class="ball" :style="{left: ballX+'px', top: ballY+'px' }"></div>
            <!--游戏结束提示-->
            <h1 v-if="fail" style="text-align: center;">游戏失败</h1>
        </div>

    </div>
</body>
<script>
    var app = {
        data() {
            return {
                // 挡板位置
                boardX: 0,
                // 球位置
                ballX: 0,
                ballY: 0,
                // 速度
                rateX: 0.1,
                rateY: 0.1,
                fail: false
            }
        },
        mounted() {
            this.enterKeyup();
            // 随即弹球速度和轨迹
            this.rateX = Math.random() + 0.1
            this.rateY = Math.random() + 0.1

            this.timer = setInterval(() => {
                if (this.ballX + this.rateX >= 440 - 30) {
                    this.rateX *= -1
                }
                if (this.ballX + this.rateX <= 0) {
                    this.rateX *= -1
                }
                if (this.ballY + this.rateY <= 0) {
                    this.rateY *= -1
                }

                this.ballX += this.rateX
                this.ballY += this.rateY

                if (this.ballY >= 440 - 30 - 10) {
                    if (this.boardX <= this.ballX + 30 && this.boardX + 80 >= this.ballX) {
                        // 反弹
                        this.rateY *= -1
                    } else {
                        clearInterval(this.timer)
                        this.fail = true
                    }
                }
            }, 2)
        },
        methods: {
            keydown(event) {
                if (event.key == "ArrowLeft") {
                    if (this.boardX > 10) {
                        this.boardX -= 20
                    }
                } else if (event.key == "ArrowRight") {
                    if (this.boardX < 440 - 80) {
                        this.boardX += 20
                    }
                }
            },
            enterKeyup(){
                document.addEventListener("keydown", this.keydown)
            }
        },
    }
    Vue.createApp(app).mount("#app");
</script>

</html>

案例六：自定一组件-父子组件传值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单变化，父子组件传值，传事件</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <!-- 父组件传值到子组件，子组件回传参数到父组件的事件 -->
        <myalert-com @myclick="alert1" title="崩坏3" ><template #header>具名header插槽</template><template #foot>具名foot22插槽</template></myalert-com>
        <myalert-com @myclick="alert2" title="DNF" ><template #foot>具名foot插槽</template></myalert-com>
        <!-- 子组件传值到父组件 -->
        <myinput-com v-model="modelValue1"></myinput-com>
        <myinput-com v-model="modelValue2"></myinput-com>
        <label for="myalert-com">myalert-com</label>
        <input type="radio" value="myalert-com" v-model="page" />
        <label for="myinput-com">myinput-com/label>
        <input type="radio" value="myinput-com" v-model="page" />
        <!-- 组件切换 -->
        <component :is="page"></component>
    </div>
</body>
<script>
    const App = Vue.createApp({
        data(){
            return {
                modelValue1:"input1",
                modelValue2:"input2",
                page:"myinput-com"
            }
        },
        methods:{
            alert1(var1,var2){
                alert("方法1,参数1="+var1+"参数2="+var2)
            },
            alert2(var1,var2){
                alert("方法2,参数1="+var1+"参数2="+var2)
            }
        },
        watch:{
            modelValue1(nv,ov){
                alert(nv+"__1__"+ov)
            },
            modelValue2(nv,ov){
                alert(nv+"__2__"+ov)
            }
        }
    })

    const alertCompent = {
        data(){
            return {
                msg:"警告提示",
                count:0
            }
        },
        computed:{
            countString:{
                get(){
                    return this.count + "次"
                }
            }
        },
        methods:{
            click(){
                this.count +=1
                this.$emit('myclick', this.count, this.title)
            }
        },
        // 外部属性
        props:["title"],
        watch:{
            count(nv,oldv){
                console.log(nv, oldv)
            }
        },
        template:`<div><button @click="click">{{title}}按钮+1<slot name="header"></slot><slot name="foot"></slot></button></div>`
    }

    const inputCompent = {
        props:["modelValue"],
        methods:{
            action(event){
                this.$emit("update:modelValue", event.target.value)
            }
        },
        template:`<div><input :value="modelValue" @input="action" /></div>`
    }

    App.component("myalert-com", alertCompent)
    App.component("myinput-com", inputCompent)
    App.mount("#app")
</script>

</html>
相关推荐
m0_7482463513 分钟前
前端通过new Blob下载文档流（下载zip或excel）
前端·excel
m0_6075487618 分钟前
什么是单例模式
开发语言·javascript·单例模式
半糖112225 分钟前
将本地项目提交到远程仓库
前端·vue.js
web150850966414 小时前
【React&前端】大屏适配解决方案&从框架结构到实现（超详细）（附代码）
前端·react.js·前端框架
理想不理想v4 小时前
前端项目性能优化（详细）
前端·性能优化
CodeToGym5 小时前
使用 Vite 和 Redux Toolkit 创建 React 项目
前端·javascript·react.js·redux
Cachel wood5 小时前
Vue.js前端框架教程8：Vue消息提示ElMessage和ElMessageBox
linux·前端·javascript·vue.js·前端框架·ecmascript
PP东6 小时前
ES6学习Generator 函数（生成器）(八)
javascript·学习·es6
桃园码工7 小时前
4_使用 HTML5 Canvas API (3) --[HTML5 API 学习之旅]
前端·html5·canvas
桃园码工7 小时前
9_HTML5 SVG (5) --[HTML5 API 学习之旅]
前端·html5·svg
热门推荐
01VSCode插件 —— Cody AI （免费AI助手！）02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04SQL 主从数据库实时备份05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07ARM学习（31）编译器对overlay方式的支持08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）