Vue学习03

一、事件监听

• 方法传递参数

事件传递参数的方式以及浏览器event
<div id="app">
        <!-- 1.事件调用的方法没有参数 -->
        <button @click="btnClick()">按钮1</button>
        <button @click="btnClick">按钮2</button>

        <!-- 2.在定义方法时，本需要传递参数的没有传递参数的
            此时 Vue会默认将浏览器生产event事件对象作为参数传到方法中去 -->
        <button @click="btn2Click(123)">按钮3</button>
        <button @click="btn2Click(event)">按钮4</button>
        <button @click="btn2Click">按钮5</button>

        <!-- 3.定义方法时，我们需要event对象，同时又需要其他参数 
            在调用时如何手动调用浏览器传递的参数event对象：$event
        -->
        <button @click="btn3Click(123,$event)">按钮6</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                event:0
            },
            methods:{
                btnClick(){
                    console.log("btnclick执行。。。。");
                },
                btn2Click(event){
                    console.log("btn2Click执行了。。。。"+event);
                },
                btn3Click(abc,event){
                    console.log("btn3Click执行了 。。。。"+abc+" "+event);
                }
            }
        })
    </script>

• v-on修饰符

<div id="app">
 <!-- 1.阻止冒泡事件 调用event.stopPropagation() -->
 <div @click="divClick">
    <button @click.stop="btnClick">按钮</button>
</div>
<br>
<!-- 2.组织默认事件的执行 调用event.preeventDefault阻止默认行为 -->
<form action="baidu.com">
    <input type="submit" value="提交" @click.prevent="doSubmit">
</form>

<br>
<form action="http://www.baidu.com"  @submit.prevent="doSubmit">
    <button>按钮</button>
</form>

<br>
<!-- 3.键盘事件 .enter -->
<input type="text" value="" @keyup="keyCode">

<br>
<!-- 4.once只渲染一次 -->
<button @click.once="btnOnce">once</button>

<!-- 5.串联修饰符 -->
<button @click.stop.prevent="btnClick">串联修饰符</button>
</div>
   
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                
            },
            methods:{
                divClick(){
                    console.log("diVClick....");
                },
                btnClick(){
                    console.log("btnClick.....");
                },
                doSubmit(){
                    console.log("doSubmit......");
                },
                keyCode(){
                    console.log("keyCode.........");
                },
                btnOnce(){
                    console.log("btnOnce.........");
                    
                }
            }
        })
    </script>

二、条件判断

• if -else使用

if条件传递类型为Boolean看是否成立，条件成立Vue 渲染虚拟DOM
 <h1 v-if="isRed">
           <div>aaa</div>
            {{name}}
 </h1>
    <h2 v-else>当if为false时显示</h2>

data:{
	name:'你好！',
	isRed:true,
}

V-show:条件也是Boolean类型 当条件不成立时DOM存在，