webpack使用vue.js中的v-cloak,出现问题

webpack使用vue.js中的v-cloak,出现问题

使用webpack中的webpack-dev-server和html-webpack-plugins启动的项目
达到了不用使用webpack命令打包就可以实时监听代码变化自动打包

代码

页面代码

<!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>Document</title>
</head>
    <div id="app">
        <p v-cloak>{{msg}}</p>
    </div>
<body>
</body>
</html>

.js文件代码

import './vue_test.css'
import Vue from '../node_modules/vue/dist/vue.js'

var vm=new Vue({
    el:"#app",
    data:{
        msg:'holle word'
    }
})   

.css文件代码

[v-cloak] {
    display: none;
}

页面效果

在ChromeCore浏览器中将network调整到slow3G,然后进行刷新

结果如下
当网络足够慢时,会先将插值表达式先显示出来,任然会有闪烁,可是已经使用了v-cloak

在这里插入图片描述

检查一下main.js,webpack在自动打包的时候,会自动将打包好的.js文件导入到页面中
可以看到webpack已经帮我们打包了.js和.css文件
在这里插入图片描述

解决方法

原来的html源码(webpack打包好的)

在这里插入图片描述

出现这种情况的原因
v-cloak指令相当于一个class,对应于手写的那个css样式,当页面加载时,会先将所以加了v-cloak指令的标签先渲染上手写的css样式,等加载到Vue提供的调度器vm时,将数据渲染到页面上时,才会将v-cloak指令从标签中除去。
解决方案
将[v-cloak]样式写在head标签中

<!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>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style> 
</head>

    <div id="app">
        <p v-cloak>{{msg}}</p>
    </div>
<body>
</body>
</html>

这样就不会出现闪烁了,赶紧试一下吧。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容