序文
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に引き続き注意を払います。