前端Vue专辑Vue.jsVue.js专区

Vue基础（一）--事件和属性

2019-10-28  本文已影响0人  程序员大佬超

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Hello World！

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，如下：

<div id="content">
  {{ message }}
</div>

var app = new Vue({
  el: '#content',
  data: {
    message: 'Hello World!'
  }
})

运行结果：Hello World!

事件和属性

1、事件

1.1 事件简写

v-on:click="" 的简写方式：@click
v-slot 可以缩写为：#

1.2 事件对象$event

包含事件相关信息、如事件源、事件类型、偏移量（target、type、offset）

1.3 事件冒泡

阻止事件冒泡：
① 原生js方式，依赖于事件对象（e.stopPropagation()）

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">事件冒泡</h1>
        </header>
        <div class="mui-content" id="content">
            <div @click="printf()">
                <div @click="print()">
                    <div @click="show($event)">click me</div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="../js/vue.js">
        </script>
        <script src="../js/mui.min.js"></script>
        <script type="text/javascript">
            var vm=new Vue({
                el:"#content",
                data:{
                    
                },methods:{
                    printf:function(){
                        console.log("printf")
                    },
                    print:function(){
                        console.log("print")
                    },
                    show:function(e){
                        console.log("show");
                        console.log(e.target.innerHTML);//DOM对象
                        e.stopPropagation();//阻止事件冒泡(原生js方式)
                    }
                }
            })
            mui.init()
        </script>
    </body>

</html>

② Vue方式，不依赖于事件对象
@click.stop

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">事件冒泡</h1>
        </header>
        <div class="mui-content" id="content">
            <div @click="printf()">
                <div @click="print()">
                    <div @click.stop="show()">click me</div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="../js/vue.js">
        </script>
        <script src="../js/mui.min.js"></script>
        <script type="text/javascript">
            var vm=new Vue({
                el:"#content",
                data:{
                    
                },methods:{
                    printf:function(){
                        console.log("printf")
                    },
                    print:function(){
                        console.log("print")
                    },
                    show:function(){
                        console.log("show")
                    }
                }
            })
            mui.init()
        </script>
    </body>

</html>
1.4 事件默认行为

阻止事件默认行为
a)原生js方式（e.preventDefault()）

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">阻止默认事件</h1>
        </header>
        <div class="mui-content" id="content">
            <a href="#" @click="lianjie($event)">我是一个链接，点我</a>
        </div>
        <script type="text/javascript" src="../js/vue.js">
        </script>
        <script src="../js/mui.min.js"></script>
        <script type="text/javascript">
            var vm=new Vue({
                el:"#content",
                data:{
                    
                },methods:{
                    lianjie:function(e){
                        console.log("lianjie");
                        e.preventDefault();//阻止默认事件(原生js方式)
                    }
                }
            })
            mui.init()
        </script>
    </body>

</html>

b)Vue方式
@click.prevent

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">阻止默认事件</h1>
        </header>
        <div class="mui-content" id="content">
            <a href="#" @click.prevent="lianjie()">我是一个链接，点我</a>
        </div>
        <script type="text/javascript" src="../js/vue.js">
        </script>
        <script src="../js/mui.min.js"></script>
        <script type="text/javascript">
            var vm=new Vue({
                el:"#content",
                data:{
                    
                },methods:{
                    lianjie:function(e){
                        console.log("lianjie");
                    }
                }
            })
            mui.init()
        </script>
    </body>

</html>
1.5 键盘事件
1.6 事件修饰符
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

2. 属性

2.1 属性绑定和属性简写

v-bind 用于属性绑定， v-bind:属性=""
属性的简写：
v-bind:属性="" 简写为 :属性=""

2.2 class和style属性

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
如下demo所示：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
        <style>
            .aa{
                color: red;
            }
            .bb{
                background: #007AFF;
            }
            .cc{
                font-size: 20px;
            }
        </style>
    </head>

    <body>
        <div class="mui-content" id="content">
            <!-- 
             class属性
             -->
            <!-- <div :class="aa">hello vue</div> --><!-- 这种方式不可以，Vue的属性绑定不能直接使用css样式 -->
            
            <!-- 方式1：变量形式 -->
            <div :class="class1">hello vue</div>
            
            <!-- 方式2：数组形式，同时引用多个 -->
            <div :class="[class1,class2]">hello vue</div>
            
            <!-- 方式3：json形式，常用！！！ -->
            <div :class="{aa:false,bb:true,cc:num>4}">hello vue</div>
            
            <!-- 
             style属性
             -->
            <div :style="style1">hello vue</div>
            <div :style="[style1,style2]">hello vue</div>
        </div>
        <script src="../js/mui.min.js"></script>
        <script src="../js/vue.js"></script>
        <script type="text/javascript">
            mui.init();
            var vm=new Vue({
                el:"#content",
                data:{
                    class1:"aa",
                    class2:"bb",
                    num:5,
                    style1:{color:'green',fontSize:'30px'},
                    style2:{backgroundColor:'gray'}
                }
            })
        </script>
    </body>

</html>

原创不易，转载请注明出处：https://www.jianshu.com/p/429191c4d9ca

上一篇 下一篇

猜你喜欢

热点阅读