vue从入门到放弃——（3）vue基础练习

最新推荐文章于 2024-05-14 20:09:44 发布

素描本里的男子

最新推荐文章于 2024-05-14 20:09:44 发布

阅读量443

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44963099/article/details/93891882

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

Vue基础练习

$event事件对象

【扩展】事件对象
语法：<div @click=“fn(美元符号+event)”>中，$event为事件对象
作用：记录事件相关的信息

注：函数传参必须写$event

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>

<body>
    <div id="demodiv">
        <input type="text" name="uname" @keydown="fun($event)" />
    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el: "#demodiv",
        data: {

        },
        methods: {
            fun(text) {
                if (text.keyCode == 65) {
                    console.log("您按下了a健")
                }

            }
        }
    })
</script>

事件修饰符

扩展】事件修饰符

概念：v-on指令提供了事件修饰符来处理DOM事件细节

prevent修饰符：阻止事件的默认行为(submit提交表单)

stop修饰符：阻止事件冒泡

注意：修饰符可以串联使用

按键修饰符： .up, .down, .ctrl, .enter, .space等等

语法：@click.修饰符=‘fn()’

eg1:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="demodiv">
        <input type="text" name="uname" @keydown.up="fun()" />
    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el: "#demodiv",
        data: {
        },
        methods: {
            fun() {
                console.log("您按下了光标上健");
            }
        }
    })
</script>

eg2:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="demodiv">
        <h1>阻止事件传播</h1>
        <div @click="funA()">
            <button @click.stop="funB()">点我呀</button>
        </div>
        <h1>阻止默认行为</h1>
        <form action="#" method="get" @submit.prevent="funC()">
            <input type="text" name="uname">
            <input type="checkbox" name="ck" />
            <input type="checkbox" name="ck" />
            <input type="checkbox" name="ck" />
            <input type="checkbox" name="ck" />
            <input type="submit" value="aaaaaaa">
        </form>
    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el: "#demodiv",
        data: {

        },
        methods: {
            funA() {
                console.log("我是div")
            },
            funB() {
                console.log("我是button")
            },
            funC() {
                console.log("表单提交了")
            }
        }
    })

</script>

计算属性与侦听

概念：顾名思义，首先它是一种属性，其次它有==“计算”==这个特殊性质。每次取得它的值得时候，它并不像普通属性那样直接返回结果，而是经过一系列的计算之后再返回结果。同时只要在它的当中里引用了 data 中的某个属性，当这个属性发生变化时，计算属性仿佛可以嗅探到这个变化，并自动重新执行。

为什么要用计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

语法

computed: {
        需要返回的数据: function () {
            return 处理操作
        }
    }

一定一定一定要return出去

计算属性的使用

小知识：

substr()
从第几个下标开始截取，截取几个
substring()
从第几个下标开始截取，截取到第几个下标包含
第一个下标，但不包含最后一

eg:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="demodiv">
        <input type="text" v-model="text" />
        <p>{{newText}}</p>
    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el: "#demodiv",
        data: {
            text: "abcdefg"
        },
        methods: {

        },
        // 计算属性
        computed: {
            newText() {
                return this.text.toUpperCase().substr(3, 2)
            }

        }
    })
</script>

上面的例子也可以methods来完成

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="demodiv">
        <p>{{fun()}}</p>
        <p>{{fun()}}</p>
        <p>{{fun()}}</p>
        <p>{{fun()}}</p>
        <p>{{fun()}}</p>
        <p>{{fun()}}</p>
        <p>{{newText}}</p>
        <p>{{newText}}</p>
        <p>{{newText}}</p>
        <p>{{newText}}</p>
        <p>{{newText}}</p>
        <p>{{newText}}</p>
        <p>{{newText}}</p>
        <p>{{newText}}</p>
    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el: "#demodiv",
        data: {
            text: "abcdefg"
        },
        methods: {
            fun() {
                console.log("我是函数")
                return this.text.toUpperCase().substr(3, 2)
            }
        },
        // 计算属性
        computed: {
            newText() {
                console.log("我是计算属性")
                return this.text.toUpperCase().substr(3, 2)
            }

        }
    })
</script>

计算属性和方法的区别

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
方法每当触发重新渲染时，调用方法将总会再次执行函数。

说的通俗一点

函数也可以完成计算属性的功能但是
函数是调用多少次执行多少次，计算属性是
在计算机缓存里调用的，只调用一次，计算属性的
效率更高，函数比较浪费资源

侦听/监听 watch

watch：可以监听模型数据当模型数据改变的时候就会触发
watch:{
监听的data数据(newval,oldval){
console.log(newval+"—"+oldval)
}
}
watch初始化的时候不会运行,只有数据被改变之后才会运行

什么时候使用watch

当需要在数据变化时执行异步或开销较大的操作时，watch这个方式是最有用的。

eg：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="demodiv">
        <input type="text" v-model="text">
        {{text}}
    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el: "#demodiv",
        data: {
            text: "abcdefg"
        },
        methods: {

        },
        watch: {
            text(newval, oldval) {
                console.log(newval + '========' + oldval)
            }
        }
    })
</script>

注意：newval是新值而oldval是旧值

exercise

ex1：

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>
    <div class="container" id="box">
        <div class="row">
            <form>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入用户名" v-model="inputa">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入密码" v-model="inputb">
                </div>
            </form>
        </div>
        <div class="row">
            <input type="button" class="btn btn-success" value="添加" @click="add()" v-bind:disabled="btnBool">
            <input type="button" class="btn btn-info" value="删除">
        </div>
        <div class="row">
            <h1>用户信息表</h1>
            <table class="table table-bordered">
                <tr class="text-center">
                    <td>序号</td>
                    <td>名字</td>
                    <td>年龄</td>
                    <td>操作</td>
                </tr>
                <tr class="text-center" v-for="(v,i) in arr">
                    <td>{{i+1}}</td>
                    <td>{{v.uname}}</td>
                    <td>{{v.age}}</td>
                    <td><button class="btn btn-success" data-toggle="modal" data-target="#myModal"
                            @click="del(i)">删除</button></td>
                </tr>
                <tr class="text-right" v-if="arr.length>0">
                    <td colspan="4"><button class="btn btn-info" data-toggle="modal"
                            data-target="#myModal" @click="delAll()">删除全部</button></td>
                </tr>
                <tr class="text-center" v-else>
                    <td colspan="4">
                        <p>暂无数据。。。。</p>
                    </td>
                </tr>
            </table>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header ">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">确定删除吗？</h4>
                    </div>
                    <div class="modal-body text-center">
                        <button type="button" class="btn btn-default" data-dismiss="modal" @clickq="delTr()">确定</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    new Vue({
        el: "#box",
        data: {
            arr: [
                { "uname": "小明", "age": 18 },
                { "uname": "小王", "age": 22 }
            ],
            //确认删除得到是哪个元素,
            index:"",
            //姓名
            inputa: "",
            //密码
            inputb: "",
            //判断删除全部还是删除单个1为单个，2为全部
            biaoshi:-1,
            btnBool: true,
        },
        methods: {
            add() {
                //添加
                this.arr.push({ "uname": this.inputa, "age": this.inputb });
            },
            del(num) {
                //传递想删除元素的下标把这个下标赋给index
                this.index=num;
                //点击删除单个让标识变为-1
                this.biaoshi=-1;
            },
            delTr() {
                if(this.biaoshi==-1){//删除单个
                    this.arr.splice(this.index,1);
                }else if(this.biaoshi==-2){//删除全部
                    this.arr.splice(0,this.arr.length);
                }
            },
            delAll(){//点击删除全部让标识变为-2
                this.biaoshi=-2;
            }
        },
        watch: {
            inputa() {
                if (this.inputa != "" && this.inputb != "") {
                    this.btnBool = false;
                } else {
                    this.btnBool = true;
                }
            },
            inputb() {
                if (this.inputa != "" && this.inputb != "") {
                    this.btnBool = false;
                } else {
                    this.btnBool = true;
                }
            },
        }
    })
</script>

ex2:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            font-size: 14px;
        }

        ul {
            list-style: none;
        }

        .gray {
            color: gray;
            text-decoration: line-through;
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div class="box">
        <h1>任务列表</h1>
        <p>任务总数：{{obj.length}}；还有：{{residue()}} 未完成；【<span v-on:click="del()">完成</span>】</p>
        <ul>
            <li v-for="(v,i) in obj">
                <input type="checkbox" v-model="v.style">
                <span v-bind:class="v.style?'gray':''" v-if="!v.edit" v-on:click="edit(i)">{{v.str}}</span>
                <input type="text" v-model="v.str" v-if="v.edit" v-on:blur="v.edit=!v.edit">
            </li>
        </ul>
        <input type="text" v-model="str">
        <input type="button" value="添加" v-on:click="add()">
    </div>
</body>

</html>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el: ".box",
        data: {
            obj: [
                { "str": "吃饭", "edit": false, "style": false },
                { "str": "睡觉", "edit": false, "style": false },
                { "str": "看书", "edit": false, "style": false },
                { "str": "音乐", "edit": false, "style": false },
                { "str": "唱歌", "edit": false, "style": false }
            ],
            str: "",
        },
        methods: {
            add(index) {
                this.obj.push({ "str": this.str, "edit": false, "style": false });
                this.str = "";
            },
            edit(index) {
                this.obj[index].edit = true;
            },
            residue() {
                var i = 0;
                this.obj.forEach((v) => {
                    if (v.style == false) {
                        i++
                    }
                })

                return i;
            },
            del() {
                var arr = this.obj;
                this.obj = [];
                for(var i=0; i<arr.length; i++){
                    if(arr[i].style==false){
                        this.obj.push(arr[i]);
                    }
                }
            }
        }
    })

</script>

素描本里的男子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue从入门到放弃——（3）vue基础练习

Vue基础练习$event事件对象【扩展】事件对象语法：<div @click=“fn(美元符号+event)”>中，$event为事件对象作用：记录事件相关的信息注：函数传参必须写$event<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
复制链接

扫一扫