（Sjran）vue.js第二天学习-CSDN博客

本文链接：https://blog.csdn.net/qq_45506707/article/details/98950193

1.跑马灯

<!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>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
    [v-cloak]{
      display:none;
    }
  </style>
</head>
  <body>
    <div id="app">
      <input type="button" value="跑起来" @click="show">
      <input type="button" value="停住" @click="stop">
      <div>{{ msg }}</div>

    </div>

    <script>
      var vm = new Vue({
        el:'#app',
        data:{
          msg:'杭州师范大学',
          intervalId: null
        },
        methods:{
          show(){
            if(this.intervalId!=null) return;
            this.intervalId = setInterval(()=>{
            var start = this.msg.substring(0,1)
            var end = this.msg.substring(1)
            this.msg=end+start
            },400)


          },
          stop(){
              clearInterval(this.intervalId)
              this.intervalId=null
            }
          }
          


      })
    </script>
  </body>

</html>

2.事件修饰符

  <!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>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
   .inner{
     height: 150px;
     background-color: cadetblue;
   }
   .outer{
    padding:40px;
    background-color: red;
   }
  </style>
</head>
  <body>
    <div id="app">
      <div class=outer @click="outhandle">
        <div class=inner @click="divhandle">
          <input type="button" value="点我" @click.stop="btnhandle">
        </div>
      </div>
      
      <a href="http://www.baidu.com" @click.prevent="linkclick">有问题去百度</a>
      
    </div>
    <script>
      var vm = new Vue({
        el:'#app',
        data:{

        },
        methods:{
          divhandle(){
            console.log('这是触发了div的点击事件')
            
          },

          btnhandle(){
            console.log('这是触发了button的点击事件')
          },

          linkclick(){
            console.log('这是触发了超链接')
          },

          outhandle(){
            console.log('这是触发了out的点击事件')
          }

        }
      })
    </script>
  </body>
  

</html>

1.stop ：阻止冒泡
2.prevent：阻止默认事件
3.capture：捕获事件
4.self
5.once：只触发一次

v-model：<input type="text" v-model:value="msg" style="width: 100%;">
双向绑定

简易计算器：

<!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>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
   .inner{
     height: 150px;
     background-color: cadetblue;
   }
   .outer{
    padding:40px;
    background-color: red;
   }
  </style>
</head>
 <div id="app">
   <body>
   <input type="text" v-model="n1">
   <select v-model="cpt">
     <option value="+">+</option>
     <option value="-">-</option>
     <option value="*">*</option>
     <option value="/">/</option>
   </select>
   <input type="text" v-model="n2">
   <input type="button" value="=" @click="calc">
   <input type="text" v-model="result">

    <script>
      var vm =new Vue
      ({
        el:'#app',
        data:
        {
          n1:0,
          n2:0,
          result:0,
          cpt:'+'


        },
        methods:
        {
          calc(){
            /*switch(this.cpt){
              case '+':
                this.result=parseInt(this.n1)+parseInt(this.n2)
              break;
              case '-':
              this.result=parseInt(this.n1)-parseInt(this.n2)
              break;
              case '*':
              this.result=parseInt(this.n1)*parseInt(this.n2)
              break;
              case '/':
              this.result=parseInt(this.n1)/parseInt(this.n2)
              break;
            }*/
            var codestr='parseInt(this.n1)'+this.cpt+'parseInt(this.n2)'
            this.result=eval(codestr)
            
          }
        }
      })
    </script>
   </body>
 </div>
  

</html>