在刚开始接触vue的时候,我们都是直接用<script>引入vue.js使用。没有借助vue-cli脚手架来构建项目。

对于一个初学者来说,跟着文档慢慢搬砖,使用vue进行数据绑定。

记得在最开始使用vue写公司项目的时候,在页面初始化化是,THML会闪现出{{}},当时测试问我有没有解决办法,我理直气壮的说这是vue的特性,没有办法解决这个问!想想当时也是傻,其实官方文档又给出解决办法,只是当时学习的时候,走马观花,没有仔细的阅读文档和demo例子。

后面同事说有解决办法,可以用v-text,v-html  来绑定事件,确实可以,我也这么做了,但是就没有去想想为什么。再后来在面试过程中,被问到了这个问题,因为自己确实遇到过,而且还解决了,就很自信的说出来解决办法。以为自己很屌的样子,所以面试的结果可想而知。

其实作为一个程序猿,作为一个合格的程序猿,要学会思考问题,多想想为什么,不要以为知道怎么解决问题就ok,还要知道为什么才行,这样才能真正的提升自己。

进入正题,简单说说自己对html中出现{{}}的原因及解决办法:

这样写的话,就会出现{{}}一闪的情况;

原因:html的加载顺序;

  解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造html dom模型 -> 加载图片等外部文件 -> 页面加载完毕。
  所以,当html加载的时候,就会把{{}} 当成文本加载出来,当vue初始化完成后,才会把{{}}解析成vue的语法。
  如果把引入vue.js的script放到head里面,那页面不会出现{{}},因为在body之前就把vue引入进来了,vue加载完成了。
解决办法:
1、使用 v-cloak指令 <div v-cloak>{{msg}}</div>
  这个指令保持在元素上知道关联实例结束编译 https://cn.vuejs.org/v2/api/#v-cloak;
2、使用 v-html指令 <div v-html='msg'></div>
3、使用 v-text指令 <div v-text='msg'></div>
4、使用template标签将需要渲染的 html 包起来
  HTML <template> 元素 是一种用于保存客户端内容的机制,该内容在页面加载时不被渲染,但可以在运行时使用JavaScript进行实例化。

vue在html中出现{{}}原因及解决办法的更多相关文章

  1. 初学vue出现空格警告的原因及其解决办法

    初学vue自己新建一个vue项目来做学习demo.不过在编写代码时一直出现空格不规范的警告.严重影响初学者的热情.错误如下图所示.(这样的错误很多,但大概翻译成中文的意思都是说空格使用不规范.) 这是 ...

  2. vue页面加载前显示{{代码}}的原因及解决办法

    进入正题,简单说说自己对html中出现{{}}的原因及解决办法: 这样写的话,就会出现{{}}一闪的情况: 原因:html的加载顺序: 解析html结构 -> 加载外部脚本和样式表文件 -> ...

  3. jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法

    jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法   在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们 ...

  4. eclipse中tomcat发布失败(Could not delete May be locked by another process)原因及解决办法

    在eclipse中tomcat发布项目时,偶尔出现了以下情况: publishing to tomcat v7.0 services at localhost has encountered a pr ...

  5. Linux环境下shell和vim中乱码原因及消除办法

    shell和vim中乱码原因及消除办法 作者:Jack47 在Linux下开发,经常遇到乱码问题:shell或者vim中显示不了中文,或者能够显示,但不能输入中文.每次都是上网去搜,或者同事告诉我一些 ...

  6. .Net内存泄露原因及解决办法

    .Net内存泄露原因及解决办法 1.    什么是.Net内存泄露 (1).NET 应用程序中的内存 您大概已经知道,.NET 应用程序中要使用多种类型的内存,包括:堆栈.非托管堆和托管堆.这里我们需 ...

  7. Oracle死锁产生的原因和解决办法

    如果有两个会话,每个会话都持有另一个会话想要的资源,此时就会发生死锁.用下面实验来说明死锁的产生原因和解决办法.SESSION1:SQL> create table t2 as select * ...

  8. HttpClient的CircularRedirectException异常原因及解决办法

    HttpClient的CircularRedirectException异常原因及解决办法 这两天在使用我自己爬虫抓取网页的时候总是出现 org.apache.http.client.ClientPr ...

  9. mysql保存中文乱码的原因和解决办法

    当你遇到这个mysql保存中文乱码问题的时候,期待找到mysql保存中文乱码的原因和解决办法这样一篇能解决问题的文章是多么激动人心.    也许30%的程序员会选择自己百度,结果发现网友已经贴了很多类 ...

随机推荐

  1. cocos creator主程入门教程(五)—— 日志系统

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 这一篇介绍日志系统的设计.一般我们开发一个demo,只会简单的用cocos提供的cc.log打印下日志, ...

  2. [Nodejs] 用node写个爬虫

    寻找爬取的目标 首先我们需要一个坚定的目标,于是找个一个比较好看一些网站,将一些信息统计一下,比如 url/tag/title/number...等信息 init(1, 2); //设置页数,现在是1 ...

  3. shared_ptr和动态数组

    std::shared_ptr智能指针是c++11一个相当重要的特性,可以极大地将开发者从资源申请/释放的繁重劳动中解放出来. 然而直到c++17前std::shared_ptr都有一个严重的限制,那 ...

  4. DSAPI 图形图像篇(上)

    彩色文字对象 基于一些特殊需求,本人开发了彩色文字对象,该功能通过类似html代码的方式指示文本,并输出图像. 我们还是先来看一张图像. 这不是文本,是通过指定文本代码输出的图像.我们来看一下实现代码 ...

  5. connection holder is null新增解决方案(2018-06-02)

    最近在做Java后台的项目,用到了druid数据库连接池,阿里出品,肯定是精品的意思咯,这也是我们老大搭建的框架,我就站在前人的肩膀上飞翔了.先前在一个事物里,使用了多条数据库操作,都是正常的,但是前 ...

  6. mysql获取某个表中除了某个字段名外的所有字段名

    现一个表中有很多字段,但我不想要其中某一个字段,手打出来字段太多,不方便. SELECT GROUP_CONCAT( column_name SEPARATOR ',' ) FROM informat ...

  7. SpringBoot JPA(实现查询多值)

    JPA是java Persistence API简称,中文名:java持久层API,JPA是JCP组织发布的J2EE标准之一 1.创建DataSource连接池对象 <dependency> ...

  8. 解决将Excel表导入到SQL Server数据库时出现Text was truncated or one or more characters had no match in the target code错误

    编写python爬虫程序可以在电商.旅游等网站上爬取相关评论数据,这些数据可以用于词云制作.感情词分析.提取关键词等,也可以将爬取下来的数据以自己的方式进行展示.评论数据爬取下来后,就要考虑怎样入库, ...

  9. weblogic patch log显示

    如何在WebLogic 12.1.3 版本的 server log 中显示 opatch 的补丁信息? 打补丁  patch 23558563 之后. 需要在 JAVA_OPTIONS 中添加如下参数 ...

  10. [Alibaba-ARouter] 简单好用的Android页面路由框架

    开发一款App,总会遇到各种各样的需求和业务,这时候选择一个简单好用的轮子,就可以事半功倍 前言 Intent intent = new Intent(mContext, XxxActivity.cl ...