VUE - 基础语法（事件表单）

Posted 2021-01-16 lynshxs

v-on指令，给元素绑定事件：

为事件绑定简单表达式：

<div id="test">
　　<input v-on:click="counter+=1" type="button" value="点我"/>
　　<p>按钮被点了{{counter}}次</p>
</div>
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {
　　　　　　counter : 0
　　　　}
　　});
</script>

为事件绑定方法：

<div id="test">
　　<input v-on:click="sayHi" type="button" value="点我弹出一个提示"/>
</div>
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {},
　　　　methods : {
　　　　　　sayHi : function(){
　　　　　　　　alert("你好呀！");
　　　　　　}
　　　　}
　　});
</script>

可以向为事件绑定的方法中传入参数：

<div id="test">
　　<input v-on:click="sayMyName(‘傻屌‘)" type="button" value="名字"/>
　　<input v-on:click="sayMyAge(24)" type="button" value="年龄"/>
</div>
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {},
　　　　methods : {
　　　　　　sayMyName(name){
　　　　　　　　alert(name);
　　　　　　},
　　　　　　sayMyAge(age){
　　　　　　　　alert(age);
　　　　　　}
　　　　}
　　});
</script>

可以向为事件绑定的方法中传入原始DOM事件：

<div id="test">
　　<input v-on:click="sayMyValue($event)" type="button" value="我的值"/>
</div>
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {},
　　　　methods : {
　　　　　　sayMyValue(event){
　　　　　　　　if(event){
    　　　　　　　　alert(event.target.value);
　　　　　　　　}else{
    　　　　　　　　alert("没传进来");
　　　　　　　　}
　　　　　　}
　　　　}
　　});
</script>

v-on指令可以被简写为@：

<div id="test">
　　<input @:click="sayMyValue($event)" type="button" value="我的值"/>
</div>
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {},
　　　　methods : {
　　　　　　sayMyValue(event){
　　　　　　　　alert(event.target.value);
　　　　　　}
　　　　}
　　});
</script>

常用的事件：

 

事件修饰符：（将常用的操作提取出来，提供相应简写）

按键修饰符：（将常用的键盘值对应行为提取出来，提供相应简写）