vue.js を HTML に導入する方法

vue.js を HTML に導入する方法: まず vue.js をダウンロードし、次に「"。

このチュートリアルの動作環境: Windows 7 システム、vue バージョン 2.0、Dell G3 コンピューター。

推奨: 「vue チュートリアル 」

vue.js を HTML に導入する

まだ公開されていない人向けes6 と webpack へ 子供用の靴の場合、公式の Scaffolding vue-cli コンポーネント プロジェクトを直接使用することはお勧めできません。

まず、少なくとも構成要素の章を文書の順序で学習してください。 vue.js を html ファイルに直接導入して学習を開始し、vue の基本的な手順と vue インスタンス全体のインフラストラクチャを理解します。

vue.js のダウンロード アドレス: https://vuejs.org/v2/guide/installation.html ダウンロード後、vue.js パッケージを HTML に追加します。

<script src="${path}/web/constant/vue.js"></script>

現在の HTML に js コードを記述します:

<script type="text/javascript">
new Vue({
el:&#39;#app&#39;,
data: {
message:&#39;hello vue.js.&#39;
}
});
</script>

HTML に次のコードを追加します:

<h1>Vue demo</h1>
<div id="app">
<div>{{message}}</div>
<input type="text" v-model="message">
</div>

テキスト ボックスの内容を変更すると、次のことが可能になります。テキスト ボックスを参照してください。上記の内容もそれに応じて変更されており、これは vue の双方向バインディングです。

以上がvue.js を HTML に導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。