vue用户交互实现

        1、前言

        2、侦听器watch、事件监听v-on以及属性计算computed

        3、常用键盘以及鼠标事件

        4、常用事件

---

1、前言

        本文旨在介绍vue中实现用户交互的常见方式以及用法，如果有不当之处欢迎指出

---

2、侦听器watch、事件监听v-on以及属性计算computed

        事件的处理在前端应用中十分广泛，正确并流畅地使用相应的事件处理方式，将会极大程度的改善用户的实际交互体验以及操作感受。

（1）侦听器watch

        侦听器watch常用于vue中的属性监听，可以在vue实例对象中添加watch属性来对某个对象的属性百年换进行侦听：

<input type = "text" :valueWord = "value" v-model = "inputText"/>
<template>
    <p>{{msg}}</p>
</template>
<script>
    export default{
        data(){
            return{
                valueWord = "please input your numbers",
                msg = ""
            }
        }
        watch{
            inputText(oldval,newval){
                if(newval.length == 0)
                    msg = "not numbers!"
            }
                
        }
            
    }

        以上代码中，watch监听着input内的属性变换，如果输入值为空的时候便会在页面中出现not number的字样，实际上这有点类似于条件判定，但是这个watch是设置在属性里面的，可以根据不同的应用场景选择不一样的判定方式。

（2）事件监听v-on

        v-on是一种页面事件监听方法，通常可以使用@替代v-on添加到所要监听事件的内联式中：

<button @click = "num++">按钮点击了{{num}}次</button>
    
   
<script>
    export default{
        data(){
            return{
                num : 0
            }
        }
            
    }

        不过我们经常都是使用自定义函数来处理对象响应的事件：

<template>
    <button @click = "CountAdd">{{Count}}</button>
    <button @click = "ChangeColor(color)">改变按钮颜色</button>
    <input type="text" v-model = "color"/>
</template>
    
<script>
    export default{
        data(){
            return{
                Count : "0",
                color : ""
            }
        }
        mathods{
            CountAdd(){
                Count ++
            },
            ChangeColor(Color){ //括号内的是形参，上述中是color作为实参传入作为Color进行函数处理
                this.style.color = Color //this指的是该事件触发时的本体对象
            }
        }
    }
</script>

        如上我们可以看出其实在自定义函数处理方式中和js的函数使用基本一致，上手还是很快的

（3）属性计算computed

        computed是一种属性计算方式，同样他也是定义在属性里面，不是和v-on那样的内联式应用，computed在计算属性的同时可以同时影响计算值以及被计算值，并且在页面同步更新

<template>
    <button :id="btn1" @click = "num1 ++">{{num1}}</button>
    <button :id="btn2" @click = "num2 += 2">{{num2}}</button>
    <p>以上的和为<button :id="sum" @click = "sumAdd">{{sum}}<button></p>
    <p>{{type}}</p>
</template>
<script>
    export default{
        data(){
            return{
                num1:0,
                num2:0
            }
        }
        methods{
            sumAdd(){
                sum = num1 + num2
            }
        }
        computed{
            type(){ //实际上这就是取值操作，默认就是get操作
               return sum>10?"超过10":"小于10" 
            }
        }  
    }
</script>

        事实上，computed只用于数据的取值，其并不会对计算得来的数据进行存值操作，如果想要保存，可以试着使用set方法，以上默认的其实是get取值方法，仅会在视图上进行数据的更新，是无法去进行保存的：

<template>
    <button :id="btn1" @click = "num1 ++">{{num1}}</button>
    <button :id="btn2" @click = "num2 += 2">{{num2}}</button>
    <p>以上的和为<button :id="Sum" @click = "sumAdd">{{sum}}<button></p>
    <p :name="">{{get}}</p>
</template>
<script>
    export default{
        data(){
            return{
                num1:0,
                num2:0
            }
        }
        methods{
            sumAdd(){
                sum = num1 + num2
            }
        }
        computed{
            get(){ //以上的type实际上这就是取值操作，默认就是get操作
               return sum>10?"超过10":"小于10" 
            },
            set(newval){
                    this.name = sum //我们将加到的值赋值到该取值的p的名称值中
            }
        }  
    }
</script>

        注意：当没有设置存值操作时，该数据只是一个只读属性的数据，我们并不能对其进行赋值操作，否则会产生异常报错

 （4）监听事件中可以使用的常用修饰符

        语法：

<button @cilck.stop = "func">touch me</button>

        常用修饰符：

stop	阻止事件冒泡以及传递
once	设置仅触发一次该事件
prevent	禁止事件的默认行为
passive	不禁止事件的默认行为
capture	监听捕获场景的事件
self	当事件对象目标属性是当前组件才触发

---

3、常用的键盘事件以及鼠标事件

        键盘事件被称为按键修饰符，我们可以通过keyup参数进行某个按键的监听

<input type="text" @keyup.enter="keyup"></input>
<script>
    keyup(event){
        if(event.key == 'Enter')
            alert("回车键被按下")
    }
</script>

        但是要注意，按键修饰符的命名规则与event对象中的key命名规则是不同的，event使用的是大写字母驼峰法，例如PageUp、Shift等，但是实际上，在使用按键修饰符的时候需要转化为中划线驼峰法，如page-up、shift

<input @mousedown.ctrl = "func">按下鼠标以及ctrl键</input>
//通常还会使用到鼠标和键盘的结合来触发对应事件

---

4、常用事件

（1）鼠标事件

mousedown	鼠标按键被按下事件
mouseup	鼠标按键抬起事件
mousemove	鼠标在组件内移动触发事件
mouseout	鼠标移出组件触发事件（离开子元素也触发）
mouseleave	鼠标移出组件触发事件（离开整个组件才触发）
mouseover	鼠标悬停在组件时触发事件
mouseenter	鼠标进入元素组件触发事件

（2）键盘事件

keydown	键盘按键被按下
keyup	键盘按键被抬起

（3）其他常用事件

click	当组件被单击时触发的单击事件
dblclick	当组件被双击时触发的事件
focus	当焦点被组件获取时触发事件，常用于输入框编辑
blur	当焦点失去的时候触发的事件，常用于输入框取消编辑
change	判定元素内容的改变的触发事件，常用于输入框输入完成发生变化
select	元素内容被选中时会触发的事件

---

笔者才疏学浅，如有不足欢迎指导交流