Vue学習（4）---テンプレートの構文、指示、計算された属性、リスナー

テンプレートの構文

Vue.jsはHTMLベースのテンプレート構文を使用するため、開発者はDOMを基礎となるVueインスタンスのデータに宣言的にバインドできます。すべてのVue.jsテンプレートは正当なHTMLであるため、仕様に準拠したブラウザやHTMLパーサーで解析できます

基本となる実装では、Vueはテンプレートを仮想DOMレンダリング関数にコンパイルします。応答システムと組み合わせると、Vueは、再レンダリングする必要があるコンポーネントの最小数をインテリジェントに計算し、DOM操作の数を最小限に抑えることができます。
Mustache構文を使用したテキスト出力（{{}}値）
{{msg}}は、データオブジェクトデータのmsg属性の値に置き換えられます（およびmsgが変更されると、補間の内容が変更されます）

仮想DOMに精通していて、JavaScriptの本来の機能を好む場合は、オプションのJSX構文を使用して、テンプレートを使用せずにレンダリング関数を直接作成することもできます。

指導

ディレクティブはv-プレフィックスを持つ特別な属性です。instruction属性の値は、単一のJavaScript式であることが期待されます（v-forは例外です。後で説明します）。命令の責任は、式の値が変化したときにDOMに応答して行動することです

いくつかの例を示すために、
html出力はv-html
属性バインディングとv-bindを使用します

パラメータ

一部のコマンドは、コマンド名の後にコロンで示される「パラメーター」を受け取ることができます。たとえば、v-bindコマンドを使用してHTML属性を応答的に更新できます。
たとえば、v-bindはいくつかの元の属性スタイルhrefクラスをバインドして動的に属性を更新
できますv-onはネイティブイベントをバインドしたり、フォーカスをクリックしたりできます。操作
コマンドはパラメーターv-bindを受け取ることができます：v-on：パラメーターを取ること
も、動的パラメーターを運ぶこともできますv-bind：[value] = "xxxx"

実際、すべてのデータバインディングに対して、Vue.jsは完全なJavaScript式サポートを提供します

{{}}でjs式を記述できます。もちろん、vバインド：id = "'value' + id"

これらの式は、それらが属するVueインスタンスのデータスコープでJavaScriptとして解析されます。1つの制限は、各バインディングに含めることができるのは1つの式のみであり、ステートメントやフロー制御は含まれない

修飾子

修飾子は、ピリオドで示される特別なサフィックスであり、命令が特別な方法でバインドされる必要があることを示すために使用されます。たとえば、.prevent修飾子は、トリガーされたイベントでevent.preventDefault（）を呼び出すようにv-onディレクティブに指示します。PreventDefault
は、現在のイベントに対するブラウザーのデフォルトの動作をキャンセルすることです
。たとえば
、このコンポーネントを使用するようにコンポーネントを定義した場合ブラウザーのネイティブイベントをバインドするには（カスタムコンポーネントバインディングイベントはデフォルトではネイティブイベントではありません）、
修飾子を使用してこの問題を解決できます

<comp v-on:click="handleClick"></comp>  //自定义组件,这么写无效 无法绑定原生事件
<comp v-on:click.native="handleClick"></comp>  //绑定了原生事件

略称

頻繁に使用される指示の中には、省略された
vバインドの省略形を提供するものがあります。v-onの省略形@

計算された属性

テンプレート内の式を使用して値{{}}を計算できますが

<div>
{{"这是测试"+message}}  
</div>

ただし、これは実際にはビューレイヤーのロジックを悪化させます。複雑なロジックを減らすには、計算された属性を使用する必要があります

テンプレートの式は非常に便利ですが、簡単な操作のために設計されています。テンプレートにロジックを入れすぎると、テンプレートが重くなりすぎて保守が難しくなる
ため、複雑なロジックの場合は、計算された属性を使用する必要があります。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

計算属性は対応する共通属性に依存するため、共通属性が変更されると、計算属性が再計算されてページに再レンダリングされます。
計算属性では、getを設定できます。set関数の
get関数は、元の計算属性の定義に似ています。計算された値
とセット関数は、共通のプロパティを更新するのに役立ちます

	<div id="app">
		{{fullName}}
            <p>{{firstName}}</p>
	    <p>{{lastName}}</p>
	</div>

var vm=new Vue({
        el:'#app',
	data:{
	    firstName:"57",
	    lastName:"one",
        },
	computed:{
	    fullName:{
		get:function() {
		    return this.firstName+" "+this.lastName;
		},
		set:function(value){
		    console.log("change");
		    var arr=value.split(" ");
		    this.firstName=arr[0];
		    this.lastName=arr[1];
		}
	    }
        }
})

コンソールで計算属性fullNameの値を
変更し、通常の属性のfirstNameおよびlastNameの値を変更することもできます（つまり、値が変更されると、計算属性のsetメソッドが呼び出されます）。

計算された属性キャッシュとメソッド

メソッドもこの効果を達成できます。{{}}で関数を呼び出して同じ効果を表示
できますが、再レンダリングすると、異なるメソッドは常に関数を再実行し
、計算された属性は対応する通常の属性に依存します。、これらの共通属性が変更されていない場合、関数は再実行されません