Vue2.0 的漫长学习ing-8

Posted 2020-11-03 小凡的耿

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue2.0 的漫长学习ing-8相关的知识，希望对你有一定的参考价值。

其他内部指令(v-pre & v-cloak & v-once)

v-pre指令

　　在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。

<div v-pre>{{message}}</div>

　　这时我们就无法获得message的值了，会直接输出{{message}}。

v-cloak指令

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

<div v-cloak>
  {{ message }}
</div>

v-once指令

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

<div v-once>第一次绑定的值：{{message}}</div>
<div><input type="text" v-model="message"></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>v-pre & v-cloak & v-once 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-pre & v-cloak & v-once实例</h1>
    <hr>

    <div id="app">
        <div v-pre> {{message}} </div>
        <div v-cloak> 渲染完成后，才显示  {{message}} </div>
        <div v-once> {{message}} </div>
        <div> <input type="text" v-model="message">  </div>
        
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data:{
                message:‘Hello World!‘
            }
        })
    </script>
</body>
</html>

以上是关于Vue2.0 的漫长学习ing-8的主要内容，如果未能解决你的问题，请参考以下文章