vue.js学習2日目
4414 ワード
1、vueイベントバインド
vueで要素バインドイベントを1つ与えるには
vueで要素バインドイベントを1つ与えるには
v-on:+イベント名(click、mouseover、mouseout、keyup、keydownなど)を用いることができ、v-on:という書き方は煩雑であり、v-on:は@文字で置き換えることができる//
2、vue中event事件对象
现在比如有这样一个需求，点击按钮要获取鼠标相对于浏览器的
x和y坐标，原生js中只需要给点击方法传一个event对象，通过event对象来获取相应的值，vue中也提供了一个类似的方法$event，vue多一个$符号。
<script src="https://unpkg.com/vue/dist/vue.js"/>
<button id="app">{{message}}</button> // fn1 $event , event
<script>
var app = new Vue({
el:"#app",
data:{
message: ' '
},
methods:{
fn1: function(ev){
console.log(ev.clientX +":"+ev.clientY ) // x y
}
}
})
</script>
</code></pre>
<h6>3、vue </h6>
<blockquote>
<p> ， js <code>event</code> <code>cancelBubble</code> <code>ture</code> ， vue ， stop ，<code>@click.stop</code>，vue 。<br/> <code>.stop</code> vue <code>.prevent</code> <code>.capture</code> <code>.self</code> <code>.once</code> ， vue http://cn.vuejs.org/v2/guide/events.html# </p>
</blockquote>
<pre><code>
<meta charset="utf-8"/>
<title/>
<script src="https://unpkg.com/vue/dist/vue.js"/>
<div id="app">
<button>{{btnText}}</button>
<button>{{btnText}}</button> //vue ，fn1 ev.cancelBubble = true
</div>
<script>
var app = new Vue({
el:"#app",
data:{
btnText :" "
},
methods:{
fn1: function(ev){
ev.cancelBubble = true // vue stop
console.log('1')
},
fn2:function(){
console.log('2')
}
}
})
</script>
</code></pre>
<h6>4、vue keyCode</h6>
<blockquote>
<p> ， （ ）， ， js event ， <code>event</code> <code>keyCode</code>， keyCode Vue ， vue ：<br/> <code>.enter</code> <br/> <code>.tab</code> tab <br/> <code>.delete</code> ( “ ” “ ” )<br/> <code>.esc</code> esc <br/> <code>.space</code> <br/> <code>.up</code> <br/> <code>.down</code> <br/> <code>.left</code> <br/> <code>.right</code> </p>
</blockquote>
<pre><code>
<meta charset="utf-8"/>
<title/>
<script src="https://unpkg.com/vue/dist/vue.js"/>
<div id="app">
<input type="text" value=" "/>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
},
methods:{
fn1: function(){
alert(' ')
}
}
})
</script>
</code></pre>
<p> <code>.enter</code> ， 。</p>
</article>
</div>
</div>