跟着大佬技术胖学vue系列 v-bind与v-pre v-once v-cloak

213 阅读2分钟

跟着大佬技术胖学vue系列

每天学一点,自己总结一下。记录一个萌新的爬坑之路,如果有错欢迎各位大佬指正O(∩_∩)O

v-bind

v-bind指令用于绑定html标签中的属性,在日常开发中经常用到的指令之一。

bind绑定一个img的sre属性

    <p> <img v-bind:src="imgSrc" alt=""></p>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png',
            }
        })
    </script>

‘v-bind:’指令也可以简写为‘:’

bind绑定一个class属性

首先定义class

    <style>
        .classA {
            color: red;
        }
    </style>
    <div :class="classA"> hello world</div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                classA: 'classA',
            }
        })
    </script>

bind用动态属性值来确定是否加载class

   <div :class="{classA:istrue}"> hello world</div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                istrue: true,
            }
        })
    </script>

bind点击切换class

    <div :class="{classA:istrue}">hello world</div>
    <input type="checkbox" id="oneClass" v-model="istrue">
    <label for="onClass">{{istrue}}</label>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                istrue: true,
            }
        })
    </script>

bind绑定多个class

      <div :class="classArr">hello world</div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                classArr: ['classA', 'classB'],
            }
        })
    </script>

bind三元表达式

    <div :class="classArr">hello world</div>
    <div :class="istrue==true?classA:classB">hello world</div>
    <input type="checkbox" id="oneClass" v-model="istrue">
    <label for="onClass">{{istrue}}</label>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                istrue: true,
            }
        })
    </script>

bind绑定style

   <div :style="styleBind">hello world</div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                 styleBind: {
                    color: 'blue',
                    fontSize: '30px',
                }
            }
        })
    </script>

这里注意一下一个坑,font-size在css中用-链接但是vue不支持这种规则,所以要写为驼峰形式fontSize

v-pre

v-pre跳过vue的预编译显示原始值

  <div>{{message}}</div
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello Archer"
            }
        })
    </script>

v-once

在第一次DOM时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程。

    <div v-pre>{{message}}</div>
    <div>{{message}}</div>
    <div v-once>{{message}}</div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello Archer"
            }
        })
    </script>

v-cloak

在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用

    <style>
        [v-clock] {
            display: none;
        }
    </style>
   <div v-clock>{{message}} 页面全部加载完毕之后渲染</div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
               message: "hello Archer"
            }
        })
    </script>

结语

每天记录一下学了什么,希望有所进步。萌新有说不清楚或者说错的地方欢迎大佬们吊打。??