v-on:click,v-on:keyout高阶用法

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <script src="../../vue.js/vue.js">script>
  head>
  <body>
    
      <div id="app">
        <h3 v-on:click="xd">fdsafash3>
        <a href="https://xdclass.net" v-on:click="xd">跳转到小滴课堂a>
        
        <a href="https://xdclass.net" v-on:click.prevent="xd">跳转到小滴课堂a>
        <br>

        
        <div v-on:click="xd">
          现在是冒泡时刻
          <a href="https://xdclass.net" v-on:click="xd">跳转到小滴课堂a>
        div>
        <br>

        
        <div v-on:click="xd">现在是阻止冒泡时刻
          <a href="https://xdclass.net" v-on:click.stop="xd">跳转到小滴课堂a>
        div>
        <br>

        
        <div v-on:click="xd">
          不冒泡也不跳转
          <a href="https://xdclass.net" v-on:click.prevent.stop="xd">a>
        div>
        <br>

        
        <div>
          <a href="hhttps://xdclass.net" v-on:click.once="xd">a>
        div>
        <br>
        

        <h3 v-on:keyout.enter='change'>键盘事件 h3>
        <input type="这是一个说明">
        <br>

      div>    
      <script>
       Vue.config.productionTip = false
       new Vue(
        {
          el:"#app",
          data:{
            name:"小滴课堂",
          },
          methods:{
            // 事件取到了标签中的值,相当于传入了一个方法,该方法能够取到该标签中的值
           xd(event){
              alert(event.target.innerText);
            },
            change(){
              console.log("键盘事件当enter时才触发")
            }
          }

        }
       )
        
      script>
  body>
html>

你可能感兴趣的:(前端,javascript,前端,vue.js)