day2

1 vue.js事件处理

我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="counter += 1">{{counter}}</button>
        <button v-on:click="cl">测试1</button>
        <button @click="c('b')">测试2</button>
    </div>
    <script>
        var v = new Vue({
            el:"#app",
            data:{
                counter:0,
            },
            methods:{
                cl:function(){
                    alert("aaaaaaaaaaaaaaaa");
                },
                c:function(b){
                    alert("aaaa"+b);
                }
            }
        })
    </script>
</body>
</html>

可以看到分别点击页面中的三个按钮，结果如上图所示。每点一下第一个按钮按钮上的数字就会加一；点第二三个按钮后会弹出一个警告框。

1.1 事件修饰符

stop 阻止冒泡
prevent 阻止默认事件
once 只触发一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <button v-on:click="cl">{{message1}}</button>
        <button v-on:click.once="c2">{{message2}}</button>
        <a href="http://cnblogs.com" target="_blank">普通链接</a>
          <a @click.prevent href="http://cnblogs.com" target="_blank">取消默认行为</a>

    </div>
    <script>
        var demo = new Vue({
            el:'#demo',
            data:{
                message1: "hello",
                message2: "hello",
                counter:0,
            },
            methods:{
                cl(){
                    this.message1 = this.message1 + ' vue!';
                },
                c2(){
                    this.message2 = this.message2 + ' vue!';
                },
            }
        })
    </script>    
</body>
</html>

可以发现点击‘取消默认行为’后无法条撞到对应的链接了，因为prevent可以阻止默认事件。

1.2 鼠标修饰符

left 左键
right 右键
middle 滚轮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
  <div id="demo">
     <button @mouseup.right="right" @mouseup.middle="middle" @mouseup.left="left">{{message}}</button>
    </div>
    <script>
        var demo = new Vue({
            el:'#demo',
            data:{
                message: "hello",
               text:'点我'
            },
            methods:{
                left(){
                  this.message = 'left'
                },
                right(){
                  this.message = 'right'
                },
                middle(){
                  this.message = 'middle'
                },
            }
        })
    </script>
</body>
</html>

分别点击鼠标左键，右键和滚轮时，会触发不同的事件。

1.3 键值修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符。

.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <button v-on:keyup.enter="enter">{{message}}</button>
        <button @keyup.tab="tab">{{message}}</button>
        <button @keyup="show($event)">{{message}}</button> <!--获取事件对象-->
    </div>
    <script>
        var demo = new Vue({
            el:'#demo',
            data:{
                message: "hello",
            },
            methods:{
                enter(){
                    this.message = 'enter'
                },
                tab(){
                    this.message = 'tab'
                },
                show(e){
                    this.message = e.keyCode
                }
            }
        })
    </script>    
</body>
</html>

当事件聚焦到相应的按钮上的时候，按下键盘上相应的键就会执行相应的结果

1.4 表单事件

在进行表单提交时，页面会刷新，导致我们绑定的表单提交事件执行出问题，会避免刷新，我们需要使用阻止修饰符。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <form method="GET" action="https://www.hao123.com" v-on:submit.prevent="ff">
            <input type="submit" value="提交">
        </form>
    </div>
    <script>
        var v = new Vue({
            el:"#app",
            data:{
                message:"123"
            },
            methods:{
                ff(){
                    alert("abc")
                }
            }
        })
        
    </script>
</body>
</html>

加入了阻止修饰符后页面就不会跳转了

2 vue.js之条件渲染指令

2.1 v-if

v-if主要用来进行条件渲染。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <p v-if="message">message</p>
        <p v-if="infor">infor</p>
    </div>
    <script>
        var demo1 = new Vue({
            el:'#demo',
            data:{
                message:true,
                infor:false
            },
        })
    </script>    
</body>
</html>

可以看到值为false时，页面中不会渲染

2.2 v-else和v-else-if

我们可以使用 v-else 指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。而v-else-if则是充当 v-if 的“else-if 块”，可以链式地使用多次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-if="message">aaaaaaaaaaaaaaa</div>
        <div v-if="info">bbbbbbbbbbbbbbbb</div>
        <div>{{type}}</div>
        <div v-if="type === 1">111111</div>
        <div v-else-if="type === 2">22222222</div>
        <div v-else>66666</div>
        <button @click="b">计算</button>
    </div>
    <script>
        var v = new Vue({
            el:"#app",
            data:{
                message:true,
                info:false,
                type:0,
            },
            methods:{
                b:function(){
                    if(this.type > 3){
                        this.type = 1
                    }else{
                        this.type++
                    }
                }
            }

        })
    </script>
</body>
</html>

在上面的例子中，通过点击事件改变了type的值，从而改变了页面元素的渲染。
注意：type的值改变后上面的判断结果也会跟着改变

2.3 用 key 管理可复用的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <span v-if="loginType === 'username'">
         <label>Username</label>
         <input placeholder="Enter your username" >
     </span>
     <span v-else>
         <label>Email</label>
         <input placeholder="Enter your email address" >
     </span>
     <button v-on:click="test">切换</button>
    </div>
    <script>
        var demo1 = new Vue({
            el:'#demo',
            data:{
                loginType: 'username'
            },
            methods:{
                test:function(){
                    if(this.loginType != 'username'){
                        return this.loginType = 'username'
                    }
                    return this.loginType = 'email'
                }
            }
        })
    </script>        
</body>
</html>

在上面的例子中，首先显示的是用户名输入框，点击切换后显示的邮箱输入框，一切都很正常。但是当我们在用户名输入框中输入相应内容后再点击切换，会发现我们刚刚输入的用户名出现在了邮箱处：

之所以会出现这种情况，是因为Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做，除了使 Vue 变得非常快之外，还有一些有用的好处。所以，在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模版使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。
虽然这样能高效快速的渲染元素，但是又很多实际情况是不希望元素被复用的，要解决上面的问题，除了将元素再进行包裹外，Vue 还提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <span v-if="loginType === 'username'">
         <label>Username</label>
         <input placeholder="Enter your username" key='username-input'>
     </span>
     <span v-else>
         <label>Email</label>
         <input placeholder="Enter your email address" key='email-input'>
     </span>
     <button v-on:click="test">切换</button>
    </div>
    <script>
        var demo1 = new Vue({
            el:'#demo',
            data:{
                loginType: 'username'
            },
            methods:{
                test:function(){
                    if(this.loginType != 'username'){
                        return this.loginType = 'username'
                    }
                    return this.loginType = 'email'
                }
            }
        })
    </script>        
</body>
</html>

这样就可以按照实际运用情况来处理不希望被复用的元素了，需要注意的时，在这里<label> 元素仍然会被高效地复用，因为它们没有添加 key 属性。

2.4 v-if和v-show

v-show也是根据条件展示元素的指令。带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。

v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <p v-if="message">message</p>
        <p v-if="infor">infor</p>
    </div>
    <script>
        var demo1 = new Vue({
            el:'#demo',
            data:{
                message:true,
                infor:false
            },
        })
    </script>    
</body>
</html>

页面结构

v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <p v-show="message">message</p>
        <p v-show="infor">infor</p>
    </div>
    <script>
        var demo1 = new Vue({
            el:'#demo',
            data:{
                message:true,
                infor:false
            },
        })
    </script>    
</body>
</html>