02.Vue学习-方法、事件、修饰符

1.0 Vue的方法(methods)

methods['meθədz] 方法

<div id="app">
    {{num}}
    <!-- `getTime` 是在下面定义的方法名 -->
    <div>方法:{{getTime()}}</div>
    <!--控制台输入  vm.addNum()按回车 num和getTime() 会被刷新-->
    <p>计算属性:{{now}}</p><!--不会被刷新-->
</div>

var vm = new Vue({//vue实例
    el: '#app',
    data: {
        num: 0
    },
    // 在 `methods` 对象中定义方法
    methods: {//专门存放函数
        //声明函数时不要使用箭头函数 没有this
        addNum() {
            this.num++// `this` 在方法里指向当前 Vue 实例
        },
        //带return值的函数方法与计算属性相似但是计算属性自带缓存，而方法不会缓存
        getTime() {
            return new Date().toLocaleTimeString()
        }
    },
    computed: {
        now() {
            // 计算属性自带缓存,计算属性会检测函数内部的依赖是否发生改变如果未改变,将使用之前缓存的数据
            // new Date() 并不属于vue实例中的属性或计算属性,所以他不能作为依赖
            return new Date().toLocaleTimeString()
        }
    }
})
vm.addNum()// 也可以用 JavaScript 直接调用方法

2.0 事件的使用

2.1 v-on:事件名 监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

v-on:事件名是vue用来绑定事件的,v-on可以缩写为@符号
事件被触发时调用的方法 如果无需传参,事件将会自动把event事件对象作为参数传入函数中
​ 但是如果需要手动传参时,event事件不会自动传入函数中
​ 解决方法自己手动添加event事件对象,在vue模板中event对象就叫做event/$event

<button v-on:click="addNum">+</button>
<button v-on:click="decNum">-</button>
<button @click="addNum">+</button>
<button @click="decNum">-</button>

输入框事件实现v-mode双向绑定的功能

<!--onchange光标失去时获取-->
<!--oninput值改变时获取-->
<input :value="val" @input="inputFunc">
{{val}}

2.1 事件传参

<p @click="argumentsFnc($event,12)">传参</p>
<p @click="argumentsFnc(event,12)">传参</p>
<!--$event/event当前实例对象-->

2.2 事件修饰符

2.2.1 .stop阻止事件冒泡和捕获

<div style="background: blue" @click="()=>{console.log('我被点击了')}">
    <div @click.stop="addNum" style="width: 100px;height: 100px;background: red;">big
        <span style="background: green;">small</span>
    </div>
</div>

2.2.2 .capture使用捕获

<div style="background: pink" @click.capture="()=>{console.log(1)}">1
    <div style="background: green; width: 100px;height: 100px;" @click.capture="()=>{console.log(2)}">2
        <span style="background: blue; padding: 10px;" @click.capture="()=>{console.log(3)}">3</span>

2.2.3 .prevent阻止表单的提交

<form action="">
    <input type="text">
    <input type="submit" @click.prevent>
</form>

2.2.4 .self 当前元素自身才会被触发事件

<div @click.self="addNum" style="width: 100px;height: 100px;background: red;">big
    <span style="background: green;">small</span>
</div>

2.2.5 .once绑定的事件只触发一次

<button v-on:click.once="addNum">该事件只被触发一次</button>

new Vue({
    el: '#app',
    data: {
        num: 0,
        val: 'hello world'
    },
    methods: {
        addNum(e) {
            this.num++
            console.log(e.target)//本身
        },
        decNum() {
            this.num--
        },
        inputFunc(e) {
            console.log('正在输入中...')
            this.val = e.target.value
        },
        argumentsFnc(e, num) {// `e` 是原生 DOM 事件
            console.log(arguments)
            console.log(e)
        }
    }
})

3.0 按键修饰符

3.1 按键修饰符

@按键事件.keycode=函数, 当指定keycode值的按键被按下或松开时才触发该函数

<!--<input @keyup="keyupFnc">-->
<input @keyup.13="keyupFnc">
{{str}}

new Vue({
    el: '#app',//绑定app
    data: {
        str: ''
    },
    methods: {//方法
        keyupFnc(e) {
            console.log(e)
            // enter键 13
            /*if (e.keyCode === 13) {
                this.str = e.target.value
                e.target.value = ''
            }*/
            this.str = e.target.value
            e.target.value = ''
        }
    }
})

3.2 按键别名

keycode值比较难以记忆,vue给功能键提供了别名
.enter .tab .delete .esc
.space .up .down .left .right
系统修饰按键 .ctrl .alt .shift .meta(windows/苹果command)

<input @keyup.enter="keyupFnc">{{str}}

3.3 按键可以组合

系统修饰按键可以与其他按键组合,绑定给keyup事件时如果想要触发必须先按住不放系统修饰键再按常规键

<!--alt+a-->
<input @keyup.alt.65="keyupFnc">
<!--ctrl+enter-->
<input @keyup.ctrl.enter="keyupFnc">
<!--按a或按enter都会触发，不能一起使用-->
<input @keyup.enter.65="keyupFnc">不成功的
<!--{{str}}-->

3.4 click+系统修饰符

<div @click.ctrl="()=>{console.log('测试')}">click + 系统修饰符</div>
<div @click.alt="()=>{console.log('测试')}">click + 系统修饰符</div>
<!--无效-->
<div @click.enter="()=>{console.log('测试')}">click + 系统修饰符</div>

3.5 严格按键修饰符 exact

​ 上面的例子中 在按住alt的情况下再按住其他键(例如 shift ctrl等等)点击元素时同样会触发绑定的函数
​ 但是使用了严格修饰符时,下面的例子再按住ctrl键的同事如果按了其他键该点击不会被触发,只有在仅仅按下ctrl键(无其他键被按下时)点击元素才会会触发

<div @click.ctrl.exact="()=>{console.log('严格按键测试')}">click + 系统修饰符 + exact</div>

3.6 鼠标按键

vue也提供了鼠标按键 left,right,middle

<div @mouseup.middle="()=>{console.log('鼠标中间滚轮')}">鼠标滚轮点击</div>

等同于下面的代码

<div id="test">123</div>
<div id="output"></div>
<script>
    var div = document.getElementById('test')
    var output = document.getElementById('output')
    div.onmousedown = function(e) {
        console.log(e)
        output.innerHTML = e.button//鼠标 0左 1中 2右
    }
</script>