vue가 html에서 {{}}} 나타나는 원인과 해결 방식에 대해 간단히 말하다
브라우저 렌더링 메커니즘, 해석 html 구조 -> 외부 스크립트와 스타일시트 파일 불러오기 -> 해석 및 실행 스크립트 코드 -> 구조 htmldom 모델 -> 이미지 등 외부 파일 불러오기 -> 페이지 불러오기 완료.
vue를 초기화한 js는 페이지 밑에 쓰고, 마지막에 js 스크립트를 실행합니다.
그래서 페이지가 처음부터 끝까지 렌더링을 시작할 때, 라벨로 렌더링할 때, vue가 초기화되지 않았기 때문에, 이와 같은 코드가 표시됩니다
{{courseName}}
인터넷 속도가 매우 느릴 때 비교적 똑똑히 볼 수 있어서 사용자로 하여금 버그 같은 것을 착각하게 할 수 있다. 좀 빠르면 깜빡 지나가서 체험이 좋지 않다
해결 방법:
1. 인터넷에서 v-cloak로 많이 말하는데,
<div id="app" v-cloak>
{{context}}
</div>
[v-cloak]{
display: none;
}2. 내가 지금 해결하는 방식을 실현하고 가장 바깥쪽 div에class='hide'(.hide {display: none}, 이 양식은head에 써야 한다는 것을 주의하십시오)를 추가한 다음에 vue 초기화가 끝난 후에 이 종류의hide를 제거합니다. 대략 코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title> </title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<div id="app" class="hide">
<h2>{{courseName}}</h2>
</div>
<script>
// vue
initVue()
function initVue() {
new Vue({
el: '#app',
data: function () {
return {
datas:{
courseName:''
}
}
},
mounted() {
//
document.querySelector('#app').classList.remove('hide')
}
})
}
</script>
</body> 원생 프레임워크에 작은 프로젝트가 있는데 원생을 쓰고 싶지 않아서 vue를 도입했어요.
그리고 원생 js와 상호작용을 해야 하기 때문에 node를 사용할 수 있습니다.js EventEmitter
구체적인 방법:
파일
초기화,
그리고 vue에서 emit를 보내고,
밖에서 감청
var event = new EventEmitter();
$(document).ready(function () {
// some_event
event.on('some_event', function (data) {
});
}）
let vm = new Vue({
el: "#app",
methods: {
getList() {
//
event.emit('some_event','params');
},
}
});
class EventEmitter {
constructor() {
this.event = {};
this.maxListerners = 10;
}
//
on(type, listener) {
if (this.event[type]) {
if (this.event[type].length >= this.maxListerners) {
console.error(' , .
');
return;
}
if (!this.event[type].includes(listener)) {
this.event[type].push(listener);
}
} else {
this.event[type] = [listener];
}
}
//
emit(type, ...rest) {
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].filter(item => item !== func);
if (this.event[type].length === 0) {
delete this.event[type];
}
}
}
//
removeAllListener() {
this.event = {};
}
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
