Vue数据绑定与事件

初识Vue：

        1、要想vue工作，必须创建一个vue实例，且要传入一个配置对象。

        2、容器里的代码依然符合html规范，只是汇入了一些特殊的vue语法。

        3、容器李的代码被成为}【vue模板】。

        4、{{xxx}}，两个大括号中的为被替换的占位符，或者是JS表达式（表达式指的是会返回一个值的语句）（不能是JS语句）。

        5、一个容器只能有一个vue实例接管（容器与vue实例关系是一对一）。

# 结果：hello，无心

<div id="root">
    //{{name.toUpperCase()}},可以转大写
    <h1>hello，{{name}}</h1>
</div>
<script>
    //把id为root的容器下的{{name}}替换为无心
    const x = new Vue({
        el: "#root",
        data: {
            name: "无心"
        }
    });
</script>

为什么{{}}能显示data中的数据

vue会自动给data中的数据会自动作数据劫持做数据代理（数据代理：添加get与set方法）。

const vm = new Vue({
    data: {
        name: "李义新"
    }
})

console.log(vm);

因为{{}}中可以显示vue对象的属性，Vue是把data中的数据添加到vue对象的属性中了。 

 插值语法与指令语法

插值语法：

        功能：用于解析标签体内容。

        写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

指令语法：

        功能：用于解析标签（包括：标签属性，标签体内容、绑定时间等）。

        写法：vue中有很多指令，且形式都是：v-???,此处我们只是拿v-bind举个例子。

v-bind（单向绑定）

1. v-bind可以给标签中任意属性绑定值。
2. 单向绑定：绑定变量的改变会改变页面上对应的内容，但页面上的内容更改不会改变变量。
3. 语法：v-bind:href="url"，也可简写为：:href，(简写后只需要写上冒号加属性名)。

<div id="root">
    <a v-bind:href="url">百度链接</a>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            url: "https://www.baidu.com"
        }
    });
</script>

v-model（双向绑定）

1. 双向绑定：绑定变量的改变会改变页面上对应的内容，页面上的内容更改也会改变变量的内容。
2. 双向绑定一般用于表单元素上（如：input，select等）
3. v-model只能应用于表单类元素（输入类元素）上。
4. v-model:value：可以简写为v-model，因为v-model默认手机的就是value的值。
5. 变量改变后vue模板会整个重新解析一遍，所以页面上对应的数据也会跟着改变。

el与data的另外两种写法

el后续绑定

<div id="root">
    请输入：<input type="text" :value="name">
    <br>
</div>
<script>
    const vue = new Vue({
        data: {
            name: "李义新"
        }
    })
    vue.$mount("#root");
</script>

data函数式

<div id="root">
    请输入：<input type="text" :value="name">
    <br>
</div>
<script>
    new Vue({
        el: "#root",
        //data后不能是箭头函数
        data: function () {
            return {
                name:"liYi"
            };
        }

        //或者----------------------------------
        data() {
            return {
                name:"liYixin"
            };
        }

    })
</script>

MVVM

M：model模型

V：view视图

VM：viewModle视图模型

model数据经过view显示在页面，页面数据被更改后通过ViewModel返回给model。

 绑定点击事件

v-on:click="点击事件函数名"。

v-on:click="点击事件函数名"，可简写为@click="点击事件函数名"。

点击事件函数在对应定义模板的methods的定义中。

函数默认会接收一个event参数。

<div id="root">
    <button v-on:click="showInfo">点击触发事件</button>
    <hr>
</div>
<script>
    let val = "xin";
    const vm = new Vue({
        el: "#root",
        data: {
            name: val
        },
        methods: {
            showInfo(event) {
                alert("hello");
                console.log("hello");
            }
        }
    })
</script>

在调用点击事件函数时传递参数

在定义调用函数时加上括号和参数就可以了，但是这样就无法接收event参数了

<div id="root">
    <button @click="showInfo(666)">点击触发事件!</button>
    <hr>
</div>
<script>
    let val = "xin";
    const vm = new Vue({
        el: "#root",
        data: {
            name: val
        },
        methods: {
            showInfo(value) {
                console.log("值："+value);
            }
        }
    })
</script>

如果想接收自定义的参数和event，就必须用$event来占位（参数和$event的位置不限）。

<div id="root">
    <button @click="showInfo($event,666)">点击触发事件!</button>
    <hr>
</div>
<script>
    let val = "xin";
    const vm = new Vue({
        el: "#root",
        data: {
            name: val
        },
        methods: {
            showInfo(event, value) {
                console.log(event);
                console.log("值：" + value);
            }
        }
    })
</script>

事件修饰符

1. 阻止默认事件：@Click.prevent="事件函数"
2. 阻止事件冒泡：@Click.stop="事件函数"
3. 事件只触发一次：@Click.once="事件函数"
4. 使用事件的捕获模式：@Click.capture="事件函数"
5. 事件默认应为立即执行，无需等待事件回调执行：@Click.passive="事件函数"
   1. <div @Click.passive="showInfo"></div>，先执行默认事件再执行回调函数（showInfo）.
   2. <div @Click="showInfo"></div>，默认是先执行回调函数（showInfo）.后执行默认事件。
6. 只有event.target是当前操作的元素时才能除法：@Click.self="事件函数"
   1. <div @click.self="showInfo"><button @click="xxx"></></div>，当点击button时不会触发div的点击事件，可以阻止冒泡。
7. 事件是可以连着写的如：@Click.stop.prevent（先阻止冒泡再阻止默认事件）。
8. @click="xxx"，xxx中可以写js语句。

冒泡与捕获的区别

 键盘事件

1. @keyup：键盘弹起时触发
2. @keydown：键盘按下时触发
3. @keydown.13，@keydown/@keyup都可以点键盘编码的形式写（被弃用了，很少有浏览器支持）。

4. @keyup.ctrl.y：按下ctrl+y时触发。

5. @keyup.enter="事件函数"：回车键弹起时触发，vue给常用的按键起了别名。
   1. 回车 => enter
   2. 删除 => delete (捕获“删除”和“退格”键)
   3. 退出 => esc
   4. 空格 => space
   5. 换行 => tab（必须配合@keydown使用，因为tab会切换焦点）
   6. 上 => up
   7. 下 => down
   8. 左 => left
   9. 右 => right
6. 自定义按键别名：Vue.config.keyCodes.huiche=13; //定义回车键为13

<div id="root">
    <!-- @keyup.enter代表回车键弹起 -->
    请输入：<input type="text" @keyup.enter="showInfo">
    <hr>
</div>
<script>
    let val = "xin";
    const vm = new Vue({
        el: "#root",
        data: {
            name: val
        },
        methods: {
            showInfo(e) {
                //e.keyCode按下键的编码  e.key按下键的名称
                // if (e.keyCode != 23)  //按的不是回车就退出
                //     return;
                console.log(e.target.value);
            }
        }
    })
</script>