master

分支 (1)

管理

管理

master

zhinengshe
/
vue事件.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue事件</title>
  <style >
    .redC{
      color: red;
    }
    .blue{
      background-color: blue;
    }
  </style>
  <script src="js/vue.min.js"></script>
  <script>
    window.onload = function(){
      new Vue({
        el: "#box",
        data: {
          url: "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png",
          width:"110px",
          red:'redC',
          red2:'redC',
          red3: 'blue',
          jsonClass: {
            redC:true,
            blue:true

          },
          msg: "模板绑定数据"


        },
        methods: {
          show: function(ev,b){
            alert(ev.clientX)
            alert(b)
          },
          show2: function(){
            alert("div")

          },
          show3: function(ev){
            alert("input")
          //  ev.cancelBubble = true; 阻止冒泡
          },
          contextmenu: function(ev){

            // ev.preventDefault()
            // alert("默认事件")
          },
          showDown: function(ev){
            alert(ev.keyCode)
          },
          showUp: function(ev){
            alert(ev.keyCode)
          }

        }
      })
    }
  </script>
</head>

<body>
  <div id="box">
    <hr>
    事件对象
    <input type="button" name="" value="按钮" @click="show($event,12)">
    <hr>
    事件冒泡:
    <div @click="show2()">
      <input type="button" value="事件冒泡" @click.stop="show3($event)">
    </div>
    <hr>
    默认行为(默认事件)
    <input type="button" value="默认事件" @contextmenu.prevent="contextmenu($event)">
    <hr>
    键盘事件
    <input type="text" name="" value="" @keydown="showDown($event)">
    <br>
    <input type="text" name="" value="" @keyup="showUp($event)">
    <br>
    常用键码
    @keyup.enter
    @keyup.up
    @keyup.down
    @keyup.left
    @keyup.right
    <hr>
    指令

    <hr>
    属性
    <img v-bind:src="url" alt="" width="100px">
    <img :src="url" alt="" :width="width">
    <hr>
    特殊：class 、style
    <strong :class="red">文字1</strong>
    <strong :class="[red2,red3]">文字2</strong>
    <strong :class="{redC:true,blue:true}">文字2</strong>
    <strong :class="jsonClass">文字2</strong>
    <hr>
    模板：
   <input type="text" name=""  v-model="msg">
   <br>
   {{msg}}
   <br>
   {{*msg}}
   <br>
   {{{msg}}}
   <hr>
   过滤器
  </div>
</body>
</html>