Vue実践--命令とイベント
1157 ワード
Vue思想はデータ駆動DOMなので、データと論理に重点を置くだけでいいです.DOMのことはVueに任せてください.
命令の役割は、式の値が変化したときに、DOMにいくつかの動作を適用することです.
Vuejsのいくつかの命令:1.v-bind:DOM要素のプロパティを動的に更新します(通常はDOMプロパティをバインドするために使用されます).たとえば、次のようにします.
v-on:イベントリスナー、主にDOMにイベントをバインドし、イベントはmethodsオプションに書かれ、関数内のthisは
現在のVueインスタンスには、Vueデータ(data内のデータ)にアクセスするように関数にアクセスできます.
命令の役割は、式の値が変化したときに、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など)