序文
Vue.jsは、データ駆動型のWebインターフェイスライブラリです。 Vue.jsはビューレイヤーのみに焦点を当て、他のライブラリと簡単に統合できます。コードは、圧縮後わずか24kbです。
次のコードは、vue.jsの最も単純な例です。入力のコンテンツが変更されると、Pノードのコンテンツがそれに応じて変更されます。
<！ - html-> <div id = "demo"> <p> {{message}} </p> <input v-model = "message"> div> new vue（{el： '#demo'、data：{message： 'hello vue.js！'}}}）vue.jsの基本的な構文
テキストを挿入します
<span>メッセージ：{{text}} </span>テキストをHTML形式に挿入し、ページにHTML形式で表示します
<span>メッセージ：{{{html}}} </span>コンテンツは、データの変更に従いません
<span>メッセージ：{{ * text}} </span>プロパティのデータをバインドします
<div id = "item- {{{id}}"> </div>{{}}でjs式を使用する
{{number + 1}} {{ok？ 「はい」： 'いいえ'}} {{message.split（ ''）。reverse（）。（ ''）}}}}}{{}}でJSステートメントを使用する
{{var a = 1}} {{if（ok）{return message}}}コマンドの場合
<p v-if = "グリーティング">こんにちは！</p>ここでは、v-ifディレクティブは、式グリーティング値の真正性に従って<p>要素を削除/挿入します。
HREF指令
<a v-bind：href = "url"> </a>または<a href = "{{url}}"> </a>[コマンド]をクリックします
<a v-on：click = "dosomething">
コマンドを入力します
<入力v-model = "newtodo" v-on：keyup.enter = "addtodo">
略語
vバインド
<！ - complete syntax-> <a v-bind：href = "url"> </a> <！ - 略語 - > <a：href = "url"> </a> <
v-on
<！ - complete syntax-> <a v-on：click = "dosomething"> </a> <！ - 略式 - > <a @click = "dosomething"> </a>
要約します
テンプレート内の式は非常に便利ですが、実際には単純な操作にのみ使用されます。テンプレートは、ビューの構造を記述することです。テンプレートに多すぎるロジックを入れると、テンプレートを重くして維持するのが難しくなります。これが、vue.jsが結合式を1つの式に制限する理由です。複数の式が必要な場合は、計算されたプロパティを使用する必要があります。エディターは、計算された属性を後で使用する方法を更新します。興味のある友達は、wulin.comに引き続き注意を払います。