」のような構文を使用して vue.js パッケージを HTML に追加します。 < /script>」。"/> 」のような構文を使用して vue.js パッケージを HTML に追加します。 < /script>」。">

ホームページ  >  記事  >  ウェブフロントエンド  >  vue.js を HTML に導入する方法

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

藏色散人
藏色散人オリジナル
2020-12-09 09:42:114995ブラウズ

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

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

このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。