Vuejs——事件修饰符以及v-model指令的学习

最新推荐文章于 2022-05-26 11:28:24 发布

just-so-so.

最新推荐文章于 2022-05-26 11:28:24 发布

阅读量118

点赞数

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

本文链接：https://blog.csdn.net/weixin_43911280/article/details/104458958

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

学习敲代码解释在其中

事件修饰符

<!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>
     <script src="../lib/vue.js"></script>
</head>
<style>
    .inner {
        height: 300px;
        background-color: pink;
    }
    .outer {
        padding: 40px;
        background-color: palevioletred;
    }
</style>

<body>
    <div id="app">
        <!-- <div class="inner" @click="divlHandler">
             使用 .stop 阻止冒泡 
            <input type="button" value="戳他" @click.stop="btnHandler">
        </div> -->
        <!-- 使用.prevent阻止默认行为 -->
        <!-- <a href="http://www.baidu.com" @click.prevent="linkHandler">有问题去百度</a> -->
        <!-- 使用 .capture 实现捕获触发事件-->
        <!-- <div class="inner" @click.capture="divlHandler">

           <input type="button" value="戳他" @click="btnHandler">
        </div> -->
        <!-- 使用 .self实现只点击当前元素的时候 才会触发事件处理函数 -->
        <!-- <div class="inner" @click.self="divlHandler">

            <input type="button" value="戳他" @click="btnHandler">
         </div> -->

         <!--使用 .once事件只触发一次  -->
         <!-- <a href="http://www.baidu.com" @click.once.prevent="linkHandler">有问题去百度</a> -->
         <!-- <a href="http://www.baidu.com" @click.prevent.once="linkHandler">有问题去百度</a> -->


         <!-- .stop 和.self:只会阻止自己的点击事件 区别 -->

         <!-- <div class="outer" @click="div2Handler">
            <div class="inner" @click.self="divlHandler">
                
               <input type="button" value="戳他" @click.stop="btnHandler">
           </div> 
         </div> -->

    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{},
           methods:{
            divlHandler(){
                console.log('这是触发了inner div 的点击事件')
            },
            btnHandler(){
                console.log('这是出发btn 的点击事件')
            },
            linkHandler(){
                console.log('触发了连接的点击行为')
            },
            div2Handler(){
                console.log('这是触发 out div 事件')
            }
           }
        });
    </script>
</body>

</html>

v-model指令学习代码如下

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

<body>
    <div id="app">
        <H4>{{msg}}</H4>
        <!-- v-bind只能实现数据的单项绑定 无法实现数据的双向绑定 -->
        <!-- <input type="text" v-bind:value="msg" style="width: 100px;"> -->


        <!-- 使用v-model指令，可以实现 表单元素 和model中数据的双向绑定
        v-model只能运用在表单元素input（radio,text,address,email）select checkbox textarea中 -->
        <input type="text" style="width: 100px;" v-model="msg">
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               msg:'敲代码！！！'
           },
           methods:{}
        });
    </script>
</body>

</html>

未完！！！

just-so-so.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs——事件修饰符以及v-model指令的学习

学习敲代码解释在其中事件修饰符<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...
复制链接

扫一扫