Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="app">
  <h1>.stop 修飾符</h1>
  <h3>阻止點擊事件繼續向上傳播</h3>
  <div class="one" @click="out">
    <button @click.stop="inside">內層</button>
  </div>
  <hr>
  
  <h1>.prevent 修飾符</h1>
  <h3>阻止元素本身預設事件發生</h3>
  <a href="https://cn.vuejs.org/v2/api/#v-on" @click.prevent="govueAPi">我是a連結</a>
  <hr>
  
  <h1>.capture 修飾符</h1>
  <h3>即是給元素添加一個監聽器,當元素發生冒泡時,先觸髮帶有該修飾符的元素。<br>
    若有多個該修飾符,則由外而內觸發。</h3>
  <div class="one" @click="captureOne">第一層
    <div class="two" @click.capture="captureTwo">二層
      <div class="three" @click.capture="captureThree">三層
        <button  @click="captureFour">四層</button>
      </div>  
    </div>
  </div>
  <hr>
  
  <h1>.self 修飾符</h1>
  <h3>發生事件冒泡時並不觸發元素本身事件</h3>
  <div class="one"@click="selfOne">第一層
    <div class="two" @click.self="selfTwo">二層
      <div class="three" @click="selfThree">三層
        <button  @click="selfFour">四層</button>
      </div>  
    </div>
  </div> 
  <br>
  
  <h1>.once 修飾符</h1>
  <h3>元素自身事件只能使用一次,第二次點擊元素時候並不觸發事件,但是不阻止事件冒泡</h3>
  <div class="one"@click="onceOne">第一層
    <div class="two" @click="onceTwo">二層
      <div class="three" @click="onceThree">三層
        <button  @click.once="onceFour">四層</button>
      </div>  
    </div>
  </div> 
  <br>
  
</div>




              
            
!

CSS

              
                *{
  font-family: 微軟正黑體;
  color: #555;
}
.one{
  width: 250px;
  height: 250px;  
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FADBD8;
}
.two{
  width: 200px;
  height: 200px;  
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #D2B4DE;
}
.three{
  width: 150px;
  height: 150px;  
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #D6EAF8;
}
button{
  width: 80px;
  height: 40px;
  background-color: #F5CBA7;
  border: none;
  font-size: 20px;
}


              
            
!

JS

              
                var vm = new Vue({
  el: '#app',
  data: { 
    
     },
  methods:{
    //stop 修飾符
    out(){
      console.log("外層");
    },
    inside(){
      console.log("內層");
    },
    //prevent 修飾符
    govueAPi(){
      console.log('去不了vue.js的官網')
    },
    //capture修飾符 function
    captureOne(){
      console.log('第一層(最底層)')
    },
    captureTwo(){
      console.log('第二層')
    },
    captureThree(){
      console.log('第三層')
    },
    captureFour(){
      console.log('第四層')
    },
    //self
    selfOne(){
      console.log('第一層(最底層)')
    },
    selfTwo(){
      console.log('第二層')
    },
    selfThree(){
      console.log('第三層')
    },
    selfFour(){
      console.log('第四層')
    },
    //once
    onceOne(){
      console.log('第一層(最底層)')
    },
    onceTwo(){
      console.log('第二層')
    },
    onceThree(){
      console.log('第三層')
    },
    onceFour(){
      console.log('第四層')
    },
  },
})


              
            
!
999px

Console