一、V-model指令.
在表单元素上的使用。
默认触发的是input事件。当文本框的值发生变化后，立刻同步给数据
（1）、针对文本框的双向绑定。基本用法。
当内容发生变化时，数据也发生变化
<div>
<!-- 针对文本框的双向绑定。默认触发的是input事件。
当内容发生变化时，数据也发生变化 -->
姓名： <input type="text" v-model="name">{{name}}
</div>
vue内容
data: {
name: '李易峰',
},
(2)、绑定多行文本域
<div>
<!-- textarea:多行文本域。cols：列。rows：行 -->
地址： <textarea cols="50" rows="5" v-model="address"></textarea>{{address}}
</div>
vue内容
data: {
name: '李易峰',
address: "四川省，成都市，金牛区",
},
（3）、绑定一组单选框。每个单选框指定相同的属性。
<input v-model="sex" type="radio" value="男" name="sex">男
<input v-model="sex" type="radio" value="女" name="sex">女
<span style="color: red;">{{sex}}</span>
vue:
sex: '男',
4、绑定单个复选框。需要绑定一个布尔值（Boolean）
<input type="checkbox" v-model="isOk">{{isOk}}
vue:
isOk: false,
（5）、绑定多个复选框。需要绑定同一个数组
<div>
<!-- v-model:绑定多个复选框，需要绑定同一个数组 -->
爱好：
<input v-model="hobbies" type="checkbox" value="唱歌">唱歌
<input v-model="hobbies" type="checkbox" value="演戏">演戏
<input v-model="hobbies" type="checkbox" value="旅游">旅游
<input v-model="hobbies" type="checkbox" value="看书">看书
<input v-model="hobbies" type="checkbox" value="看电影">看电影
<input v-model="hobbies" type="checkbox" value="健身">健身
<span style="color: red;">{{hobbies}}</span>
</div>
vue:
hobbies: ['唱歌', '演戏', '旅游', '看书'],
(6)、绑定一个数组
<div>
<!-- v-model:绑定一个数组 -->
喜欢的食物：
<!-- multiple:支持多个。 -->
<select multiple v-model="foods">
<option value="火锅">火锅</option>
<option value="串串">串串</option>
<option value="香蕉">香蕉</option>
<option value="苹果">苹果</option>
<option value="德芙">德芙</option>
<option value="奶酪包">奶酪包</option>
</select>
<span style="color: salmon;">{{foods}}</span>
</div>
vue:
修饰符：
（1）、.lazy修饰符。可以将input事件转换为change事件。
<input type="text" v-model.lazy.trim="name">开始{{name}}结束
（2）、.trim修饰符。用于去除内容首尾空格。
<input type="text" v-model.lazy.trim="name">开始{{name}}结束
</div>
（3）、.number修饰符。会自动将输入的内容转换为number。
年龄： <input type="text" v-model.number="age">{{age}}
二、绑定事件
1、@(v-on:)的简写。通过@指令绑定事件，指定一个methods选项里面定义的方法
（1）、调用方法时，不传参数。默认会将事件对象作为参数传递
<button @click="sayHi">sayHi</button
vue:
// e默认参数
sayHi(e) {
console.log(e);
alert('Hi!')
},
（2）、调用方法时，穿的什么参数，接的就是什么参数。
<button @click="sayHellow('hello')">sayHellow</button>
vue:
sayHellow(e) {
console.log(e);
alert("hello")
},
####（3）、调用方法时，传递一个$event参数，该参数就是事件对象
···
<button @click="sayNice('Nice',$event)">sayNice</button>
vue:
sayNice(msg, e) {
console.log(e);
alert(msg)
},
(4)、当事件处理的代码比较简单时，可以将代码直接写在行内。注意：只能操作vue管理的数据
<button @click='age++'>年龄++</button>
vue:
data: {
age: 34
},
(5)、.prevent。事件修饰符。用于阻止默认行为。
<div class="box" @contextmenu.prevent="showBox">
box
</div>
vue:
showBox(e) {
// 组织默认行为
// e.preventDefault();
alert('你好，我是BOX')
},
(6)、.once:用于只绑定一次的事件方法。
<div class="one" @click.once="one">
</div>
vue:
one() {
alert('你好，我是one')
},
(7)、.stop：用于阻止事件冒泡。
<div class="one" @click.once="one">
<!-- .stop:用于阻止事件冒泡 -->
<div class="two" @click.stop="two"></div>
</div>
vue:
two(e) {
// 阻止事件冒泡
// e.stopPropagation();
alert('你好，我是two')
},
(8)、.self:只能在自身元素上触发。不能在子元素上触发。类似冒泡。
<div class="box2" @click.self="showbox2">
<div class="box3">
</div>
</div>
vue:
showbox2() {
alert('你好，我是box2')
},
(9)、每次键盘弹起，都会调用事件函数。
请输入搜索关键字<input type="text" @keyup="keyup">
vue:
keyup(e){
alert('你按键了')
},
(10)、只在按下enter（回车键）的时候，才会调用事件方法。
请输入搜索关键字<input type="text" @keyup.enter="keyup1">
vue:
keyup1(e){
let {keyCode}=e
if (keyCode===13) {
alert('搜索指定的商品')
alert('你按下了回车键')
}
// alert('搜索指定的商品')
},
三、深度响应式
响应式：数据发生变化时，页面自动更新。
1、Vue通过$delete方法，删除对象的属性。并触发响应式
2、 在Vue中，操作数组，并触发页面更新，只能使用数组的以下方法.push,pop,unshift,shift,splice,reseolve,sort
arr:[11,22,33,44,55]
this.arr.push(66)
css:
<style>
#app button {
background-color: sienna;
color: wheat;
border-radius: 10px;
}
</style>
HTML:
<body>
<div id="app">
<div>
姓名： <input type="text" v-model="name">{{name}}
</div><br>
<div>
基本信息：
<input type="text" v-model="obj.name">
<input type="text" v-model.number="obj.age">
<button @click="addSex">添加性别</button>
<button @click="delAge">删除年龄</button>
<br><br>
{{obj}}
</div><br>
<div>
数组：{{arr}}
<br><br>
<button @click="addArr">添加数据</button>
<button @click="delArr">删除数据</button>
</div>
</div>
vue:
<script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js'></script>
<script>
Vue.config.productionTip = false
new Vue({
el: "#app",
data: {
// 基本类型数据
name: '李易峰',
// 对象类型数据
obj: {
name: '李易峰',
age: 34,
},
arr:[11,22,33,44,55]
},
methods: {
// 添加性别
addSex() {
// obj对象里面的每一个属性，都会采用Object.defineProperty去封装，实现响应式。
// 给对象后添加的数据，不会采用Object.defineProperty封装。所以就失去了响应式
// this.obj.sex = '男'
this.$set(this.obj,'sex','男')
},
// 删除年龄
delAge(){
// 采用 delete 关键字删除对象的属性后。也没有触发页面更新
// delete this.obj.age
this.$delete(this.obj,'age')
},
// 添加数组的数据
addArr(){
// this.arr[5]=66 //采用这种方式，不会触发页面更新
// 如果想通过下标操作数组，也必须要使用$set和$delete方法
this.$set(this.arr,5,66)
},
delArr(){
// this.arr.splice(2,1)
this.$delete(this.arr,2)
}
},
})
</script>
