Vue.js Vue Js立即添加事件侦听器触发器

我使用onclick函数在单击时向父类添加一个事件列表器，它会立即触发

<button v-on:click="greet">Try it</button>

“st容器”是覆盖按钮的父类

函数

this.bodyClickFn（）立即开火吗

<div class="st-container">
 .
 .
<button v-on:click="greet">Try it</button>
 .
 .
</div>


.
.
试试看
.
.

这是整个vue文件

<template>
    <div>
        <div id="st-container" class="st-container">
            <!--    
                example menus  st-effect-11 st-menu-open
                these menus will be on top of the push wrapper
            -->

            <nav class="st-menu st-effect-11" id="menu-11">
                <h2 class="icon icon-lab">Sidebar</h2>
                <ul>
                    <li>
                        <router-link class="link" :to="{ name: 'home' }">Home</router-link>
                    </li>
                    <li>
                        <router-link class="link" :to="{ name: 'hello' }">Hello World</router-link>
                    </li>

                    <li>
                        <router-link class="link" :to="{ name: 'hello' }">Hello World</router-link>
                    </li>
                    <li>
                        <a href="/main/hello">Hello World</a>
                    </li>
                </ul>
            </nav>

            <!-- content push wrapper -->
            <div class="st-pusher" style="height: 90vh">
                <!--    
                    example menus 
                    these menus will be under the push wrapper
                -->

                <div class="st-content">
                    <!-- this is the wrapper for the content -->
                    <div class="st-content-inner">
                        <!-- extra div for emulating position:fixed of the menu -->
                        <!-- Top Navigation -->

                        <header class="codrops-header">
                            <h1>Sidebar Transitions <span>Transition effects for off-canvas views</span></h1>
                        </header>
                        <div class="main clearfix">
                            <div id="st-trigger-effects" class="column">
                                <button data-effect="st-effect-1">Slide in on top</button>
                                <button data-effect="st-effect-2">Reveal</button>
                                <button data-effect="st-effect-3">Push</button>
                                <button data-effect="st-effect-4">Slide along</button>
                                <button data-effect="st-effect-5">Reverse slide out</button>
                                <button data-effect="st-effect-6">Rotate pusher</button>
                                <button data-effect="st-effect-7">3D rotate in</button>
                                <button data-effect="st-effect-8">3D rotate out</button>
                                <button data-effect="st-effect-9">Scale down pusher</button>
                                <button data-effect="st-effect-10">Scale Up</button>
                                <button data-effect="st-effect-11">Scale &amp; rotate pusher</button>
                                <button data-effect="st-effect-12">Open door</button>
                                <button data-effect="st-effect-13">Fall down</button>
                                <button data-effect="st-effect-14">Delayed 3D Rotate</button>

                            </div>
                            <router-view></router-view>
                            <button v-on:click="greet">Try it</button>
                            <h1>food</h1>
                            <h1>food</h1>
                            <h1>food</h1>
                            <h1>food</h1>
                            <h1>food</h1>
                            <h1>food</h1>
                            <h1>food</h1>
                            <h1>food</h1>
                            <h1>food</h1>
                            <div class="column">
                                <p>Sidebar menus or off-canvas navigations can be revealed in many creative ways.</p>
                                <p>Here is some inspiration for showing them in style using CSS transitions.</p>
                            </div>
                            <div class="info">
                                <p>If you enjoyed this demo you might also like:</p>
                                <p><a href="http://tympanus.net/Development/HeaderEffects/">On Scroll Header Effects</a></p>
                                <p><a href="http://tympanus.net/Development/PageTransitions/">A Collection of Page Transitions</a></p>
                            </div>
                        </div><!-- /main -->
                    </div><!-- /st-content-inner -->
                </div><!-- /st-content -->
            </div><!-- /st-pusher -->
        </div>
    </div>
</template>
<script>
export default {
  methods: {
    greet: function(e) {
      document
        .getElementById("st-container")
        .setAttribute("class", "st-container st-effect-11 st-menu-open");

      document.getElementById("st-container").addEventListener("click", function() {
        this.bodyClickFn();
      }.bind(this));
    },
    resetMenu: function() {
      document.getElementById("st-container");
    },
    bodyClickFn: function() {
      console.log("asdasda");
      this.resetMenu();

      document
        .getElementById("st-container")
        .removeEventListener("click", this.bodyClickFn);
      document
      .getElementById("st-container")
      .addEventListener("click", this.bodyClickFn);
    }
  }
};
</script>





<style lang="css" scoped>
*,
*:after,
*::before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body,
.st-container,
.st-pusher,
.st-content {
  height: 100%;
}

.st-content {
  overflow-y: scroll;
  background: #f3efe0;
}

.st-content,
.st-content-inner {
  position: relative;
}

.st-container {
  position: relative;
  overflow: hidden;
}

.st-pusher {
  position: relative;
  left: 0;
  z-index: 99;
  height: 100%;
  perspective: 1000px;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.st-pusher::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  background: rgba(0, 0, 0, 0.2);
  content: "";
  opacity: 0;
  -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

.st-menu-open .st-pusher::after {
  width: 100%;
  height: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.st-menu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  visibility: visible;
  width: 300px;
  height: 100%;
  background: #48a770;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.st-menu::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  content: "";
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.st-menu-open .st-menu::after {
  width: 0;
  height: 0;
  opacity: 0;
  -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

/* content style */

.st-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-menu h2 {
  margin: 0;
  padding: 1em;
  color: rgba(0, 0, 0, 0.4);
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
  font-weight: 300;
  font-size: 2em;
}

.st-menu ul li a {
  display: block;
  padding: 1em 1em 1em 1.2em;
  outline: none;
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
  color: #f3efe0;
  text-transform: uppercase;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
  letter-spacing: 1px;
  font-weight: 400;
  -webkit-transition: background 0.3s, box-shadow 0.3s;
  transition: background 0.3s, box-shadow 0.3s;
}

.st-menu ul li:first-child a {
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2), inset 0 1px rgba(0, 0, 0, 0.2);
}

.st-menu ul li a:hover {
  background: rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0);
  color: #fff;
}

.st-effect-11.st-container {
  -webkit-perspective: 1500px;
  perspective: 1500px;
}

.st-effect-11 .st-pusher {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.st-effect-11.st-menu-open .st-pusher {
  -webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);
  transform: translate3d(100px, 0, -600px) rotateY(-20deg);
}

.st-effect-11.st-menu {
  opacity: 1;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.st-effect-11.st-menu-open .st-effect-11.st-menu {
  visibility: visible;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.st-effect-11.st-menu::after {
  display: none;
}
</style>


边栏


家


你好，世界


你好，世界




侧边栏过渡用于非画布视图的过渡效果
在顶部滑入
揭示
推
滑行
反向滑出
旋转推进器
三维旋转
三维旋转输出
缩尺推进器
放大
规模及；旋转推进器
开门
跌倒
延迟三维旋转
试试看
食物
食物
食物
食物
食物
食物
食物
食物
食物
边栏菜单或非画布导航可以以许多创造性的方式显示

下面是一些使用CSS转换以风格显示它们的灵感

如果您喜欢此演示，您可能还会喜欢：



导出默认值{
方法：{
问候：功能（e）{
文件
.getElementById（“st容器”）
.setAttribute（“类”，“st容器st-effect-11 st菜单打开”）；
document.getElementById（“st容器”）.addEventListener（“单击”，函数）（）{
这个。body clickfn（）；
}.约束（这个）；
},
重置菜单：函数（）{
document.getElementById（“st容器”）；
},
body clickfn:函数（）{
控制台日志（“asdasda”）；
这是resetMenu（）；
文件
.getElementById（“st容器”）
.removeEventListener（“单击”，此.Body单击fn）；
文件
.getElementById（“st容器”）
.addEventListener（“单击”，此.Body单击fn）；
}
}
};
*,
*：之后，
*：：之前{
-moz框大小：边框框；
框大小：边框框；
}
html，
身体
.st货柜公司，
圣普什先生，
.st内容{
身高：100%；
}
.st内容{
溢出y：滚动；
背景#f3efe0；
}
.st内容，
.st内容内部{
位置：相对位置；
}
圣集装箱{
位置：相对位置；
溢出：隐藏；
}
圣普舍酒店{
位置：相对位置；
左：0；
z指数：99；
身高：100%；
透视图：1000px；
-webkit转换：-webkit转换0.5s；
转变：转变0.5s；
}
圣普什：之后{
位置：绝对位置；
排名：0；
右：0；
宽度：0；
身高：0；
背景：rgba（0,0,0,0.2）；
内容：“；
不透明度：0；
-webkit过渡：不透明度0.5s，宽度0.1s 0.5s，高度0.1s 0.5s；
过渡：不透明度0.5s，宽度0.1s 0.5s，高度0.1s 0.5s；
}
.st菜单打开。st推送器：：之后{
宽度：100%；
身高：100%；
不透明度：1；
-webkit转换：不透明度0.5s；
过渡：不透明度0.5s；
}
圣菜单{
位置：绝对位置；
排名：0；
左：0；
z指数：100；
能见度：可见；
宽度：300px；
身高：100%；
背景#48a770；
-webkit过渡：所有0.5s；
过渡：均为0.5s；
}
.st菜单：：之后{
位置：绝对位置；
排名：0；
右：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.2）；
内容：“；
不透明度：1；
-webkit转换：不透明度0.5s；
过渡：不透明度0.5s；
}
.st菜单打开。st菜单：：之后{
宽度：0；
身高：0；
不透明度：0；
-webkit过渡：不透明度0.5s，宽度0.1s 0.5s，高度0.1s 0.5s；
过渡：不透明度0.5s，宽度0.1s 0.5s，高度0.1s 0.5s；
}
/*内容风格*/
圣菜单{
保证金：0；
填充：0；
列表样式：无；
}
.st菜单h2{
保证金：0；
填充：1em；
颜色：rgba（0,0,0,0.4）；
文本阴影：0 1pxRGBA（0,0,0,0.1）；
字体大小：300；
字号：2em；
}
圣菜单酒店{
显示：块；
填料：1米1米1米1.2米；
大纲：无；
盒影：插入0-1pxRGBA（0,0,0,0.2）；
颜色：#f3efe0；
文本转换：大写；
文本阴影：0 1px rgba（255、255、255、0.1）；
字母间距：1px；
字体大小：400；
-webkit过渡：背景0.3s，框阴影0.3s；
过渡：背景0.3s，框影0.3s；
}
第一个孩子{
框阴影：插入0-1pxRGBA（0,0,0,0.2），插入0 1pxRGBA（0,0,0,0.2）；
}
.st菜单ul li a：悬停{
背景：rgba（0,0,0,0.2）；
盒影：插入0-1pxRGBA（0,0,0,0）；
颜色：#fff；
}
.st-effect-11.st-container{
-webkit透视图：1500px
<template>
    <div>
        <div id="st-container" class="st-container">
            <!--    
                example menus  st-effect-11 st-menu-open
                these menus will be on top of the push wrapper
            -->

            <nav class="st-menu st-effect-11" id="menu-11">
                <h2 class="icon icon-lab">Sidebar</h2>
                <ul>
                    <li>
                        <router-link class="link" :to="{ name: 'home' }">Home</router-link>
                    </li>
                    <li>
                        <router-link class="link" :to="{ name: 'hello' }">Hello World</router-link>
                    </li>

                    <li>
                        <router-link class="link" :to="{ name: 'hello' }">Hello World</router-link>
                    </li>
                    <li>
                        <a href="/main/hello">Hello World</a>
                    </li>
                </ul>
            </nav>

            <!-- content push wrapper -->
            <div class="st-pusher" style="height: 90vh">
                <!--    
                    example menus 
                    these menus will be under the push wrapper
                -->

                <div class="st-content">
                    <!-- this is the wrapper for the content -->
                    <div class="st-content-inner">
                        <!-- extra div for emulating position:fixed of the menu -->
                        <!-- Top Navigation -->

                        <header class="codrops-header">
                            <h1>Sidebar Transitions <span>Transition effects for off-canvas views</span></h1>
                        </header>
                        <div class="main clearfix">
                            <div id="st-trigger-effects" class="column">
                                <button data-effect="st-effect-1">Slide in on top</button>
                                <button data-effect="st-effect-2">Reveal</button>
                                <button data-effect="st-effect-3">Push</button>
                                <button data-effect="st-effect-4">Slide along</button>
                                <button data-effect="st-effect-5">Reverse slide out</button>
                                <button data-effect="st-effect-6">Rotate pusher</button>
                                <button data-effect="st-effect-7">3D rotate in</button>
                                <button data-effect="st-effect-8">3D rotate out</button>
                                <button data-effect="st-effect-9">Scale down pusher</button>
                                <button data-effect="st-effect-10">Scale Up</button>
                                <button data-effect="st-effect-11">Scale &amp; rotate pusher</button>
                                <button data-effect="st-effect-12">Open door</button>
                                <button data-effect="st-effect-13">Fall down</button>
                                <button data-effect="st-effect-14">Delayed 3D Rotate</button>

                            </div>
                            <router-view></router-view>
                            <button v-on:click="greet">Try it</button>
                            <h1>food</h1>
                            <h1>food</h1>
                            <h1>food</h1>
                            <h1>food</h1>
                            <h1>food</h1>
                            <h1>food</h1>
                            <h1>food</h1>
                            <h1>food</h1>
                            <h1>food</h1>
                            <div class="column">
                                <p>Sidebar menus or off-canvas navigations can be revealed in many creative ways.</p>
                                <p>Here is some inspiration for showing them in style using CSS transitions.</p>
                            </div>
                            <div class="info">
                                <p>If you enjoyed this demo you might also like:</p>
                                <p><a href="http://tympanus.net/Development/HeaderEffects/">On Scroll Header Effects</a></p>
                                <p><a href="http://tympanus.net/Development/PageTransitions/">A Collection of Page Transitions</a></p>
                            </div>
                        </div><!-- /main -->
                    </div><!-- /st-content-inner -->
                </div><!-- /st-content -->
            </div><!-- /st-pusher -->
        </div>
    </div>
</template>
<script>
export default {
  methods: {
    greet: function(e) {
      document
        .getElementById("st-container")
        .setAttribute("class", "st-container st-effect-11 st-menu-open");

      document.getElementById("st-container").addEventListener("click", function() {
        this.bodyClickFn();
      }.bind(this));
    },
    resetMenu: function() {
      document.getElementById("st-container");
    },
    bodyClickFn: function() {
      console.log("asdasda");
      this.resetMenu();

      document
        .getElementById("st-container")
        .removeEventListener("click", this.bodyClickFn);
      document
      .getElementById("st-container")
      .addEventListener("click", this.bodyClickFn);
    }
  }
};
</script>





<style lang="css" scoped>
*,
*:after,
*::before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body,
.st-container,
.st-pusher,
.st-content {
  height: 100%;
}

.st-content {
  overflow-y: scroll;
  background: #f3efe0;
}

.st-content,
.st-content-inner {
  position: relative;
}

.st-container {
  position: relative;
  overflow: hidden;
}

.st-pusher {
  position: relative;
  left: 0;
  z-index: 99;
  height: 100%;
  perspective: 1000px;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.st-pusher::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  background: rgba(0, 0, 0, 0.2);
  content: "";
  opacity: 0;
  -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

.st-menu-open .st-pusher::after {
  width: 100%;
  height: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.st-menu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  visibility: visible;
  width: 300px;
  height: 100%;
  background: #48a770;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.st-menu::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  content: "";
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.st-menu-open .st-menu::after {
  width: 0;
  height: 0;
  opacity: 0;
  -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

/* content style */

.st-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-menu h2 {
  margin: 0;
  padding: 1em;
  color: rgba(0, 0, 0, 0.4);
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
  font-weight: 300;
  font-size: 2em;
}

.st-menu ul li a {
  display: block;
  padding: 1em 1em 1em 1.2em;
  outline: none;
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
  color: #f3efe0;
  text-transform: uppercase;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
  letter-spacing: 1px;
  font-weight: 400;
  -webkit-transition: background 0.3s, box-shadow 0.3s;
  transition: background 0.3s, box-shadow 0.3s;
}

.st-menu ul li:first-child a {
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2), inset 0 1px rgba(0, 0, 0, 0.2);
}

.st-menu ul li a:hover {
  background: rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0);
  color: #fff;
}

.st-effect-11.st-container {
  -webkit-perspective: 1500px;
  perspective: 1500px;
}

.st-effect-11 .st-pusher {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.st-effect-11.st-menu-open .st-pusher {
  -webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);
  transform: translate3d(100px, 0, -600px) rotateY(-20deg);
}

.st-effect-11.st-menu {
  opacity: 1;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.st-effect-11.st-menu-open .st-effect-11.st-menu {
  visibility: visible;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.st-effect-11.st-menu::after {
  display: none;
}
</style>

<div @click="bodyClickFn" id="st-container" class="st-container" :class="{'st-effect-11': clickable, 'st-menu-open': clickable}" ref="container">

<button v-on:click.stop="greet">Try it</button>

  data()
  {
    return {
      clickable: false
    }
  },
  methods: {
    greet: function(e) {
      this.clickable = true
    },
    resetMenu: function() {
      this.clickable = false
    },
    bodyClickFn: function() {
      if (!this.clickable)
      {
        return
      }
      this.resetMenu();
    }
  }