1.输入的事件处理
input框中的三个事件：
input 当输入框进行输入的时候 触发的事件
change 当元素的值发生改变时 触发的事件
blur 当输入框失去焦点的时候 触发的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>v-model的使用</h1>
<input type="text" v-model="msg" @blur="handleBlur" @change="handleChange">
<input type="text" v-model="msg" @input="handleInput">
<br>
{{msg}}
<hr>
<h1></h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: ''
},
methods: {
handleBlur() {
console.log("blur",this.msg)
},
handleChange() {
console.log("change",this.msg)
},
handleInput(){
console.log('input',this.msg)
}
}
})
</script>
</html>
2.数据双向绑定
2.1 v-model的基本使用
# v-model 相当于 给input框 绑定value
<input v-model="message" placeholder="edit me"> # placeholder是提示
<p>Message is: {{ message }}</p>
2.2 v-model的修饰符
# .lazy 等待input框的数据绑定后，发生改变后再变化
在默认情况下，v-model 在每次input事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。
你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
# .number 数字开头，只保留数字，后面的字母不保留；字母开头，都保留
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。
如果这个值无法被 parseFloat() 解析，则会返回原始的值。
# .trim 去除首尾的空格
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- lazy的使用：<input type="text" v-model.lazy="msg"> {{msg}}-->
<!-- number的使用：<input type="text" v-model.number="msg"> {{msg}}-->
trim的使用：<input type="text" v-model.number="msg"> {{msg}}
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
msg:''
},
methods: {
},
})
</script>
</html>
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绑定的变量就行了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" placeholder="请输入用户名："><br>
<input type="password" placeholder="请输入密码："><br>
<input type="checkbox" v-model="checked">记住用户名
<hr>
<input type="radio" v-model="picked" value="1">男
<input type="radio" v-model="picked" value="2">女
<input type="radio" v-model="picked" value="0">保密
<br><br>您选择的性别：{{picked}}
<hr>
<input type="checkbox" v-model="checkedHobby" value="1">篮球
<input type="checkbox" v-model="checkedHobby" value="2">足球
<input type="checkbox" v-model="checkedHobby" value="3">棒球
<input type="checkbox" v-model="checkedHobby" value="4">桌球
<br><br>您喜欢的球类：{{checkedHobby}}
<hr>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br><br>您选择的是：{{ selected }}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
picked: '', // radio，是字符串，选择谁，字符串就变成选中的value值
checked: false, // 如果是只有一个checkbox，绑定的值就是true和false
checkedHobby:[] // checkbox多选，绑定的值就是数组，选择以后，数组中放选中的value值
selected:'', // select单选，是字符串，选择谁，字符串就变成选中的value值
// select多选,绑定的值就是数组，选择以后，数组中放选中的value值
},
methods: {}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="mytext" @input="handleInput">
<li v-for="item in newDataList">{{item}}</li>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
mytext: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
newDataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
},
methods: {
handleInput() {
// console.log(this)
// var _this=this // 普通匿名函数内部的this和外部的this不是一个
// this.newDataList = this.dataList.filter(function (item) {
// var res = item.indexOf(_this.mytext)
// if (res > -1) {
// return true
// } else {
// return false
// }
//
// })
this.newDataList = this.dataList.filter( (item) => {
return item.indexOf(this.mytext)>-1
})
// this.newDataList = this.dataList.filter((item) => item.indexOf(this.mytext)>-1
}
}
})
</script>
</html>
5.事件修饰符
.stop 只处理自己的事件，阻止事件冒泡, 写在子控件中
.self 只处理自己的事件，子控件冒泡的事件不处理， 写在父控件中
.prevent 阻止默认事件 例如：阻止a链接默认跳转， 变成执行自己的方法
.once 事件只会触发一次（适用于抽奖页面）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!--<ul @click="handleUl">-->
<ul @click.self="handleUl">
<li @click.stop="handleLi">我是li1,阻止了事件冒泡</li>
<li @click="handleLi">我是li2，不阻止事件冒泡</li>
</ul>
<a href="https://www.baidu.com/" @click.prevent="handleA">致命诱惑</a>
<button @click.once="handleMS">秒杀</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {},
methods: {
handleLi(){
console.log('li被点击了')
},
handleUl(){
console.log('ul被点击了')
},
handleA(){
console.log('a标签被点击了')
window.location='https://www.baidu.com/' // 自己决定要不要跳
},
handleMS(){
console.log("handleMS")
}
}
})
</script>
</html>
6.按键修饰符
# 按键事件
keyup 键按下，并弹起时 才触发事件 # 常用
keydown 键按下就触发事件
# 按键修饰符
# 常用
.enter
.esc
.delete (捕获 "删除" 和 "退格" 键)
.tab
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta Windows上就是window键， Mac上是command 键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 当敲回车，弹出输入的内容-->
<input type="text" v-model="msg" @keyup.enter="handleUp($event)">
<input type="text" v-model="msg" @keyup.esc="handleUp($event)">
<input type="text" v-model="msg" @keyup.esc="handleUp"> # 也可以不传参，不知道为啥
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
msg:''
},
methods: {
handleUp(event){
console.log(event.code)
}
}
})
</script>
</html>
补充
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
}
})
