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を紹介することをお勧めします：

<code class="language-html"></code>

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

vue.jsビューモデルは、

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

例：

htmlビュー：

<code class="language-html"><div id="my_view"></div></code>

データモデル：

<code class="language-javascript">var myModel = {
  name: "Ashley",
  age: 24
};</code>

モデルの表示：

var myViewModel = new Vue({ el: '#my_view', data: myModel });を使用して、視界内のデータを表示します

{{ }}

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

<code class="language-html"><div id="my_view">
  {{ name }} is {{ age }} years old.
</div></code>

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

v-model

フィルター

<code class="language-html"><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></code>

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

|

レンダリング配列

<code class="language-html">{{ name | uppercase }}</code>

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

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

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

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

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

filterByイベント処理

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

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

methods v-on

コンポーネントの作成

<code class="language-javascript">var myViewModel = new Vue({
  // ...
  methods: {
    myClickHandler: function(e) {
      alert("Hello " + this.name);
    }
  }
});</code>

<code class="language-html"><button v-on:click="myClickHandler">Say Hello</button></code>

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

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

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

props概要

<code class="language-javascript">Vue.component('sitepoint', {
  props: ['channel'],
  template: '<a href="https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a/%7B%7B%20channel%20%7C%20lowercase%20%7D%7D">{{ channel }} @Sitepoint</a>',
});</code>

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

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

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