1.输入的事件处理

input框中的三个事件：
    input    当输入框进行输入的时候 触发的事件
    change   当元素的值发生改变时 触发的事件
    blur     当输入框失去焦点的时候 触发的事件

    
    
    



    
v-model的使用
	
    
    

    {{msg}}
    

    

2.数据双向绑定

2.1 v-model的基本使用

# v-model 相当于 给input框 绑定value
  # placeholder是提示
Message is: {{ message }}

2.2 v-model的修饰符

# .lazy    等待input框的数据绑定后，发生改变后再变化
    在默认情况下，v-model 在每次input事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。
    你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：

    
    

# .number    数字开头，只保留数字，后面的字母不保留；字母开头，都保留
    如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

    
    这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。
    如果这个值无法被 parseFloat() 解析，则会返回原始的值。

# .trim    去除首尾的空格
    如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

    

    
    
    





    trim的使用： {{msg}}

3.表单控制

# v-model 会根据控件类型自动选取正确的方法来更新元素，实现表单控制。
    它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。   
    
    v-model 会忽略所有表单元素的 value、checked、selected attribute的初始值，
    而总是将 Vue 实例的数据作为数据来源。应该通过JavaScript在组件的 data 选项中声明初始值。


# v-model 在内部为不同控件类型使用不同的property 并抛出不同的事件：
    text和textarea    使用 value 和 input 事件       ====  文本初始值+ input 事件
    checkbox和radio   使用 checked 和 change 事件    ====  勾选项的值+ change 事件
    select            使用 value 和 change 作为事件  ====  选择项的值+ change事件

    
    # 简之：
    	原生js获取对应input框的值，分别是 value,checked,value；
    	但是vue中，因为是双向数据绑定，直接点v-model绑定的变量就行了

    
    
    



    

    

    记住用户名
    

    
    男
    女
    保密
    

您选择的性别：{{picked}}
    


    篮球
    足球
    棒球
    桌球
    

您喜欢的球类：{{checkedHobby}}
    

    
	
        请选择
        A
        B
        C
	
	

您选择的是：{{ selected }}
	       

4.input事件案例--输入过滤

    
    
    



    
    
{{item}}

5.事件修饰符

.stop	只处理自己的事件，阻止事件冒泡, 写在子控件中
.self	只处理自己的事件，子控件冒泡的事件不处理， 写在父控件中

.prevent   阻止默认事件	例如：阻止a链接默认跳转， 变成执行自己的方法
.once	事件只会触发一次（适用于抽奖页面）

    
    
    




    
    

        
我是li1,阻止了事件冒泡
        
我是li2，不阻止事件冒泡
    

	致命诱惑

    秒杀

6.按键修饰符

# 按键事件
    keyup    键按下，并弹起时 才触发事件   # 常用
    keydown  键按下就触发事件
    
# 按键修饰符
    # 常用
    .enter
    .esc
    .delete  (捕获 "删除" 和 "退格" 键)
    
    .tab
    .space
    .up
    .down
    .left
    .right
    .ctrl
    .alt
    .shift
    .meta	Windows上就是window键， Mac上是command 键

    
    
    



	
    
    

      # 也可以不传参，不知道为啥

补充

JS数组的过滤方法

// .filter(匿名函数)   函数中，返回true就保留数据，false就去除数据


var l=['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
var new_l=l.filter(function (item) {
    // 写逻辑
    var res=item.indexOf('at')  // indexOf 检测某个字符串在另一个字符串的索引位置，如果不在字符串中就返回-1，如果在就返回位置
    if (res>-1){
        return true
    }else {
		return false
    }
})

console.log(new_l)


// es6语法，箭头函数 替换原来匿名函数，箭头函数内的this和外部的是一个this，普通匿名函数内部的this和外部的this不是一个
// 箭头函数： (参数) => {}

var new_l=l.filter( (item) => {
    var res=item.indexOf('at') 
    if (res>-1){
        return true
    }else {
         return false
    }
})