Vue基础知识简介2

最新推荐文章于 2024-06-16 17:17:51 发布

Mr_Debugger

最新推荐文章于 2024-06-16 17:17:51 发布

阅读量338

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/chenacxz/article/details/80011017

vue 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍Vue.js中如何解决模板闪烁问题、处理事件冒泡及默认行为，并介绍如何使用过滤器来优化数据显示，涵盖Vue指令、事件修饰符及常用场景。

<!--解决{{}}闪烁的问题-->

window.onload=function(){
            new Vue({
                el:'#my',//2.0不允许挂载到html body元素上
                data:{
                    msg:'Hello World',
                    name:'sonia',
                    html:'<span>123</span>'
                },
                methods: {
                    action: function () {
                        this.msg = "click";
                    }
                }
            })
        }

<style>
[v-loak]{
display:none;
}
</style>

<div id="my">
        <!--另外一种方法加一个v-cloak-->
        <div v-cloak>{{msg}}</div>
        <!--解决{{}}闪烁的问题-->
        <!--一个是文本，一个是html标签-->
        <div v-text="msg"></div>
        <div v-html="html">{{msg}}</div>
    </div>

v-text v-html

类似于 inner html inner text

绑定对应的html 和对应的text

html里可以包含标签

v-cloak；主要是用来解决浏览器闪烁的问题

还要配置对应的css,否则不生效

<style>

[v-cloak]{

display:none;

}

</style>

事件冒泡以及解决办法（点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。）

window.onload=function(){
            new Vue({
                el:"#my",
                data:{

                },
                methods:{
                    show1(){
                       console.log("111");
                    },
                    show2(){
                        console.log("222");
                    },
                    show3:function(){
                        console.log("333");
                    }//依次输出 333 222 111
                }
            })
        }

<div id="my" @click="show1()">A1
        <div @click="show2()">A2
            <button @click="show3()">A3</button>
        </div>
    </div>

jQuery的解决办法

show3:function(e){
                        console.log("333");
                        e.stopPropagation();
                    }

<button @click="show3($event)">A3</button>

vue的解决办法

show3:function(){
                        console.log("333");
                    }

<button @click.stop="show3()">A3</button>

取消默认的动作

        <div>
            <a href="http://www.baidu.com" @click="showPrevent()">1111</a>
            <a href="http://www.baidu.com" @click="showPrevent()">2222</a>
        </div>

js方法

<a href="http://www.baidu.com" @click="showPrevent1($event)">1111</a>

showPrevent1(e){
                        e.preventDefault();
                    }

vue的解决办法

<a href="http://www.baidu.com" @click.prevent="showPrevent()">2222</a>

阻止事件冒泡和组织默认功能

<a href="http://www.baidu.com" @click.prevent.stop="showPrevent()">2222</a>

<a href="http://www.baidu.com" @click.prevent.stop="showPrevent()">2222</a>

单次事件（无法阻止冒泡，只会执行一次，可以做签到功能）

once(){
                      console.log("once");
                    }

<div @click.once="once()">once</div>

键盘事件（稍作了解）

 window.onload=function(){
            new Vue({
                el:"#my",
                data:{

                },
                methods:{
                    key(){
                        console.log("aaa")
                    },
                    enter(){
                        console.log("enter")
                    },
                    getUp(){
                        console.log("getUp")
                    },
                    space(){
                        console.log("space")
                    },
                    keypress(){
                        console.log("keypress")
                    }
                }

            })
        }

<div id="my">
    <!--按下任意键-->
    <input @keydown="key()"/>11111
    <!--按下回车键-->
    <input @keydown.enter="enter()"/>enter
    <!--按下向上键-->
    <input @keydown.up="getUp()"/>getUp
    <!--空格键按下之后上弹-->
    <input @keyup.space="space()"/>space
    <input @keypress="keypress()"/>keypress
</div>

过滤器

保留两位小数

window.onload=function(){
            new Vue({
                el:"#my",
                data:{

                },
                methods:{

                },
                filters:{
                    number:function(data,n){/*data代表传的值,n代表参数 内嵌过滤器*/
                        return data.toFixed(2);
                    }
                }

            })
        }

<div id="my">
    <div>{{3.14159 | number()}}</div>
</div>

过滤器传参（处理数据的一个函数，大量的过滤器会使页面渲染的比较慢）

number:function(data,n){/!*data代表传的值,n代表参数*!/
                        return data.toFixed(n);
                    }

<div>{{3.14159 | number(2)}}</div><!--去小数点后两位-->去小数点后两位-->

大于10取当前的值，如果小于10 数值前+0

点击按钮，显示或隐藏

addZero:function(data){
    return data>10 ? data : "0"+data;

new Vue({
                el:"#my",
                data:{
                    msg:'hello',
                    flag:true
                },
                methods:{
                    click1:function(){
                        this.flag=!this.flag;/*取反*/
                    }
                },
                filters:{
                   
                    show:function(data){//按钮变为显示或隐藏
                        if(data){
                            return "显示";
                        }else{
                            return "隐藏";
                        }

                    }
                }

            })
        }

}

<button @click="click1()">{{flag | show()}}</button>
    <ul v-if="!flag">
        <li>122</li>
    </ul>

将后台传过来的值再做优化

时间戳

<p>{{curentTime | showTime()}}</p>
</div>

data:{
                    msg:'hello',
                    flag:true,
                    items:[{id:1,name:"sonia"},{id:2,name:"sonia1"},{id:3,name:"sonia2"}],
                    curentTime:Date.now()
                },

showTime:function(data){
                        var d=new Date(data);
                        return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
                    }