Vuejs を使用する理由

Vue.js は、シンプルで使いやすい JS ライブラリであり、応答性の高いデータ バインディングと結合されたビュー コンポーネントを実装できます。

Vue.js は、実際には JavaScript UI です。 Library は、データ駆動型の Web インターフェイスを構築するための進歩的なフレームワークです。その目的は、API を使用して、応答性の高いデータ バインディングと結合されたビュー コンポーネントをできるだけ簡単に実装することです。なぜ Vue を使用するのかについて詳しく説明します。 .js

【おすすめコース：#Vue.js#】

vue.js を使用する理由

vue.js は簡単に始めることができ、シンプルで、API、パフォーマンスなどを含む多くのツールを備えています。必要なスクリプトは 1 つだけです。素晴らしい体験です。

すべての Vue アプリケーションのエントリ ポイントは、インスタンスを通じて作成されます。このインスタンスは、アプリケーションの残りの部分を構成し、アプリケーションが展開するときに子メンバーを取得します。

例:

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
  <p>{{ message }}</p>
</div>
<script type="text/javascript">
	new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;这是我的第一个Vue.js文件!&#39;
  }
})
</script>

Rendering

アプリケーションとアプリケーションのロード先に関する情報を含むオブジェクトを渡して、インスタンスを構成します。

el 属性: どの要素にインストールするかを指定します。値はセット ID 要素です。

data 属性: ビュー データ内の指定されたデータにバインドされるために、この属性には、テンプレートを通じてアクセスできる値を持つオブジェクトがあります。

注: ID を持つ div アプリは、アプリケーションをインストールする場所です。

二重中括弧を使用してデータをテンプレートにバインドし、メッセージを使用して構成値のバインド中にデータ オブジェクト内でそれを指定します。

データ バインディング

条件

JS フレームワークの非常に便利な機能は、次の機能です。意思決定を行う前にデータをビューにバインドします。値が true に解決された場合にのみバインドするように Vue に指示できます。

<script src="https://vuejs.org/js/vue.min.js"></script>
	<div id="app">
  <h2 id="为true时显示demo">为true时显示demo1</h2>
  <h2 id="为true时显示demo">为true时显示demo2</h2>
</div>
<script type="text/javascript">
	new Vue({
  el: &#39;#app&#39;,
  data:{
   demo1:true
  }
})
</script>

Loop

バインドされたデータのセットをループするための単純な API を提供します。 v-for ディレクティブは、この目的でそれを使用します。必要なのはデータの配列だけです。

サイト内の形式を使用する必要があります。構文、サイトはソース データ配列、サイトは配列要素反復のエイリアスです

<script src="https://vuejs.org/js/vue.min.js"></script>
	<div id="app">
  <ul>
  	<li v-for="site in sites">{{site.name}}</li>
  </ul>
</div>
<script type="text/javascript">
	new Vue({
  el: &#39;#app&#39;,
  data:{
   sites:[
{name:&#39;张三&#39;},
{name:&#39;李四&#39;},
{name:&#39;王五&#39;}
   ]
  }
})
</script>

双方向バインディング

Vue の双方向バインディングは非常に簡単で、v-model の実装に必要な命令は 1 つだけです。 v-model ディレクティブをテキスト入力にアタッチして双方向バインディングを実装し、同時にデータを表示して入力ボックスの値を確認しましょう。

<script src="https://vuejs.org/js/vue.min.js"></script>
	<div id="app">
 <p>
 	<input type="text" v-model="mentor">{{mentor}}
 </p>
</div>
<script type="text/javascript">
	new Vue({
  el: &#39;#app&#39;,
  data:{
  message:&#39;这是双向绑定&#39;,
  mentor:&#39;&#39;,
  mentors:[]
  }
})
</script>

概要：以上です この記事の内容は以上です、皆さんの勉強に少しでもお役に立てれば幸いです。

以上がVuejs を使用する理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。