Vue.jsの基礎知識まとめ_その他

はじめに

vue.js は、Web アプリケーション インターフェイスの構築に使用されるライブラリです

技術的には、Vue.js は MVVM パターンの ViewModel 層に焦点を当てており、ビューとデータ バインディング モデルを 2 つの方法で接続します。実際の DOM 操作と出力フォーマットは、ディレクティブとフィルターに抽象化されます

哲学の分野では、MVVM データ バインディング API をできるだけシンプルにするように努めてください。モジュール性と構成可能性も重要な設計上の考慮事項でした。 Vue は包括的なフレームワークではなく、シンプルかつ柔軟になるように設計されています。これをラピッド プロトタイピングに使用したり、他のライブラリと組み合わせてフロントエンド スタックを定義したりできます。

ビュー。 js API は、AngularJS、KnockoutJS、Ractive.js、Rivets.js を指します。類似点にもかかわらず、Vue.js は既存のフレームワークの一部をトレードオフできる価値を提供すると信じています

これらの用語の一部をすでによく知っている場合でも、これらの用語の概念は次の Vue.js では異なる可能性があるため、次の概念の概要を確認することをお勧めします

コンセプトの概要

モデルの表示

Vue.js では、ViewModel はインスタンス化された Vue またはそのサブクラスのコンストラクターです。

var vm = new Vue({ /* options */ })

これは、Vue.js を使用するときに開発者として対話する主なオブジェクトです。詳細については、「クラス: Vue」を参照してください。

表示

ユーザーに表示される実際の HTML/DOM

vm.$el // The View

Vue.js を使用する場合、独自のカスタム命令を除いて、DOM 操作に触れることがほとんどありません。また、ビューの更新は各 testNode ノードに対して非常に正確にトリガーされます。バッチ処理して非同期に実行するため、パフォーマンスが向上します。

モデル

これは少し変更された Javascript オブジェクトです

vm.$data // The Model

Vue.js では、モデルは単なる JavaScript オブジェクトとデータ オブジェクトであり、そのプロパティを操作してモデルを表示し、その変更を観察して通知を受け取ることができます。 Vue.js は ES5 ゲッター/セッターを使用してデータ オブジェクトの属性を変換するため、ダーティ チェックを行わずに直接操作を行うことができます。

データ オブジェクトは必要に応じて変更されるため、データ オブジェクトを変更すると、参照によって vm.$data を変更するのと同じ効果が得られます。これにより、複数の ViewModel インスタンスが同じデータを観察することも容易になります。

技術的な詳細については、「インスタンス化オプション: データ」を参照してください。

ディレクティブ

プライベート HTML 属性は、Vue.js に DOM 上で何らかの処理を実行するよう指示します

<div v-text="message"></div>

ここの div 要素には v-text ディレクティブがあり、値は message です。これは、この div ノードのコンテンツを viewMode の message 属性と同期しておくように Vue.js に指示することを意味します

ディレクティブは、あらゆる DOM 操作をカプセル化できます。たとえば、v-attr は属性要素を操作し、v-repeat は配列に基づいて要素をクローンし、v-on はイベント監視をアタッチします。これについては後で説明します。

口ひげバインディング

テキストと属性の両方で口ひげスタイルのバインディングを使用することもできます。これらは v-text v-attr ディレクティブに変換されます。例:

<div id="person-{{id}}">Hello {{name}}!</div>

便利ですが、注意すべき点がいくつかあります。

画像の src 属性を設定すると HTTP リクエストが送信されるため、初めてテンプレートを解析して 404 が表示されたときは、この時点では v-attr を使用した方がよい

Internet Explorer は HTML を解析するときに無効な内部スタイル属性を削除するため、IE バインディング インライン CSS をサポートしたい場合は常に v-style を使用します

v-html 内では、エスケープされていない HTML を処理するために 3 つの中括弧 {{{like this}}} を使用できますが、これには潜在的な XSS 攻撃があり、ウィンドウが開く可能性があるため、絶対に安全であることを推奨します。これのみを実行してください。データが完了したら、カスタム パイプライン フィルターを通じて信頼できない HTML をクリーンアップします

フィルター

ビューを更新する前に、関数を使用してこの生データを処理できます。 「パイプライン」ディレクティブまたはバインディングを使用しています:

<div>{{message | capitalize}}</div>

div のテキスト内容が更新される前に、このメッセージの値が Capitalize 関数によって処理されます。詳細については、「フィルターの詳細」を参照してください。

コンポーネント

Vue.js では、コンポーネントは単純なビュー モデル コンストラクターであり、Vue.component(ID,constructor) を通じて登録されます。別の View Model のテンプレートの v-component ディレクティブは、関連付けられた ID を介してネストできます。このシンプルなメカニズムにより、最新のブラウザや高耐久のポリフィルを必要とせずに、Web コンポーネントと同様の方法で宣言型ビュー モデルを再利用および構成できます。アプリケーションを小さなコンポーネントに分割することで、高度に分離された保守可能なコード ベースが得られます。詳細については、「ViewModel の作成」を参照してください。

簡単な例

<div id="demo">
  <h1>{{title | uppercase}}</h1>
  <ul>
    <li
      v-repeat="todos"
      v-on="click: done = !done"
      class="{{done &#63; 'done' : ''}}">
      {{content}}
    </li>
  </ul>
</div>

 
var demo = new Vue({
  el: '#demo',
  data: {
    title: 'todos',
    todos: [
      {
        done: true,
        content: 'Learn JavaScript'
      },
      {
        done: false,
        content: 'Learn vue.js'
      }
    ]
  }
})

大まかな翻訳です。間違いがあればご指摘ください