谷粒商城32 - 前端基础 VUE- 指令 v-on v-for v-if v-show

v-on示例点赞

    
                
        
        点赞
        
        取消
        
        有{{num}}个赞
    
    

    
        new Vue({
            el:"#app",
            data:{
                num: 1
            },
            methods:{
                cancle(){
                    this.num--;
                    if(this.num
    大div
    
        小div 
        去百度
    


  
        new Vue({
            el:"#app",
            data:{
                num: 1
            },
                hello(){
                    alert("点击了")
                }
            }
        })
    

大div和小div中 都注册了点击事件 @click. 在vue中注册了 hello方法, 用于给出提示. 点击小div区域, 会 弹出两次alert框.

此现象称之为 事件冒泡 阻止事件冒泡, 可以用stop. 上面的html部分可以修改如下, 把小div中的点击事件中, 加上 stop

   
            大div
            
                小div 
                去百度
            
        

再次到页面上进行点击, 可以看到只会出现一次弹框 阻止默认行为

例子: 阻止a标签的跳转网页的默认行为. 使用@click.prevent 代码示例如下

  
            大div
            
                小div 
                去百度
            
        

效果如下, 点击去百度, 只会出现 弹框, 不会跳转到百度 也可以进行方法的注册, 例如弹框的方法注册 . 但这样写会有冒泡问题, 阻止默认行为 并且阻止冒泡的写法

     小div 
     去百度
 

大div只能点击一次的写法 . 使用v-on:click.once

 
        
        
            大div
            
                小div 
                去百度
            
        
    
    
        new Vue({
            el:"#app",
            methods:{
                hello(){
                    alert("点击了")
                }
            }
        })
    

效果如下, 点击大div的区域, 只会出现一次弹框, 再次点击不会有反应

按键的别名 实现需求: 按方向键的上 , 点赞数量加2 , 方向键的下, 点赞数减二 v-on:keyup.up 对方向键的上进行注册 @keyup.down 对方向键的下进行注册

 
                
        
        点赞
        
        取消
        
        有{{num}}个赞

        
        

        提示：

    
    

    
        new Vue({
            el:"#app",
            data:{
                num: 1
            },
            methods:{
                cancle(){
                    this.num--;
                    if(this.num

    
        
            

            
                
               {{user.name}}  ==>   {{user.gender}} ==>{{user.age}} 
            
        

    
    
             
        let app = new Vue({
            el: "#app",
            data: {
                users: [{ name: '柳岩', gender: '女', age: 21 },
                { name: '张三', gender: '男', age: 18 },
                { name: '范冰冰', gender: '女', age: 24 },
                { name: '刘亦菲', gender: '女', age: 18 },
                { name: '古力娜扎', gender: '女', age: 25 }],
                nums: [1,2,3,4,4]
            },
        })
    

实现的效果如图所示 , 遍历出了user对象的 属性 遍历的同时, 获取索引. 将上面的代码修改如下

     
    当前索引：{{index}} ==> {{user.name}}  ==>   {{user.gender}} ==>{{user.age}} 
 

显示如下

遍历数组的同时, 遍历对象的信息, 如下的代码中 , 就是遍历对象的信息 {{k}}=={{v}}=={{i}}； 其中v,k,i ,分别代表的是 值, 键, 索引. 注意 ,值在前面, 键在 后面, 与Java的Hashmap相反

    
        
            
                对象信息：
                {{k}}=={{v}}=={{i}}；
               
            
        
    
    
             
        let app = new Vue({
            el: "#app",
            data: {
                users: [{ name: '柳岩', gender: '女', age: 21 },
                { name: '张三', gender: '男', age: 18 },
                { name: '范冰冰', gender: '女', age: 24 },
                { name: '刘亦菲', gender: '女', age: 18 },
                { name: '古力娜扎', gender: '女', age: 25 }],
                nums: [1,2,3,4,4]
            },
        })
    

效果如下.

遍历的时候都加上:key来区分不同数据，提高vue渲染效率 :key 后面一般为唯一的值, 在实际项目中, 一般用id , 在此示例中, 可以name. 如下:key="user.name"

    
        
         
         
            {{user.name}}  ==>   {{user.gender}} ==>{{user.age}} 
         
        
    
    
             
        let app = new Vue({
            el: "#app",
            data: {
                users: [{ name: '柳岩', gender: '女', age: 21 },
                { name: '张三', gender: '男', age: 18 },
                { name: '范冰冰', gender: '女', age: 24 },
                { name: '刘亦菲', gender: '女', age: 18 },
                { name: '古力娜扎', gender: '女', age: 25 }]
            },
        })
    

效果如图

设置一个按钮, 点击了按钮, 是否显示取反值.

    
    
        点我呀
        
        if=看到我....
        
        show=看到我
    

     
    
        let app = new Vue({
            el: "#app",
            data: {
                show: true
            }
        })
    

效果如下, 一开始if 和show都显示 点击了 点我呀, 之后, 页面都没有显示了 . 但是通过代码可以看到 v-show=“show” 是通过css样式去控制是否显示的. 而v-if="show"是直接把整个dom清除了. 因此最好用v-show提高页面渲染效率 .

v-else-if 的用法与Java的if else类似. 多条件判断 代码示例 生成随机数, 动态的判断 随机数的大小 去显示内容

    
        点我呀
        {{random}}

        
            看到我啦？！ >= 0.75
        

        
            看到我啦？！ >= 0.5
        

        
            看到我啦？！ >= 0.2
        

        
            看到我啦？！ < 0.2
        

    


    
        
             
        let app = new Vue({
            el: "#app",
            data: { random: 1 }
        })     
    

效果如图所示 , 点击按钮, 生成不同的数字, 显示不同的内容

例如在上面的v-for的中 , 只遍历显示男生. 判断条件的优先级是低于v-for的 写法如下

    
        
            
               {{user.name}}  ==>   {{user.gender}} ==>{{user.age}} 
            

            
        

        
            
        
    
    
             
        let app = new Vue({
            el: "#app",
            data: {
                users: [{ name: '柳岩', gender: '女', age: 21 },
                { name: '张三', gender: '男', age: 18 },
                { name: '范冰冰', gender: '女', age: 24 },
                { name: '刘亦菲', gender: '女', age: 18 },
                { name: '古力娜扎', gender: '女', age: 25 }]
            },
        })