Vueはテスト実行として非常に基本的な実装であり、データをコンポーネントに分解する問題があります。ここではHTMLは次のとおりです。Vue(Vue.js)コンポーネントをインポートするとエラーは表示されませんが、表示されません
<body>
<header id="main-header">
<custom-header></custom-header>
</header>
</body>
私はVueのインスタンスをインスタンス化し、#メイン・ヘッダにそれを抱き合わせています:
import CustomHeader from '../header.vue';
const header = new Vue({
el: '#main-header',
data: chx,
components: {
'custom-header': CustomHeader
},
methods: {
run: function() {
console.log('run');
},
print: function() {
window.print()
},
save: function() {
console.log('save');
}
}
});
と輸入テンプレート:
<template>
<div class="header-menu">
<img class="logo" src="images/logo.png">
</div>
<div class="header-menu">
<h1 id="date-range-label"><span v-show="dates.startFormatted">{{dates.startFormatted}} - {{dates.endFormatted}}</span></h1>
<i v-on:click="settingsVisible = !settingsVisible" id="settings" class="fa fa-2x fa-cog settings-icon no-print"></i>
</div>
</template>
エラーがログに記録されませんコンソールまたはWebpackプロセスによって実行されます。何も記録されていないのでここからどこに行くのかわからない。結果のHTMLでは<header>
divは空のままです。
あなたのテンプレートは、1つのルート要素に私はあなたが何を意味知りませんごめんなさい – thanksd
@thanksdを持っている必要がありますこの。 –