vue学习笔记（v-if v-on）

v-if

v-if和v-show

1.v-show: v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用

2.v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适

<div>
        <template v-if="showtitle">
            <h1>Title</h1>
            <span>title</span>
        </template>
        <br>
        <button @click="showtitle=!showtitle">隐藏</button>
    </div>
<div>
    
        <h1 v-show="show">show</h1>
       
    <br>
    <button @click="show=!show">隐藏</button> 
</div>

运行结果：

当点击隐藏按钮时的渲染

当显示时的渲染

3.当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行

<li v-for="(todo,key,index) in todos" v-if="todo.done">
        {{todo.name}}
    </li>

运行报错，先运行v-if时还没有todo

<!--使用v-for需要绑定一个key属性-->
<li v-for="(todo,key,index) in todos"  :key="todo.name">
        <template  v-if="todo.done">
            {{todo.name}}
        </template>
       
    </li>

data()
            {
                return{
                    type:'A',
                    showtitle:true,
                    show:true,
                    todos:[
                    {
                        name:'吃饭',
                        done:true,
                    },
                    {
                        name:'睡觉',
                        done:false,
                    },
                    {
                        name:'打豆豆',
                        done:true,
                    }
                ]
                }
                
               
            },

运行结果

v-on

1.v-on使用时，可以直接写方法名，不用加括号，一旦加括号，则需要传递参数

<button @click="greet">按钮</button>
<button @click="greet($event)">按钮</button>
<button @click="say('hello',$event),greet($event)">Say hello</button>

 methods:{
                greet(event)
                {
                    console.log(event);
                    console.log(event.target);
                    console.log('hello ' +this.name+' !' );
                    if(event)
                    console.log(event.target.tagName);
                    
                },
                say(message,event){
                        alert(message);
                        alert(event.target.tagName);
                        console.log(event.target);
                },
            }

1. 事件修饰符

• .stop

• .prevent

• .self

• .capture

• .once

• .passive

prevent/stop/enter的使用

 <a href="https://www.baidu.com/" id="goBaidu"  @click.prevent="warns('.prevent use')">你点我试试</a>
        <div>
            <form action="/123" method="post">
                <input type="text" name="usrname1"  v-model="name">
                <input type="submit" value="默认提交">
             </form>
            <form action="/123" method="post" @submit.prevent="onSubmit">
                <input type="text" name="usrname2" v-model="user.name"><br>
                <input type="text" name="pass" v-model="user.pass"  @keyup.enter="onSubmit">
               <input type="submit" value="自定义提交">
            </form>
        </div>
        <input type="text" name="pass" v-model="user.pass"  @keyup.enter="onSubmit">
        <br>       
        <div :id="parent02" @click="alert(parent02)">
            <div  @click.stop="stopUps">
                <p @click="alert('这是p元素')">你再点我</p>
            </div>
        </div>

                warns(message)
                {  
                    
                    alert(message);
                },              
                onSubmit()
                {
                    //自定义提交表单
                    console.log(this.user);
                },
                stopUps(){
                    alert('.stop use');
                },
alert(message)
                {
                    alert(message);
                },

按键修饰符

常用的按键提供了别名：

• .enter

• .tab

• .delete (捕获“Delete”和“Backspace”两个按键)

• .esc

• .space

• .up

• .down

• .left

• .right

系统按键修饰符

可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。

• .ctrl

• .alt

• .shift

• .meta

<!-- Alt + Enter -->
<input @keyup.alt.enter="clearfn" v-model = "clear" />

<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>

 clearfn()
    {
        this.clear = '';
        console.log('@keyup.alt.enter');
    },
    doSomething()
    {
            
        console.log('click.ctrl');
    }

延伸：在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的，vue中直接使用上述的prevent和 stop

preventDefault：它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。当Event对象的cancelable为false时，表示没有默认行为，这时即使有默认行为，调用 preventDefault也是不会起作用的。

如果是正常情况下，当点击该元素，窗口会跳转到百度的首页，然而添加了click函数后，再点击该元素，它不会有任何反应，或者说，它反应之后的状态跟点击之前一样比较恰当，发生改变的根本，就是js中的preventDefault()，因为当a标签的href属性存在并有一个正确的地址时，点击它，它会跳转到对应的地址去，这就是它的默认行为，而preventDefault()的作用正是阻止这种行为。

<a href="https://www.baidu.com/" id="goBaidu"  @click="warn('event.preventDefault stop jump',$event)">你点我试试</a>

warn(message,event)
{  
    if(event)
    event.preventDefault();
    alert(message);
}

stopPropagation：也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。

“点我”可以打印两句，而“你再点我”只打印“这是p元素”不会打印第二句

 <div :id="parent01" @click="alert(parent01)">
            <div >
                <p @click="alert('这是p元素')">点我</p>
            </div>
        </div>
         
        <div :id="parent02" @click="alert(parent02)">
            <div  @click="stopUp($event)">
                <p @click="alert('这是p元素')">你再点我</p>
            </div>
        </div>
       

 data(){
                return {
                    parent01:'num1',
                    parent02:'num2',

                }
            },
            stopUp(event){
                    if(event)
                    event.stopPropagation(); 
                },
alert(message)
                {
                    alert(message);
                },