vue常用命令学習(v-model,v-on,v-for)
14261 ワード
前言jQueryは1つの梭子のコードが出てきてイベント駆動vue 1つのjsonが終わってangularデータ駆動のようにie 8以上しか互換性がありませんvueの第1歩を使用してvueを導入します
常用命令 v-show display true/false true=falseを表示= を表示しない
jsonキー値は左がキー、右が値です v-for v-model,双方向バインド,データと出力バインド イベントバインドv-on:clickまたは@click(推奨)イベントオブジェクト$event、デフォルトの最初のパラメータはイベントオブジェクト です.
バブルを阻止するcancelBubble = true; ecent.stopPropagation();
@click.stop;
デフォルトのイベントをブロックします.preventDefault() @click.prevent
キーボードイベントkeydown/keyup
keyCode keydown.66.67.68.left.enter
20190610
{{msg}}
<script>
new Vue({
el:'body',
data:{
msg:'hello world',
}
}) //el ，data
</script>
//{{}} ， data
//el jQuery
常用命令
<input id='btn' type='button' value=' / ' v-on:click='change'>
<div v-show='dis'></div>
<script>
new Vue({
el:'body',
data:{
dis:true
},
methods:{
change:function(){
this.dis = !this.dis;
}
}
})
</script>
jsonキー値は左がキー、右が値です
{{$index}} =>
{{$key}} =>key
<div v-for='i in arr'>{{i}}{{$index}}</div>
<div v-for='(key,value) in json'>{{key}}=>{{value}}</div>
<div v-for='i in json'>{{$key}}=>{{i}}=>{{$index + 10}}</div>
<script>
new Vue({
el:'body',
data:{
arr:['a','b','c'],
json:{
leo:'12',
lmx:'12',
wk:'11'
}
}
}) //$index ，$key ，i
</script>
<input v-model='msg' type='text'>{{msg}}
<script>
new Vue({
el:'body',
data:{
msg:''
}
})
</script>
<input type='' name='' v-model='left'> -
<input type='' name='' v-model='right'>
<script>
new Vue({
el:'body',
data:{
left:'',
right:''
}
})
</script>
<body @click='changes(10,$event)'>
<script>
new Vue({
el:'body',
methods:{
changes:function(event,l){
console.log(event,l);
}
}
})
</script>
</body>
バブルを阻止するcancelBubble = true; ecent.stopPropagation();
@click.stop;
デフォルトのイベントをブロックします.preventDefault() @click.prevent
<body @click="bodyEvent">
<div @click.stop="divEvent"></div>
<script type="text/javascript">
new Vue({
el:'body',
methods:{
bodyEvent:function(){
alert(' body');
},
divEvent:function(event){
// event.cancelBubble = true;
//event.stopPropagation();
alert(" div");
}
}
})
//
//1. event.cancelBubble=true
</script>
</body>
キーボードイベントkeydown/keyup
<body @keydown.left.65.66.67.enter="bodyEvent">
<script type="text/javascript">
new Vue({
el:'body',
methods:{
bodyEvent:function(){
console.log(1);
}
}
})
//
//1. event.cancelBubble=true
</script>
</body>
keyCode keydown.66.67.68.left.enter
20190610