事件处理

如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event，把它传入到methods中的方法中。

在Vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有：

.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡

.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）

.capture：与事件冒泡的方向相反，事件捕获由外到内

.self：只会触发自己范围内的事件，不包含子元素

.once：只会触发一次

.prevent取消默认事件

.prevent等同于JavaScript的event.preventDefault()，用于取消默认事件。比如我们页面的<a href="#">标签，当用户点击时，通常在浏览器的网址列出#：

.capture 捕获事件

捕获事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从外至内父节点-》子节点的点击事件

.stop 防止事件冒泡

冒泡事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从内至外子节点-》父节点的点击事件

防止冒泡事件的写法是：在点击上加上.stop相当于在每个方法中调用了等同于event.stopPropagation()，点击子节点不会捕获到父节点的事件

.self

修饰符.self只会触发自己范围内的事件，不会包含子元素。

<div id="app"> 
　　<div class="outeer" @click.self="outer"> 
　　　　<div class="middle" @click.self="middle"> 
　　　　　　<button @click.stop="inner">点击我(^_^)</button>
 　　　　</div>
 　　</div> 
</div>

.once 只执行一次点击

如果我们在@click事件上添加.once修饰符，只要点击按钮只会执行一次。

 <script src="./js/vue.js"></script>
    <style>
        .inner{
            height:100px;
            width:100px;
        }
        
        .red{
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div :style="{width:200+'px', height:200+'px', 'background-color':'gray'}" @click.capture="click1">
            <div :class="['inner','red']" @click.self.stop="click2">
                <button @click.stop="click3">按钮</button>
            </div>
        </div>

        <form action="" @submit.prevent="submit">
            <input type="text" name="username">
            <input type="reset" value="重置">
            <input type="submit" value="提交">
        </form>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               
               },
               merhods:{
                click1(){
                   console.log("200")
               },
               click2(){
                   console.log("100")
               },
               click3(){
                   console.log("btn")
               },
               submit(){
                   console.log("我要自己提交，不要你处理")
               }
               }
        })
    </script>
    </body>

关于class：

<style>
        .h{
            font-size: 36px;
        }
        .b{
            font-weight: bolder;
        }
        .i{
            font-style: initial;
        }
        .u{
            text-decoration: underline;
        }
    </style>
    <script src="./js/vue.js"></script>
<body>
    <div id="app">
        <!--{类名：true或false}-->
        <p :class="{u:u, i:true, h:1}">段落1</p>
        <!--数组:变量或常量的组合-->
        <p :class="[h,b,'u']">段落2</p>
        <p :class="[true?h:'u']">段落3</p>
        <!-- <p :class="[{h:true}]">段落4</p> -->
        <p :class="[{u:u},h]">段落4</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               u:true,
               h:"h",
               b:"b"
            }
        })
    </script>
</body>

运行如下:

%APK9I%EP8W@J}DT3XRZM.png

关于style：

<body>
    <div id="app">
        <p :style="{'font-size':20+'px', backgroundColor:'red'}">段落</p>
        <!-- <p :style="{'font-size':20, backgroundColor:'blue'}">段落</p> -->
        <p :style="{transform:'rotate(7deg)'}">段落</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
               
            }
        })
    </script>
</body>