初识Vue【中】

最新推荐文章于 2024-06-15 14:41:39 发布

阿新-

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量283

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/WIK_7264/article/details/122371837

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

初识Vue【中】

上篇：[初识Vue](https://blog.csdn.net/WIK_7264/article/details/122330761/).
三、事件绑定
四、生命周期
五、综合案例：便签（todo）

上篇：初识Vue.

三、事件绑定

3.3 事件绑定：this关键字

在vue中,某一个成员需要使用另一个成员,需要通过this进行引用
示例：

<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>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="点我" @Click="m1">
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '饺子八毛钱'
        },
        methods: {
            m1(){
                //获得data区域的变量
                console.info(this.msg)
                //调用另一个函数
                this.m2()
            },
            m2(){
                console.info('奶茶十三元')
            }
        },
    })
</script>

结果展示：

3.4 事件修饰符

vue 通过事件修饰符对js事件进行细节控制。

<标签 v-on:事件.修饰符=”函数”></标签>

常见的事件修饰符：

修饰符	描述
.prevent	阻止浏览器默认行为
.stop	阻止浏览器事件冒泡
.once	只触发1次

示例1：阻止超链接默认行为 prevent

<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>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- .prevent  阻止浏览器默认行为，也就是href中的路径不再执行  
            相当于jq中的 `javascript:void(0)` 
        -->
        <a href="http://www.czxy.com" @click.prevent="show">跳转</a>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
        },
        methods: {
            show(){
                alert('xxxxx');
            }
        },
    })
</script>

结果展示：

示例2：stop

<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>
    <script src="./js/vue.js"></script>
    <style>
       .outer{
           background-color: red;
           height: 200px;
           width: 200px;
       }
       .inner{
           background-color: green;
           height: 100px;
           width: 100px;
       }
    </style>
</head>
<body>
    <div id="app">
        <!-- 浏览器事件冒泡：内存对应事件执行了，外层对应事件自动执行 -->
        <div class="outer" @click="outerFn">
            <!-- .stop 阻止事件冒泡 -->
            <div class="inner" @click.stop="innerFn">
                有stop
            </div>
        </div>
        <br>
        <div class="outer" @click="outerFn">
                <div class="inner" @click="innerFn">
                    无stop
                </div>
            </div>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            
        },
        methods: {
            outerFn(){
                alert('外层outer')
            },
            innerFn(){
                alert('内层inner')
            }
        },
    })
</script>

3.5 按键修饰符

vue允许为 v-on 在监听键盘事件时, 使用按键修饰符, 约束事件的触发
键盘事件: keyup和keydown

<标签 v-on:事件.修饰符=”函数” ></标签>

常见按键修饰符：

按键修饰符	描述
.enter	回车键
.tab	Tab键
.delete (捕获 “删除” 和 “退格” 键)	Backspace键或Delete键
.esc	Esc键
.space	空格键
.up	上键
down	下键
.left	左键
.right	右键
.ctrl	Ctrl键
.alt	Alt键
.shift	Shift键

示例：文本框回车触发函数

<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>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 
        鼠标左键   : 1
        鼠标右键   ：2
        鼠标中键   ：3
        backspace : 8
        ctrl      : 17
        alt       : 18
        caps lock : 20
        esc       : 27
     -->
    <div id="app">
        <!-- @keyup.13 == @keyup.enter -->
        enter: <input type="text" @keyup.13="show" v-model="msg" >
        <!-- 组合键 -->
        shift+enter: <input type="text" @keyup.16.13="show" v-model="msg2" >
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '',
            msg2: ''
        },
        methods: {
            show(){
                console.info(this.msg)
                console.info(this.msg2)
            }
        },
    })
</script>

结果演示：

四、生命周期

4.1 生命周期是什么？

Vue的生命周期, 就是Vue实例从创建到销毁的过程.
完整过程包含: 开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁
vue生命周期含8步骤（有8个沟子函数）：创建、挂载、更新、销毁
created()创建后
mounted()挂载后

4.2 生命周期流程：

vue官网上

示例：

<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>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg"> <br>
        原始数据： {{msg}}
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '嗯嗯'
        },
        beforeCreate(){
            console.info('1.创建前')
        },
        created(){
            console.info("2.创建")
        },
        beforeMount(){
            console.info('3.挂载前')
        },
        mounted(){
            console.info('4.挂载')
        },
        beforeUpdate(){
            console.info('5.更新前')
        },
        updated(){
            console.info('6.更新')
        },
        beforeDestroy(){
            console.info('7.销毁前')
        },
        destroyed(){
            console.info('8.销毁')
        }
    })
</script>

结果展示：

4.3 小结

vue生命周期中的销毁只能手动销毁.

属性名	执行时机	描述
beforeCreate	创建前	Vue实例创建时触发, 一般不做操作
created	创建后	挂载数据，绑定事件等之后，执行created函数一般可以获取初始数据
beforeMount	挂载到页面前	已经创建虚拟dom, 准备渲染
mounted	挂载到页面后	已经渲染真实dom
beforeUpdate	更新页面前
updated	更新页面后
beforeDestroy	销毁vue之前
destroyed	销毁之后

五、综合案例：便签（todo）

5.1 需求：

需求1：文本框回车，完成事项添加
需求2：在“所有事项” 下面展示所有的事项
需求3：双击事项，该事项为已完成事项
需求4：通过单选按钮组过滤事项

5.2 代码：

<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>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 
        版本2：
        需求1：文本框回车，完成事项添加
        需求2：在“所有事项” 下面展示所有的事项
        需求3：双击事项，该事项为已完成事项
        需求4：通过单选按钮组过滤事项
     -->
    <div id="app">
        <!-- 双向绑定  绑定回车添加进数组事件 -->
        <input type="text" placeholder="请输入需要完成事项" v-model="dosth" @keyup.13="add" > <br>
        <div>
                <input type="radio" value="all" name="todo" v-model="status" @change="todoFilter">全部 
                <input type="radio" :value="true" name="todo" v-model="status" @change="todoFilter">已完成 
                <input type="radio" :value="false" name="todo" v-model="status" @change="todoFilter"> 未完成 <br>
        </div>
        
        所有事项：<br>
        <!-- 版本1： 遍历数组 展示添加项   绑定双击删除事件 -->
        <!-- 版本2： 双击事项，该事项为已完成事项 -->
        <ul v-for="(item,index) in arrPart"> <!-- 版本1： @dblclick="remove(index)"-->
            <li>
                <div style="cursor:pointer"  @dblclick="change(item)">
                    {{item.item}} -----  {{item.isok? '已完成':'未完成'}}
                </div>
            </li>
        </ul>
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            dosth:'',
            arr:[],        //存放所有
            arrPart:[],    //存放部分内容： 全部、已完成、未完成
            status: 'all'  //单选状态  ： all / false / true
        },
        methods: {
            //添加
            add(){
                //添加新信息 默认未实现
                this.arr.push({
                    item:this.dosth ,
                    isok:false
                })
                //初始化
                this.dosth = ''
                // 将所有数据 添加到 显示数据数组
                this.arrPart = this.arr

               this.todoFilter()
            },
            // 版本1： 删除
            // remove(index){
            //     //arr.splice(索引，个数)
            //     this.arr.splice(index,1)
            // }
            //改变
            change(item){
                //将 isok 修改成  true
                if(item.isok == false){
                    item.isok = true 
                }
                
                this.todoFilter()
            },
            //过滤
            todoFilter(){
                //数据过滤 从 arr 过滤到  arrPart 
                this.arrPart = this.arr.filter(item=>{
                    //如果选中status值为all 说明是全部 则 直接返回
                    if(this.status == 'all'){
                        return item;
                    }else {
                        // item对象中的 isok 与 status 保持一致 
                        if(item.isok == this.status){
                           return item;
                        }
                    }
                })
            }
        }
    })
</script>