リア書き込みhtmlページ、JSは、体内に挿入されたJSが身体の前に挿入されている場合、ページをレンダリングすることは、第1のjs上で実行されていないため、常識である、jsがコンポーネントに関係する操作になります正しく効果にすることはできません。
たとえば、次のコードは、ページが正しくレンダリングすることができないようになります。
<body>
<script src = "./vue2.6.11.js"></script>
<script>
new Vue({
el:'#app',
data:{
count: 100
},
methods:{
}
})
</script>
<div id="app">
<h1>{{count}}</h1>
</div>
</body>
示されているようにページをレンダリングする必要があるため、データ・ページは、ページにレンダリングVueのインスタンスをカウントしない、jsが引き継がれました。
なぜ、その後、通常の外部JSの導入を必要とするとき、私たちは地元の体や頭のhtmlの初め、それに書くことに慣れていますか？
以下は、それらの合理性の解釈に二つの小さな実験でした。
コードの同じ部分は、我々は、第1の本体の後部に配置されているページ自体Vue.js JSコードを導入しました。
<body>
<div id="app">
<h1>{{count}}</h1>
</div>
<script src = "./vue2.6.11.js"></script>
<script>
new Vue({
el:'#app',
data:{
count: 100
},
methods:{
}
})
</script>
</body>
慎重に、あなたはそのページのリフレッシュ処理のちらつきを見つけることができ、このようなページの効果が悪くなります。
それは、これは、この現象を説明するようJSは、ブラウザは思わなかったとき、実行されないようです{{回数}}その直接レンダリングので、データバインディング、単にいくつかのHTMLテキストになります。しかし、リアJSを実行するだけでなく、構文のVueに従ってくださいする必要がある場合、それはデータバインディングとして理解されるので、ページを再レンダリング。
その後、我々は再びコード・シーケンスを変更し、Vue.jsを紹介するこの時間は、体の前に言及しました。
<body>
<script src = "./vue2.6.11.js"></script>
<div id="app">
<h1>{{count}}</h1>
</div>
<script>
new Vue({
el:'#app',
data:{
count: 100
},
methods:{
}
})
</script>
</body>
これは、このコード・シーケンス、通常のページの効果で見つけることができます。
