vue中的事件，表单输入绑定，计算属性computed及监听属性watch

事件：
1.事件三要素：

	事件目标
    事件对象
    事件处理程序

2.事件流

 默认情况，先进行事件捕获(从外向内)，再进行事件冒泡（从内向外）

3.事件绑定

 app实例对象能够获取/操作data/methods中的变量
 1.直接操作变量
     v-on:click='num++'       //num是data中的变量
 2.调用函数
     v-on:click='handler'       //在handler声明时，可以写入形参event，即事件对象,
 3.传递参数
     常量： v-on:click='handler(1)'
     变量：v-on:click='handler(a)'
     事件对象：v-on:click='handler($event)'     //$event:vue的内部属性

4.事件修饰符：
注：修饰符可以连用

 .stop:停止事件冒泡
     v-on:click.stop='handler'
 .prevent:组织事件默认行为
   实例： <form action="1.html" v-on:submit.prevent>
               <h1>签到</h1>
               <input type="number">
               <button>submit</button>
           </form>
 .capture:在事件捕获阶段执行事件处理函数
 .self:只当在event.target是当前元素时触发处理函数
 .once:事件处理函数执行一次后解绑
 .passive:滚动事件的默认行为(即滚动行为)将会立即触发，一般与scroll连用，能够提升移动端的性能

5.按键修饰符：

     一般与keyup事件类型配合使用
     .enter   .right  .delete....

6.鼠标修饰符：

  .left   .right .middle

7.表单输入绑定

  v-model:    绑定给了input的value值
        双向数据绑定
        1.单行输入框： <input type="text" v-model='value'>  value在data中声明
        2.多行文本框：<textarea cols="30" rows="10" v-model='value'></textarea>
        实例：
            <b>{{checks}}</b>
            <table>
                <tr v-for='item in users'>
                    <td>
                        <input type="checkbox" :value='item.id' v-model='checks'>
                    </td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.gender}}</td>
                </tr>
            </table>
    修饰符：增加表单绑定能力
        .lazy:不时时同步，在change时更新
        .number:想要自动将用户输入值转换为数值类型，可给v-model添加number修饰符
        .trim:自动过滤首位空字符
            实例：
                |<b>{{value}}</b>|
                <input type="text" v-model.trim='value'>

8.计算属性：

   computed:{
        //多个计算属性
        reverStr(){
            return this.str.split('').reverse().join('')
        }
    }
    
    与data同级别
    希望一个变量经过某种计算然后输出，而不是直接输出
            反转输出：<b>{{str.split('').reverse().join('')}}</b>
    computed:
        实例1：
            html代码：   
                                <input type="text" v-model='str'>
                        原值输出：<b>{{str}}</b><br>
                        反转输出：<b>{{str.split('').reverse().join('')}}</b><br>
                        反转输出2：<b>{{reverseStr}}</b>
            js代码：    computed:{
                            //存放计算属性
                            reverseStr(){
                                return this.str.split('').reverse().join('')
                            }
                        }
        实例2：
            html代码：
                <table>
                    <tr v-for='item in newUsers'>
                        <b>{{checks}}</b>
                        <td>
                            <input type="checkbox" :value='item.id' v-model='checks'>
                        </td>
                        <td>{{item.name}}</td>
                        <td>{{item.age}}</td>
                        <td>{{item.gender}}</td>
                        <td>{{item.date}}</td>
                    </tr>
                </table>
                <button>批量删除</button>
            js代码：
                computed:{
                    //存放计算属性
                    newUsers(){
                        this.users.forEach(function(item){
                            item.date=new Date(item.date).toLocaleDateString();
                        })
                        return this.users;
                    }
                }

7.监听属性：

  与data同级别
    当需要在数据变化时执行异步函数或开销较大的操作时，使用监听器是最有用的
    watch:
        1.默认只能监听栈区中的变量(基本数据类型)
            实例：
                js代码：
                    watch:{
                        //默认只能监听栈区中的变量
                        substr(newstr,oldstr){
                            alert(newstr,oldstr);
                        }
                    }
                html代码：
                    {{substr.name}}
                    <input type="text" v-model='substr.name'>
        2.当deep为true时表示深度监听
            实例：
                js代码：
                    watch:{
                        substr:{
                            //handler必须为handler
                            handler(newstr,oldstr){
                                alert(newstr,oldstr);
                            },
                            deep:true
                        }
                    }
                    html代码：
                    {{substr.name}}
                    <input type="text" v-model='substr.name'>