vue.js の一般的な命令のまとめ

今回は、vue.jsの共通命令を使用する際の注意事項についてまとめてみました。

Vue.js は、非常に人気のある JavaScript MVVM (Model-View-ViewModel) ライブラリであり、データ駆動型およびコンポーネントベースのアイデアで構築されています。 Angular.js と比較して、Vue.js はよりシンプルで理解しやすい API を提供するため、すぐに Vue.js を使い始めて使用することができます。

これまで jQuery を使用して DOM を操作することに慣れていた場合は、Vue.js を学習するときに DOM を手動で操作するという考えを捨ててください。Vue.js はデータ駆動型であるため、手動で操作する必要はありません。 DOM。特別な HTML 構文を通じて DOM と data をバインドします。バインディングを作成すると、DOM はデータと同期したままになり、データが変更されるたびに、DOM もそれに応じて更新されます。

もちろん、Vue.js を使用する場合は、jQuery などの他のライブラリと組み合わせて使用​​することもできます。

1.

を使用します。 Vue を使用するプロセスは、MVVM のさまざまなコンポーネント (Model-View-ViewModel) を定義するプロセスです。

りー

2. Vue.jsの共通コマンド

Vue.js には、一般的に使用される組み込み命令がいくつか用意されています。次に、次の組み込み命令を紹介します。 •v-if コマンド

• v-show コマンド

• v-else コマンド
• v-for コマンド
• v-bind コマンド
• v-on コマンド

Vue.js は拡張性に優れており、いくつかのカスタム命令を開発することもできます。カスタム命令については後の記事で紹介します。

2.1 v-if ディレクティブ

v-if の後には、

ブール型

に変換できる式

<!--这里定义View-->
<p>{{ message }}</p>
<script></script>
<script>
    // 这里定义Model
    var exampleData = {
      message: &#39;Hello World!&#39;
    }
    // 这里创建一个 Vue 实例或 "ViewModel"
    // 连接 View 与 Model
    new Vue({
      el: &#39;#app&#39;,
      data: exampleData
    })
</script>

が続きます。 これが最終的な出力です

rreee

2.2 v-show

<p>
      </p><h1 id="Hello-Vue-js">Hello, Vue.js!</h1>
      <h1 id="Yes">Yes!</h1>
      <h1 id="No">No!</h1>
      <h1 id="gt-Age-age">= 25">Age: {{ age }}</h1>
      <h1 id="gt-Name-name">= 0">Name: {{ name }}</h1>

 <script></script>  <script> var vm = new Vue({ el: &#39;#app&#39;, data: { yes: true, no: false, age: 28, name: &#39;keepfool&#39; } }) </script> ここのコードは v-if を v-show に変更しただけです

出力は

<p>
  </p><h1 id="Hello-Vue-js">Hello, Vue.js!</h1>
  <h1 id="Yes">Yes!</h1>
  <!---->
  <h1 id="Age">Age: 28</h1>
  <!---->

です ここでの違いは、上記の v-if は HTML コードを直接出力しないことです。ここでは、display:none を使用して非表示にします

。

2.3 v-else 命令

 <p>
      </p><h1 id="Hello-Vue-js">Hello, Vue.js!</h1>
      <h1 id="Yes">Yes!</h1>
      <h1 id="No">No!</h1>
      <h1 id="gt-Age-age">= 25">Age: {{ age }}</h1>
      <h1 id="gt-Name-name">= 0">Name: {{ name }}</h1>
    

  

以上がvue.js の一般的な命令のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。