vue语法-01

vue其他语法：

1. 事件监听：

v-on的基础语法：
v-on:监听的事件=“事件函数”
语法糖：上边格式可以改为：@监听的事件=“事件函数”

传递参数的问题：
1.当我们不需要传递参数的时候，后面函数的括号（）可以不用写，但是注意，既是不写（），也会默认传递一个原生事件event对象
2.当我们传递多个参数的时候，也需要传递原生事件event对象时，可以使用$event来作为形参传递。
实例：

<div id="app">
    <!--不传递参数：默认传递一个原生的event的对象-->
    <button v-on:click="button1">点击我1</button>
    <!--传递二个参数,如果也要传递event原生事件，则需要$event传递-->
    <button @click="button2('张三',$event)">点击我2</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const vue = new Vue({
    
        el: "#app",
        data: {
    

        },
        methods:{
    
            button1: function (event){
    
                console.log(event);
                console.log("button1被点击了")
            },
            /*函数的简写方式，等同于上边*/
            button2(name,event){
    
                console.log(name);
                console.log(event);
                console.log("button2点击了")
            }
        }
    })
</script>

v-on的修饰符：
1.stop：停止冒泡，当前事件的父级还有事件时，可以使用这个修饰符，使父级事件不触发
2.pervent：阻止默认事件，例如：当我门使用form表单提交时，可以点击submit按钮提交，当我们不想这样提交，想要触发事件，自己调用函数提交时，可以使用perevent修饰符，阻止这个按钮的默认事件。
3.{keyCode | keyAlias}：键修饰符，指定那个键点击了，触发事件。例如：@keyup.键=“事件”：当指定的键抬起时，触发事件
4.once：函数只触发一次

2. v-if、v-else-if、v-else

这三个指令和我们再js中使用的if、else-if、else很类似，在vue中，这三个可以根据表达式的结果决定是否渲染、销毁元素或组件。当表达式为false时，对应的标签根本不会出现在DOM中。

<div id="app">
    <span v-if="type">
        <label>用户名</label>
        <input type="text" placeholder="请输入用户名" key="username-input"/>
    </span>
    <span v-else-if="!type"