vue.js中的事件绑定-01笔记

蔚落 2024-04-18 02:41 50阅读 0赞

# 之前发生了一个错误，事件绑定一直不成功，就是下面的错误代码 #

<div id="app">
           当前计数：{
       {count}}
          
           <button v-if="0">大家好0</button>
           <button v-if="1">大家好1</button>
           <img v-bind:src="imgurl" alt="">
           <a :href="aurl">百度一下</a>
    </div>
    <button v-on:click="count++">+</button>
    <button v-on:click="sub">-</button>

就是因为 button没有放进div id="app"的div 里面，所有没有挂载，导致了事件没有绑定成功

<!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="js/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
           当前计数：{
       {count}}
           <button v-on:click="count++">+</button>
           <button v-on:click="sub">-</button>
           <button v-if="0">大家好0</button>
           <button v-if="1">大家好1</button>
           <img v-bind:src="imgurl" alt="">
           <a :href="aurl">百度一下</a>
        </div>
        
        <div id="a"></div>
        <script>
    
    
            const app = new Vue({
    
                el: "#app",
                data: {
                    count:1,
                    movies:["海贼王","星际穿越","火影","faker"],
                    imgurl:"1.jpg",
                    aurl:"www.baidu.com"
                },
                methods:{
                 
                    sub:function(){
                        this.count--;
                        console.log("执行了代码");
                    }
                }
            })
    
    
        </script>
    
      
    </body>
    
    </html>

# 1.插值语句： #

v-once

v-html

v-text

v-pre

v-cloak

# 2.动态绑定属性 #

##    一般用于图片的src 还有 a标签的 链接 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
    
    <div id="app">
    
        <img :src="imgurl">
        <a :href="ahref">百度的链接</a>
    </div>
    
    </body>
    <script>
    
        const app = new Vue({
            el: "#app",
            data: {
    
                imgurl: "picture/1.jpg",
                ahref: "https://www.baidu.com"
            }
    
    
        })
    </script>
    </html>

# 3.计算属性 #

就是在Vue下面有一个computed 的属性，和 methods 区别就是  computed一个只需要运行一次，有缓存 ,methods 用一次调用一次

# 4.事件的监听 #

<!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="js/vue.js"></script>
    </head>
    
    <body>
       
        <div id="app">
            <button  @click="btnclick()">按钮一</button>
            <button @click="btnclick()">按钮二</button>
            
            <button @click="btnclick2">按钮三</button>
            <button @click="btnclick3('joker',$event)">按钮四</button>
            <button>按钮五</button>
        </div>
    
        <script>
          
          const app=new Vue({
              el:"#app",
              data:{
                 name:"joker"
              },
             methods:{
    
              btnclick(){
                  console.log("joker 你好 btnclick")
              },
              //这个是传入事件
              btnclick2(abc){
                  console.log("说谎家 你好 btnclic2")
                  console.log(abc)
              },
              //又想传入参数，还有事件
              btnclick3(abc,event){
                  console.log("你好 btnclic3")
                  console.log(abc)
                  console.log(event)
              }
             }
          })
        </script>
    
    
    </body>
    
    </html>

#    按键的监听：  #

# 5.条件判断  #

v-if

v-else-if

v-else

# 6.循环遍历 #

v-for

注意点，其中还可以放入key ,index ，等我学到的再次更新

v-for="(item,index) in movies"