vue

1、冒泡与捕获：

冒泡：由内向外触发；捕获：由外向内触发

 2、修饰符

（1）.stop修饰符：阻止事件冒牌，不让他向外触发

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js" type="text/javascript"  charset="UTF-8"></script>
    </head>
    <body>
        <div id ="element1">
            <div  @click="test1">
                <span>测试1</span>
                <div  @click.stop="test2">
                  <span>测试2</span>
                </div>
              </div>
        </div>
          <script type="text/javascript">
              var vm = new Vue({
                  el : "#element1",
                  // data:{
                      
                  // },
                  methods:{
                      test1:function(){
                          console.log("click1");
                        
                      },
                      test2:function(){
                          console.log("click2");
                      }
                  }
              })
          </script>
    </body>
</html>
结果：不添加.stop会输出click2,click1，添加.stop后只显示click2

 

 （2）.capture 捕获事件，点击子节点，会从外向内触发

输出结果顺序变成：点击测试2，输出click1,click2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js" type="text/javascript"  charset="UTF-8"></script>
    </head>
    <body>
        <div id ="element1">
            <div  @click="test1">
                <span>测试1</span>
                <div  @click.stop="test2">
                  <span>测试2</span>
                </div>
              </div>
        </div>
          <script type="text/javascript">
              var vm = new Vue({
                  el : "#element1",
                  // data:{
                      
                  // },
                  methods:{
                      test1:function(){
                          console.log("click1");
                        
                      },
                      test2:function(){
                          console.log("click2");
                      }
                  }
              })
          </script>
    </body>
</html>

（3）.self只会触发自己范围内的事件，不会包含子元素

（4）.once，只要点击按钮只会执行一次

结果：无论点击多少次click2，只会在第一次点击输出 click2  ,click1 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js" type="text/javascript"  charset="UTF-8"></script>
    </head>
    <body>
        <div id ="element1">
            <div  @click.once="test1">
                <span>测试1</span>
                <div  @click.once="test2">
                  <span>测试2</span>
                </div>
              </div>
        </div>
          <script type="text/javascript">
              var vm = new Vue({
                  el : "#element1",
                  // data:{
                      
                  // },
                  methods:{
                      test1:function(){
                        
                          console.log("click1");
                        
                      },
                      test2:function(){
                        
                          console.log("click2");
                      }
                  }
              })
          </script>
    </body>
</html>

 3、表单修饰符

（1）.lazy  使用了这个修饰符将会从“input事件”变成change事件进行同步

输入信息后message不会马上同步出来，当鼠标移开或者点击其他位置时显示

<div id = "element1">
                <input v-model.lazy="message" placeholder="edit me" />
                <p>message is :{{message}}</p>
                
            </div>

（2）.number:自动将用户的输入值转为数值类型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="vue.js"  type="text/javascript"  charset="UTF-8"></script>
    </head>
    <body>
        <div id="app">
            <div id = "element1">
                <input v-model.number="message" placeholder="edit me" />
                <p>message is :{{message}}</p>
                <button type="button" @click="arry">获取当前数据类型</button>
                <br />
                <textarea v-model="message2"  placeholder="please input your message"></textarea>
                <p style="white-space: pre-line;">{{message2}}</p>
            </div>
            
            
        </div>
        <script type="text/javascript">
            var vm= new Vue({
                el:"#app",
                data:{
                    
                    message:"",
                    message2:"",
                    
                },
                methods:{
                    arry:function(){
                        alert(typeof this.message)
                    }
                }
            })
        </script>
        
    </body>
</html>

输出：当输入数字时，message的类型为number

 

（3）.trim可以用来过滤前后的空格

posted on 2020-08-20 09:52  ChanXM  阅读(112)  评论(0)    收藏  举报

导航