一、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>