【Vue】Vue基础知识点介绍（入门级，简单易懂）——day02

最新推荐文章于 2023-07-20 01:12:46 发布

前端小媛

最新推荐文章于 2023-07-20 01:12:46 发布

阅读量361

点赞数 4

分类专栏： Vue 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_59012240/article/details/126962054

版权

Vue 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

大家好，从今天开始，会每天分享vue学习的知识点，一起加油~

1、事件

1.1监听事件

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。

<button @click="counter++">{{counter}}</button>
<button v-on:click="counter--">{{counter}}</button>


new Vue({
  data() {
    return {   counter: 1   }
  }
})

1.2事件参数

事件响应函数

<body>
    <div id="app">
        <button @click="num++">{{num}}</button>
        <button @click="sayNum">{{num}}</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    num: 1
                }
            },
            methods: {
                sayNum() {
                    this.num++;
                    alert(this.num);
                }
                //等价于 sayNum:function(){}
            }

        })

        // this 指代 new Vue创建的实例
        // vue data 采用函数返回的形式
        // vue 实例直接数据隔离相互不影响
    </script>
</body>

事件函数

<body>
    <div id="app">
        <button @click="num++">{{num}}</button>
        <button @click="sayNum">{{num}}</button>

        <button @click="sayNum(2)">点击加2</button>
        <!-- (5)实际参数：实参 -->
        <button @click="sayNum(5)">点击加5</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    num: 1
                }
            },
            methods: {
                //(n) 形式上的参数：形参
                sayNum(n) {
                    this.num += n;
                    alert(this.num);
                }

            }

        })

    </script>
</body>

事件的特殊函数

<body>
    <div id="app">
        <!-- 默认不写括号也会传入事件$event
        写括号 $event 固定写法 ，代表事件对象 -->
        <h1 @click="sayNum($event,2)">事件的特殊参数$event</h1>
        <button @click="sayNum($event,3)">{{num}}</button>

    </div>

    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    num: 1
                }
            },
            methods: {
                //(n) 形式上的参数：形参
                sayNum(e,n) {
                    // e 代表 事件对象
                    //  e.target 代表被点击的元素 ，innerText 文本内容
                    alert(e.target.innerText);
                    this.num += n;
                }

            }

        })


    </script>
</body>

1.3事件修饰符

v-on 事件绑定指令 :click 事件参数 .once修饰符
.prevent修饰符阻止默认事件
.once 只响应事件一次
.stop阻止事件冒泡修饰符可以多个

<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>Document</title>
    <style>
        .parent {
            padding: 30px;
            background-color: bisque;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>时间修饰符</h1>
        <div class="parent" @click="doHd">
            <button @click.stop.once="say">表白</button>
            <a href="https://wwww.baidu.com" @click.prevent.stop="doit">我要去百度</a>
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                }
            },
            methods: {
                doit() {
                    alert("有问题找百度")
                },
                doHd() {
                    alert("儿砸，想造反？？")
                },
                say() {
                    alert("俺要去表白，别管俺")
                }
            }

        })

    </script>
</body>

1.4按键修饰符

在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 `v-on` 在监听键盘事件时添加按键修饰符。

.enter 回车
.space空格
.del删除
.esc 取消
.up上
.down下
.left左
.right右

<body>
    <!-- 按键修饰符 -->
    <div id="app">
        <p>按键修饰符</p>
        <p> .enter 回车 space空格 del删除 esc 取消 up上 down下 left左 right右</p>
        <input type="text" @keyup.enter="list.unshift($event.target.value);$event.target.value=''">
        <!-- 遍历列表 -->
        <div class="item" v-for="item in list" :key="item">{{item}}</div>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            methods: {
            },
            data() {
                return {
                    //定义列表数据
                    list: [
                        "学习Vue",
                        "学习uni-app"
                    ]
                }
            }


        })
        //函数执行返回对象，有局部作用域
    </script>
</body>

1.5系统修饰符

按下相应按键时才触发鼠标或键盘事件的监听器。

.enter 回车
.ctrl
.alt
.shift
.meta (⌘或Windows 徽标键 ⊞)
.exact 精确

1.6鼠标修饰符

下面修饰符会限制处理函数仅响应特定的鼠标按钮

.left
.right
.middle

2、表单

2.1单行和多行

<body>
    <div id="root">

        <input type="text" v-model="msg">
        <p>{{msg}}</p>

        <textarea name="" id="" v-model="text"></textarea>
        <p style="white-space: pre-line;">{{text}}</p>
        <p>{{str}}</p>
        <input type="text" v-model="str">
        <br>
        <!-- v-model="str" 是 :value="str" @input="str=$event.target.value" 简写  -->
        <input type="text" :value="str" @input="str=$event.target.value">
    </div>

    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: "#root",
            data() {
                return {
                    msg: "",
                    text: "",
                    str: ""
                }
            }
        })
    </script>
</body>

2.2多选和单选

<body>
    <div id="root">
        <h1>单个checkbox</h1>
        <input type="checkbox" name="" id="" v-model="select">{{select}}

        <h2>单个checkbox 案例</h2>
        <input type="checkbox" name="" id="" v-model="select">同意条款
        <button v-bind:disabled="!select">注册</button>
        <!-- 取反 -->

        <h1>多个checkbox</h1>
        <input type="checkbox" value="看书" id="" v-model="fav">看书 <br>
        <input type="checkbox" value="唱歌" id="" v-model="fav">唱歌 <br>
        <input type="checkbox" value="跳舞" id="" v-model="fav">跳舞 <br>
        <input type="checkbox" value="游泳" id="" v-model="fav">游泳 <br>
        <p>{{fav}}</p>

        <h1>单选radio---{{sex}}</h1>
        <input type="radio" name="sex" id="" v-model="sex" value="男">男
        <input type="radio" name="sex" id="" v-model="sex" value="女">女
        <input type="radio" name="sex" id="" v-model="sex" value="保密">保密
    </div>

    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: "#root",
            data() {
                return {
                    select: true,
                    fav: [],
                    sex: "男"
                }

            }
        })


    </script>

2.3下拉select

<body>
    <div id="root">
        
        <h1>select--{{sel}}</h1>
        <p>小章的文凭是：</p>
        <select name="" id="" v-model="sel">
            <option value="胎教">胎教</option>
            <option value="学前班">学前班</option>
            <option value="小学">小学</option>
            <option value="初中">初中</option>
        </select>

    </div>

    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: "#root",
            data() {
                return {
                    sel: "胎教",  // 默认下拉框 选项
                }

            }
        })


    </script>

2.4表单修饰符

.number 转换为数值

当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值
所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。

.lazy 将input事件切换成change事件

.lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上

<body>
    <div id="app">
        <!-- .number字符串转数字  .lazy 更新视图触发事件有input 变为 change 事件 -->
        <input type="text" v-model.number="num">
        <p>{{1+num}}</p>
        <input type="text" v-model.lazy="str">
        <p>{{str}}</p>
    </div>

    <script>
        new Vue({
            el: "#app",

            data() {
                return {
                    num: 1,
                    str: "快点学完找工作~"
                }
            }
        })
    </script>
</body>

3、Vue操作

让指令连接数据与dom
业务操作数据，实现自动更新dom

4、computed计算

计算属性是基于它们的响应式依赖进行缓存的
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
模板中放入太多的逻辑会让模板过重且难以维护使用计算属性可以让模板更加的简洁
从现有数据计算出新的数据（只读）

<body>
    <div id="app">
        <h1>计算computed从现有数据计算出新的数据（只读）</h1>
        <input type="text" v-model.number="n1">
        <input type="text" v-model.number="n2">
        <p>{{n3}}</p>
        <p>{{str}}</p>
        <input type="text" v-model="str">
        <p>{{rstr}}</p>
    </div>

    <script>
        new Vue({
            el: "#app",
            computed: {
                "n3": function () {
                    return this.n1 + this.n2;
                },
                rstr() {
                    return this.str.split('').reverse().join('')
                }
            },
            data() {
                return {
                    n1: 1,
                    n2: 2,
                    str: "国庆要来了呀"
                }
            }

        })
    </script>
</body>

5、to do list 案例

案例代码


<body>
    <div id="app">
        <input type="text" @keyup.enter="addItem">
        <!-- 遍历数据list -->
        <h3>未完成{{undolist.length}}</h3>
        <div v-for="item in undolist" v-bind:key="item.title">
            <input type="checkbox" v-model="item.done">
            <span>{{item.title}}</span>
            <button @click="delItem(item)">x</button>
        </div>
        <h3>已经完成{{donelist.length}}</h3>
        <div v-for="item in donelist" v-bind:key="item.title">
            <input type="checkbox" v-model="item.done">
            <span>{{item.title}}</span>
            <button @click="delItem(item)">x</button>
        </div>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            computed: {
                //通过计算list 算出 undolist 没有完成的列表
                undolist() {
                    return this.list.filter(item => !item.done)
                },
                donelist() {
                    return this.list.filter(item => item.done)
                },
            },
            methods: {
                //删除元素
                delItem(item) {
                    // 查找 item 在list 的下标
                    var ind = this.list.indexOf(item);
                    //进行删除
                    this.list.splice(ind, 1);
                },
                //添加元素
                addItem(e) {
                    // e.target  输入的文本框  e.target.value 文本框的值
                    this.list.unshift({ done: false, title: e.target.value })
                    // 清空文本框的内容
                    e.target.value = ""
                }
            },
            data() {
                return {
                    list: [
                        { done: true, title: "学习html" },
                        { done: true, title: "学习css" },
                        { done: true, title: "学习javascript" },
                        { done: true, title: "学习jquery" },
                        { done: true, title: "学习ajax" }
                    ]
                }
            }
        })
    </script>
</body>

代码运行结果

6.简单计算器案例（两种方法实现）

<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>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- .number字符串转数字  .lazy 更新视图触发事件有input 变为 change 事件 -->
        <input type="text" v-model.number="obj.pre" @input="calc()">
        <select name="" id="" v-model="obj.type" @change="calc()">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">×</option>
            <option value="/">÷</option>
        </select>
        <input type="text" v-model.number="obj.next" @input="calc()">=
        <span>{{obj.result}}</span>
    </div>

    <script>
        new Vue({
            el: "#app",

            data() {
                return {
                    obj: {
                        pre: 1,
                        type: "+",
                        next: 1,
                        result: 2
                    }
                }
            },
            methods: {
                // calc() {
                //     //eval把字符串当JavaScript执行
                //     this.obj.result = eval(`($(this.obj.pre))$(this.obj.type)($(this.obj.next))`)
                // 当obj.pre变化 ，next变化，type变化时候重新计算 result的值
                // }
                calc() {
                    if (this.obj.type === "+") {
                        this.obj.result = this.obj.pre + this.obj.next;
                    } else if (this.obj.type === "-") {
                        this.obj.result = this.obj.pre - this.obj.next;

                    } else if (this.obj.type === "*") {
                        this.obj.result = this.obj.pre * this.obj.next;

                    } else {
                        this.obj.result = this.obj.pre / this.obj.next;

                    }
                }
            }
        })
    </script>
</body>

今天的分享就到这里了~