Vue.jsを始めましょう

vue.jsコアコンセプトのクイックビュー

vue.jsは、ユーザーインターフェイスの構築に使用されるMVVMアーキテクチャに基づいたJavaScriptライブラリです。 Angularjsよりも簡単で、学習しやすく、柔軟性があります。そのコア関数には次のものが含まれます：

• データバインディング：一方向および双方向のデータバインディングをサポートし、モデルの変更はリアルタイムでビューに反映されます。 v-model
• 命令とフィルター：命令はDOMの操作に使用され、フィルターはデータの処理に使用されます。
• コンポーネント化：再利用可能なカスタムHTML要素を作成して、コードの読みやすさとメンテナンスを改善し、属性をパスコンポーネントプロパティに使用します。 props

注：このチュートリアルは、vue.js 1.xバージョンに基づいています。 VUE 2.xチュートリアルについては、他のリソースを参照してください。

ページにvue.jsを追加します

cdnを使用してvue.jsを紹介することをお勧めします：

<🎜>

ビューモデルを作成します

vue.jsビューモデルは、

クラスを使用して作成されます。ビューモデルは、データモデルとビューを接続します。 Vue

例：

htmlビュー：

<div id="my_view"></div>

データモデル：

var myModel = {
  name: "Ashley",
  age: 24
};

モデルの表示：

var myViewModel = new Vue({
  el: '#my_view',
  data: myModel
});

ログイン後にコピー

を使用して、視界内のデータを表示します

{{ }}

双方向のデータバインディング

<div id="my_view">
  {{ name }} is {{ age }} years old.
</div>

命令を使用して、双方向のデータバインディングを達成します：

v-model

フィルター

<div id="my_view">
  <label for="name">Enter name:</label>
  <input type="text" v-model="name" id="name" name="name">
  <p>{{ name }} is {{ age }} years old.</p>
</div>

フィルターはデータ処理に使用され、シンボルを使用して呼び出されます：

|

レンダリング配列

{{ name | uppercase }}

ディレクティブを使用してアレイをレンダリングします：

v-forフィルターでのソート：

<div id="my_view">
  <ul>
    <li v-for="friend in friends">{{ friend.name }}</li>
  </ul>
</div>

フィルターorderByフィルター：

<li v-for="friend in friends | orderBy 'age'">{{ friend.name }}</li>

filterByイベント処理

<li v-for="friend in friends | filterBy 'a' in 'name'">{{ friend.name }}</li>

ビューモデルのプロパティでイベントハンドラー関数を定義し、ディレクティブを使用してイベントをバインドします：

methods v-on

コンポーネントの作成

var myViewModel = new Vue({
  // ...
  methods: {
    myClickHandler: function(e) {
      alert("Hello " + this.name);
    }
  }
});

<button v-on:click="myClickHandler">Say Hello</button>

メソッドを使用してコンポーネントを作成します：

Vue.component属性を使用して、コンポーネントプロパティをパスします：

Vue.component('sitepoint', {
  template: '<a href="https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a">Sitepoint</a>'
});

props概要

Vue.component('sitepoint', {
  props: ['channel'],
  template: '<a href="https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a/{{ channel | lowercase }}">{{ channel }} @Sitepoint</a>',
});

このチュートリアルでは、データバインディング、ディレクティブ、フィルター、イベント処理、コンポーネントの作成を含むVue.jsの基本概念を紹介します。 より高度な機能については、公式ドキュメントを参照してください。

（FAQなどの後続のコンテンツを必要に応じて、元のテキストとの一貫性を維持するために追加できます。）

以上がVue.jsを始めましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。