基本指令v-cloak

基本指令v-cloak

  v-cloak 它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除, 经常和 css 的 display: none;配合使用。
  当网速较慢、 Vue.js 文件还没 加载完时,在页面上会显示{ { message } }的字样,直到 Vue 创建实例、编译模板时, DOM 才会被 替换,所以这个过程屏幕是有闪动的
  所以当没有加载完成时需要一个遮罩,而v-cloak 通过css display: none;配合使用可以实现遮罩功能,并且根据v-cloak定义,它会在Vue实例结束编译时从绑定的HTML元素上移除,这样又不会一直遮罩,满足要求


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style type="text/css">
         [v-cloak]{
             display: none;
         }
    style>
head>
<body>
    <div id="app" v-cloak>
        <div>
            {{message}}

        div>
    div>
    <script src="vue.js">

    script>
    <script>
        var app = new Vue(
            {
                el:"#app",
                data:{message:"123"}
            }
        )
    
    script>
    
body>
html>

  展示效果:
基本指令v-cloak_第1张图片

你可能感兴趣的:(vue)