Vue実践--命令とイベント

1157 ワード

Vue思想はデータ駆動DOMなので、データと論理に重点を置くだけでいいです.DOMのことはVueに任せてください.
命令の役割は、式の値が変化したときに、DOMにいくつかの動作を適用することです.
Vuejsのいくつかの命令:1.v-bind:DOM要素のプロパティを動的に更新します(通常はDOMプロパティをバインドするために使用されます).たとえば、次のようにします.

{{greeting|toUpperCase|strClip(3)}}

// href , Vue url

v-on:イベントリスナー、主にDOMにイベントをバインドし、イベントはmethodsオプションに書かれ、関数内のthisは
現在のVueインスタンスには、Vueデータ(data内のデータ)にアクセスするように関数にアクセスできます.
var myApp = new Vue({
			el:"#container",
			data:{
				datas:true,
				greeting:"hello,World",
				url:"www.baidu.com"
			},
			filters:{
				toUpperCase:function(value){
					return value.toUpperCase()
				},
				strClip:function(val,index){
					return val.substring(index)
				}
			},
			methods:{
				showFunc:function(){
					var status = this.datas;//this  myApp
					alert(this.datas);
					if(this.datas){
						this.datas = false;
					}
					else if(!this.datas){
						this.datas = true
					}
				}
			},
			computed:{
				getLength:function(){
					return this.url.length//  
				}
			}
		})
v-on:イベント名="関数名",ここでのイベント名は(click,dbclick,mouseupなど)