Vue学习笔记

键盘日记

已于 2022-06-20 00:02:44 修改

阅读量95

点赞数

文章标签： vue.js 前端 javascript

于 2022-06-19 12:22:12 首次发布

本文链接：https://blog.csdn.net/m0_58820668/article/details/125356538

版权

v-cloak

v-cloak指令用于设置页面加载时候样式为未完全加载问题，比如外部js还未加载完毕，容器还未被解析就已经被展示出来，造成非常不好的视觉体验。这个时候可以用v-cloak来写进样式里面，如‘[v-cloak]{dispaly:none}’这样可以让js缓冲完成后，容器完全被vue接管，然后v-cloak自动销毁，隐藏样式消失，完整的容器展示在页面上。

v-once

用于页面上数据绑定初始值。比如我们有一个需求，h1标签的n值是data里面的初始值，h2标签的n点击产生自增+1这样一个效果，于是我们便对n统一绑定+1事件，然后在h1标签是加上v-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>
        <script type='text/javascript' src="../xxx.js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h1 v-once>{{ n }}</h1>
            <h2>{{ n }}</h2>
            <button @click="n++">点我n+1</button>
        </div>
    </body>
    <script>
    new Vue({
        el: '#root',
        data: {
            n: 1
        }
    })
    </script>

    </html>

v-pre

v-pre指令用于让vue跳过该代码段的解析，比如你在代码段加入v-pre指令后，它将程序员写的一字不漏展现在页面上。

用途在于若展示纯文本的代码块，让编译器跳过解析，是一个优化性能不错的选择。


    <!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>
        <script type='text/javascript' src="../xxx.js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h1 v-pre>一起来学Vue</h1>
            <h2 v-pre>{{ n }}</h2>
            <button  v-pre @click="n++">点我n+1</button>
        </div>
    </body>
    <script>
    new Vue({
        el: '#root',
        data: {
            n: 1
        }
    })
    </script>

    </html>

v-peiqi

v-peiqi是一个自定义指令，它可以让你的页面展示出你想要的任何东西，我们可以通过Directives属性来配置它。指令的内容是是你自己设置的，你可以为所欲为。


    <!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>
        <script type='text/javascript' src="../xxx.js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h2>{{ name }}</h2>
            <h2>当前的值是<span v-text="n"></span></h2>
            <h2>佩奇后的值是<span v-peiqi="n"></span></h2>
            <button  @click="n++">点我n+1</button>
        </div>
    </body>
    <script>
        new Vue({
        el: '#root',
        data: {
            name:'佩奇',
            n: 1
        },
        directives:{
            peiqi(element,binding){
                element.innerText=binding.value*Math.PI*Math.PI;
            }

        }
    })
    </script>

    </html>

当然，我们知道上面的是函数式编程来实现的，但函数式编程有不好的地方，比如我们提出一个需求，页面有一个input框，而且input框的n值也一起佩奇。

这个时候我们需要用到对象式编程


    <!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>
        <script type='text/javascript' src="../xxx.js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h2>{{ name }}</h2>
            <h2>当前的值是<span v-text="n"></span></h2>
            <h2>佩奇后的值是<span v-peiqi="n"></span></h2>
            <button  @click="n++">点我n+1</button>
            <hr/>
            <input type="text" v-peiqi:value="n">
        </div>
    </body>
    <script>
        new Vue({
        el: '#root',
        data: {
            name:'佩奇',
            n: 1
        },
        directives:{
            peiqi(element,binding){
                element.innerText=binding.value*Math.PI*Math.PI;
            },
            peiqi:{
                //指令与元素成功绑定之时
                bind(element,binding){
                    element.value=binding.value
                },
                //指令所在元素被插入页面之时
                inserted(element,binding){
                    console.log('我是一只佩奇');
                },
                //指令所在模板被解析之时
                update(element,binding){
                    console.log('佩奇佩奇');
                    element.value=binding.value
                }
            }


        }
    })
    </script>

    </html>