반응형
html 이전에 스크립트를 로드할 때 Vue.js가 작동하지 않음
나는 Vue.js에 처음 와.나는 javascript가 html 템플릿 앞에 로드될 때 바인딩이 작동하지 않는다는 것을 발견했다.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.min.js"></script>
<script type="text/javascript">
var demo = new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
},
methods: {
speak: function() {alert(this.message);}
}
})
</script>
</head>
<body>
<div id="demo">
<p>{{message}}</p>
<input v-model="message">
<button v-on:click.prevent='speak'>speak</button>
</div>
</body>
</html>그러나 vue.js 스크립트가 바인딩된 html 템플릿 뒤에 스크립트를 배치할 때 작동한다.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.min.js"></script>
</head>
<body>
<div id="demo">
<p>{{message}}</p>
<input v-model="message">
<button v-on:click.prevent='speak'>speak</button>
</div>
</body>
<script type="text/javascript">
var demo = new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
},
methods: {
speak: function() {alert(this.message);}
}
})
</script>
</html>나는 이 문제가 jQuery를 사용할 때 코드를 ready()에 넣어야 하는지와 유사하다고 생각한다.나는 구글에서 Vue.js의 ready()에 대해 검색해 보았지만 그것은 Vue.js 인스턴스 안에 있다.html보다 먼저 스크립트를 로드할 수 있도록 jQuery와 같은 ready() 함수가 있는가?아니면, vue.js가 html 템플릿 다음에 스크립트를 로드해야 하는가?
사용할 수 있다window.onload이 일에 대하여
window.onload = function() {
// your code here
}
또는 다음 위치에 함수를 등록할 수 있음load이벤트 :
window.addEventListener('load', function() {
// your code here
})
참조URL: https://stackoverflow.com/questions/43674873/vue-js-is-not-working-when-script-is-loaded-before-html
반응형
'Programing' 카테고리의 다른 글
| 라우터 링크-활성화된 vue-router는 홈페이지 경로의 모든 해시 링크를 활성화함 (0) | 2022.03.23 |
|---|---|
| PL 이미지를 Numpy 배열로 변환하는 방법 (0) | 2022.03.23 |
| MD 크기의 장치에 대해서만 요소 표시 (0) | 2022.03.23 |
| 뉴라인 없이 인쇄(인쇄 'a'), 인쇄 공간, 제거 방법? (0) | 2022.03.23 |
| vue.js carousel-3d에 데이터가 표시되지 않음 (0) | 2022.03.23 |