vue显示html,vue的v-html
本文主要介绍了html {{}}中出现vue的原因及解决方法，有很好的参考价值。希望对大家有帮助。来和边肖一起看看吧。
原因：
浏览器渲染机制，解析html结构——加载外部脚本和样式表文件——解析并执行脚本代码——构建html dom模型——加载图片等外部文件——页面加载完毕。
初始化vue的js写在页面底部，也就是最后执行js脚本。
所以从头到尾渲染页面的时候，渲染到标签的时候，因为vue还没有初始化，所以会显示这样的代码。
h2 { {课程名称}}/h2
网速很慢的时候可以看的很清楚，可能会让用户误以为是bug之类的。再快就一闪而过，体验不是很好。
解决办法：
1.网上说的很多东西都在v斗篷里，
div id= app v-斗篷
{{context}}
/div
[v形斗篷]{
显示：无；
}
但是我用了之后就不管用了。有什么不好？然后我就简单的按照自己的想法实现了。
2.我现在通过添加一个class= hide (hide {display: none}，注意这个样式要写在头)到最外面的div，然后在vue初始化完成后，去掉这个类hide。大致的代码如下
！声明文档类型
html lang=en
头
meta charset=utf-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name=viewport
content= width=设备宽度，最小比例=1.0，最大比例=1.0，用户可缩放=否，viewport-fit=cover
标题/标题
风格。隐藏{
显示：无；
}
/风格
/头
身体
div id=app class=hide
h2 { {课程名称}}/h2
/div
脚本
//初始化vue
initVue()
函数initVue() {
新Vue({
埃尔： #app ，
数据：函数(){
返回{
数据：{
课程名称：“”
}
}
},
已安装(){
//删除隐藏的样式
document . query selector( # app ). class list . remove( hide )
}
})
}
/脚本
/body
补充知识：原生js和vue之间的数据通讯--EventEmitter
有个小项目是用原生框架写的，但是我不想写原生，所以引入了vue。
然后有一个和原生js通信的要求，可以用node.js EventEmitter。
具体做法：
介绍文件脚本src=././js/eventemitter.js/script首先，
初始化，
然后在vue中发送emit，
在外面听着
var event=new event emitter()；
$(文档)。ready(function () {
//侦听some_event事件
event.on(some_event ，function (data) {
});
})
让vm=new Vue({
埃尔： #app ，
方法：{
getList() {
//触发事件
event.emit(some_event ， params )；
},
}
});
附加eventEmitter.js
类别EventEmitter {
构造函数(){
this . event={ }；
this.maxListerners=10
}
//监控
on(类型，侦听器){
if (this.event[type]) {
if (this.event[type].length=this.maxListerners) {
Console.error(同一个侦听器最多被十个对象监视，否则可能会导致内存泄漏。\ n’)；
返回；
}
如果(！this.event[type]。包括(侦听器)){
this.event[type]。push(听者)；
}
}否则{
this . event[type]=[侦听器]；
}
}
//发送监视器
发出(类型，休息){
if (this.event[type]) {
this.event[type]。map(fn=fn.apply(this，rest))；
}
}
//删除侦听器
removeListener(type，func) {
if (this.event[type]) {
this . event[type]=this . event[type]。过滤器(item=item！==func)；
if (this.event[type].长度===0) {
删除this . event[type]；
}
}
}
//删除所有侦听器
removeAllListener() {
this . event={ }；
}
}
vue在html中出现{{}}的原因及解决方法都是边肖分享的内容。希望给大家一个参考，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。