【day 03】初始vue的相关指令-Toy模板网

这篇具有很好参考价值的文章主要介绍了【day 03】初始vue的相关指令。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

事件函数传参情况

1.函数不需要定义参数，作为事件函数使用时不需要带（）
2.函数定义了形参但是没有加括号 fn形参接收到的是事件对象
3.函数定义了形参 @click=“fn()” 接收到的是undefined
4.正常传参正常接收
5.既需要传参也需要使用事件对象

@click="fn('我爱你',$event)
 methods: {
            fn(val,event){
                console.log(val,event);
               this.bool=!this.bool
            }
           },

多事件处理器（了解）

 <span :class="{red:bool}" @click="fn1($event),fn2($event)">点击变换颜色</span> 
  methods: {
            fn(val,event){
                console.log(val,event);
               this.bool=!this.bool
            },
            fn1(event){
                console.log(1)
            },
            fn2(event){
                console.lo#g(2)
            }
           },

v-on 事件修饰符

<!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>Document</title>
    <style>
        .father{
            width: 500px;
            height: 400px;
            padding: 20px;
            background-color: skyblue;
        }
        .child{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
          <div class="father" @click="fn">
            <p class="child" @click="fn1"></p>
          </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
// 会发生事件冒泡
       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            fn(){
                console.log('我是爸爸');
             
            },
            fn1(){
                console.log('我是儿子');
             
            },
         
           },
       })
   </script>
</body>
</html>

阻止事件冒泡

<!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>Document</title>
    <style>
        .father{
            display: none;
            position: fixed;
            top:0;
            left:0;
            bottom:0;
            right:0;
            background-color: rgba(0,0,0,.4);
        }
        .child{
          position: absolute;
          width: 200px;
          height: 200px;
          left:50%;
          top:50%;
          transform: translate(-50%,-50%);
          background-color: pink;
        }
        span{
            position: absolute;
            top:0;
            right: 0;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .show{
            display: block;
        }
    </style>
</head>
<body>
    <div id="app">
          <div class="father" @click="fn" :class="{show:bool}">
             <p class="child" @click="fn1"><!--点击p标签，会阻止事件冒泡 -->
                <span @click="fn">x</span>
            </p>
          </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
//阻止事件冒泡
       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            fn(){
                this.bool = false
                console.log('我是爸爸');
             
            },
            fn1(event){
              event.stopPropagation();
        
                console.log('我是儿子');
             
            },
         
           },
       })
   </script>
</body>
</html>

  <style>
        .father{
            display: none;
            position: fixed;
            top:0;
            left:0;
            bottom:0;
            right:0;
            background-color: rgba(0,0,0,.4);
        }
        .child{
          position: absolute;
          width: 200px;
          height: 200px;
          left:50%;
          top:50%;
          transform: translate(-50%,-50%);
          background-color: pink;
        }
        span{
            position: absolute;
            top:0;
            right: 0;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        .show{
            display: block;
        }
    </style>
</head>
<body>
    <div id="app">
          <div class="father" @click="fn" :class="{show:bool}">
             <p class="child" @click.stop><!--点击p标签，会阻止事件冒泡 -->
                <span @click="fn">x</span>
            </p>
          </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
//阻止事件冒泡
       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            fn(){
                this.bool = false
                console.log('我是爸爸');
             
            },
            fn1(){
                console.log('我是儿子');
             
            },
         
           },
       })
   </script>
</body>
</html>

####阻止默认行为 .prevent

@click.right.prevent 阻止右键菜单
<input type = “submit” @click.prenent=“submitFn”> 阻止默认提交的行为

<!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>Document</title>
    <style>
    
    </style>
</head>
<body>
  
    <div id="app"   @click.right.prevent>
      <input type = "submit" @click.prenent="submitFn">  
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
//阻止事件冒泡
       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            submitFn(){
             //请求操作
             
            },
         
         
           },
       })
   </script>
</body>
</html>

.once

只触发一次事件函数一次性的

<!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>Document</title>

</head>
<body>
  
    <div id="app"   @click.right.prevent>
   <span @click.once="fn">once操作</span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
//阻止事件冒泡
       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            fn(){
                console.log('我是爸爸！！')
            }
         
         
           },
       })
   </script>
</body>
</html>

.self

只在自身触发（子元素不能触发）.target为自己的时候才能触发事件函数的执行

<!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>Document</title>
    <style>
          .child{
          position: absolute;
          width: 200px;
          height: 200px;
          left:50%;
          top:50%;
          transform: translate(-50%,-50%);
          background-color: pink;
        }
        span{
            position: absolute;
            top:0;
            right: 0;
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>

</head>
<body>
  
    <div id="app"   @click.right.prevent>
     <p class="child" @click.self="fn">
        <span @click="fn">x</span>
     </p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
//阻止事件冒泡
       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            fn(){
                console.log('我是爸爸！！')
            },
            fn1(){
                console.log('我是儿子！！')
            },
         
         
           },
       })
   </script>
</body>
</html>

.passsive

事件默认行为立即触发无视preventDefault

<!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>Document</title>
    <style>
    ul{
        height: 400px;
        background-color: red;
        overflow: auto;
    }
    li{
        height: 200px;
        width: 200px;
    }
    </style>

</head>
<body>
    <!-- 
   区分滚轮事件和滚动事件
   滚轮事件：
          只在鼠标滚轮的时候才触发


   滚动事件：
      可以触发滚轮事件，也可以按住滚动条进行事件的触发



     -->
  
    <div id="app"   @click.right.prevent>
     <ul @wheel.passive="dothing">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
     </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
//阻止事件冒泡
       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            fn(){
                console.log('我是爸爸！！')
            },
            fn1(){
                console.log('我是儿子！！')
            },
            dothing(){
                // 耗时操作
                for (let i = 0; i < 1000000; i++) {
                    console.log(i)
                    
                }
            }
         
           },
       })
   </script>
</body>
</html>

.capture(了解)

使用事件捕获父传子

<!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>Document</title>
    <style>
          .child{
          position: absolute;
          width: 200px;
          height: 200px;
          left:50%;
          top:50%;
          transform: translate(-50%,-50%);
          background-color: pink;
        }
        span{
            position: absolute;
            top:0;
            right: 0;
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>

</head>
<body>
  
    <div id="app"   @click.right.prevent>
     <p class="child" @click.capture="fn">
        <span @click="fn1">x</span>
     </p>
     <!-- 先触发 p 在触发  span -->
     <!-- 捕获元素   从外到内  冒泡元素  从内到外 -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
//阻止事件冒泡
       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            fn(){
                console.log('我是爸爸！！')
            },
            fn1(){
                console.log('我是儿子！！')
            },
         
         
           },
       })
   </script>
</body>
</html

组合使用
<span @click.stop.prevent=“fn1”>X

按键修饰符(了解)

.enter
<input type=“text” @keyup.enter=“keyUp”>

常用的按键别名
.delete
.esc
.space
.up
.down
.left
.right
.tab
page-up kebab-case(短横线命名比如：> niHao ni-Hao)

<!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>Document</title>
    <style>
        .red{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" @keyup.enter="keyUp">
         <!--按下enter回车的时候  才会触发事件  -->
        <!-- 可以具体到某个键，比如回车键enter -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>

       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            keyUp(){
                console.log("某个键触发了")
            }

           }
        
       })
   </script>
</body>
</html>

系统修饰符(了解)

.crtl
<button @click.ctrl=“fn”>点我//按下crtl键然后点击才能触发事件

.alt
.shift
.meta command 田
.exact
<button @click.ctrl.exact=“fn”>点我

<!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>Document</title>
   <style>
       .red{
           background-color: red;
       }
   </style>
</head>
<body>
   <div id="app">
     <button @click.ctrl="fn">点我</button>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>

      new Vue({
          el:"#app",
          data(){
              return{
                  bool:true,
              }
          },
          methods: {
                fn(){
                   console.log("点我")
                }

          }
       
      })
  </script>
</body>
</html>

使用keyCode指定具体的按键（vue3已废弃了）

<!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>Document</title>
    <style>
        .red{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
     <input type="text" @keyup.40="keyUp">  <!--方向键下 -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>

       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            keyUp(){
                console.log("某个键被触发")
            },
                 fn(){
                    console.log("点我")
                 }

           }
        
       })
   </script>
</body>
</html>

自定义键名

Vue.config.keyCodes.自定义键名 = 键码

<!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>Document</title>
    <style>
        .red{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
     <input type="text" @keyup.downdown="keyUp">  <!--方向键下 -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
    // 自定义键名
    Vue.config.keyCodes.downdown = 40
       new Vue({
           el:"#app",
           data(){
               return{
                   bool:true,
               }
           },
           methods: {
            keyUp(){
                console.log("某个键被触发")
            },
                 fn(){
                    console.log("点我")
                 }

           }
        
       })
   </script>
</body>
</html>

列表渲染指令

v-for

遍历
in 和 of 都可以

{{item}}

//item 可以在li内使用

如果需要index

        <li v-for="(item ,index) in arr">
           索引值：{{index}} <br>
           数组项： {{item}}
        </li> 
    </ul>

<!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>Document</title>
  
</head>
<body>
    <div id="app">
        <ul>
            <!-- <li v-for="item in arr">{{item}}</li> -->
            <li v-for="(item ,index) in arr">
               索引值：{{index}} <br>
               数组项： {{item}}
            </li> 
        </ul>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
       new Vue({
           el:"#app",
           data(){
               return{
                   arr:[
                    '我','喜欢','你'
                   ]
               }
           },
           methods: {
          

           }
        
       })
   </script>
</body>
</html>

数据再复杂一点点

遍历数组

<!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>Document</title>
  
</head>
<body>
    <div id="app">
        <ul>
            <!-- <li v-for="item in arr">{{item}}</li> -->
            <li v-for="(item ,index) in arr">
              <h1>{{item.name}}</h1>
              <img :src="item.image" alt="">
            </li> 
        </ul>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
       new Vue({
           el:"#app",
           data(){
               return{
                   arr:[
                    {
                        name:'张惠妹',
                        image: 'https://ts4.cn.mm.bing.net/th?id=OIP.332CUZswXIRZnvJvYjG6qgAAAA&w=298&h=204&c=12&rs=1&qlt=99&pcl=faf9f7&o=6&dpr=1.3&pid=SMRS'
                    },
                    {
                        name:'张杰',
                        image:'https://ts1.cn.mm.bing.net/th?id=OIP.A8XozsKIwHbzy2zd-4IZbgHaHa&w=298&h=204&c=12&rs=1&qlt=99&pcl=faf9f7&o=6&dpr=1.3&pid=SMRS'

                    },
                    {
                        name:'伍佰',
                        image:'https://pic.baike.soso.com/ugc/baikepic2/0/20230425201152-1339793966_jpeg_914_1344_727882.jpg/300'

                    },
                   ]
               }
           },
           methods: {
          

           }
        
       })
   </script>
</body>
</html>

遍历对象（不常用）

<!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>Document</title>
  
</head>
<body>
    <div id="app">
        <ul>
         <li v-for="(value,key,index) in obj">
            <!-- 
                value ===> 属性值
                key ===>  属性名
                index ===> 序号

             -->
            {{value}}------{{key}}----{{index}}
         </li>
        </ul>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
       new Vue({
           el:"#app",
           data(){
               return{
                obj:{
                    name:'queque',
                    age:18
                }
                 
               }
           },
           methods: {
          

           }
        
       })
   </script>
</body>
</html>

遍历字符串/数字（了解）

<!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>Document</title>
  
</head>
<body>
    <div id="app">
        <ul>
         <li v-for="(value,index) in num">
           
            {{value}}------{{index}}
         </li>
        </ul>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
       new Vue({
           el:"#app",
           data(){
               return{
             
                 num:15,
               }
           },
           methods: {
          

           }
        
       })
   </script>
</body>
</html>

组件key的属性

不使用key的情况
往前面添加数组项的时候 input框内的状态会乱序了

<!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>Document</title>
  
</head>
<body>
    <!-- 
        需求：
        添加新用户，点击按钮使添加到的新用户加入list数组，并显示出来
    
    -->
    <div id="app">
        <!-- v-model双向数据的绑定 -->
        <input type="text" v-model="query">
        <button @click="addPerson">添加新用户</button>
        <ul>
      <li v-for="person in list">
        {{person.name}}<input type="text">
      </li>
        </ul>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
       new Vue({
           el:"#app",
           data(){
       
               return{
                query:'',
                list:[
                    {id:'0001',name:'朱雀·'},
                    {id:'0002',name:'丸子'},
                    {id:'0003',name:'锦鲤'},
                    {id:'0004',name:'夏至'}
                ]
                
               }
           },
           methods: {
            addPerson(){
                // this.list.push({
                //     id:'0005',
                //     name:this.query
                // })
                this.list.unshift({
                    id:'0005',
                    name:this.query
                })
            }

           }
        
       })
   </script>
</body>
</html>

 <!-- 虚拟dom 1 
    <ul>
      <li> 0 
        朱雀 <input type="text"> //input框内 朱雀
      </li>
      <li> 1
        丸子 <input type="text"> //input框内 丸子
      </li>
      <li> 2
        锦鲤 <input type="text">//input框内 锦鲤
      </li>
      <li> 3
        夏栀 <input type="text">//input框内 夏栀
      </li>
    </ul> -->

    <!-- 虚拟dom 2  修改list之后 
    <ul>
      <li> 0 
        大宝 <input type="text"> //input框内 朱雀
      </li>
      <li> 1 
        朱雀 <input type="text">//input框内 丸子
      </li>
      <li> 2
        丸子 <input type="text">
      </li>
      <li> 3
        锦鲤 <input type="text">
      </li>
      <li> 4
        夏栀 <input type="text">
      </li>
    </ul> -->

虚拟dom diff算法
用上独一无二的key值

 <!-- 虚拟dom 1 
    <ul>
      <li> 1000 
        朱雀 <input type="text"> //input框内 朱雀
      </li>
      <li> 1001
        丸子 <input type="text"> //input框内 丸子
      </li>
      <li> 1002
        锦鲤 <input type="text">//input框内 锦鲤
      </li>
      <li> 1003
        夏栀 <input type="text">//input框内 夏栀
      </li>
    </ul> -->

  <!-- 虚拟dom 2 
  <ul>
    <li> 1004 
      大宝 <input type="text">
    </li>
    <li> 1000 
      朱雀 <input type="text"> //input框内 朱雀 找key为1000 
    </li>
    <li> 1001
      丸子 <input type="text"> //input框内 丸子
    </li>
    <li> 1002
      锦鲤 <input type="text">//input框内 锦鲤
    </li>
    <li> 1003
      夏栀 <input type="text">//input框内 夏栀
    </li>
  </ul> -->

<!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>Document</title>
 
</head>
<body>
   <!-- 
       需求：
       添加新用户，点击按钮使添加到的新用户加入list数组，并显示出来
   
   -->
   <div id="app">
       <!-- v-model双向数据的绑定 -->
       <input type="text" v-model="query">
       <button @click="addPerson">添加新用户</button>
       <ul>
     <li v-for="person in list"  :key="person.id">
       {{person.name}}<input type="text">
     </li>
       </ul>

   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
      new Vue({
          el:"#app",
          data(){
      
              return{
               query:'',
               list:[
                   {id:'0001',name:'朱雀·'},
                   {id:'0002',name:'丸子'},
                   {id:'0003',name:'锦鲤'},
                   {id:'0004',name:'夏至'}
               ]
               
              }
          },
          methods: {
           addPerson(){
               // this.list.push({
               //     id:'0005',
               //     name:this.query
               // })
               this.list.unshift({
                   id:'0005',
                   name:this.query
               })
           }

          }
       
      })
  </script>
</body>
</html>

总结

没有独一无二的key值修改了数据页面上不变的dom依旧不变顺序
用上了独一无二的Key值修改数据 dom里面的内容都可以跟着变顺序
使用for 就必须使用key
最好使用每条数据的唯一的标识比如id 手机号学号
不存在对数据的逆序添加删除等破坏顺序的操作仅仅用于渲染展示可以使用index 作为 key值文章来源地址https://www.toymoban.com/news/detail-459828.html

到了这里，关于【day 03】初始vue的相关指令的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！