Vue数据绑定与事件

初识Vue：

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

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

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

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

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

# 结果：hello，无心


    //{{name.toUpperCase()}},可以转大写
    
hello，{{name}}

为什么{{}}能显示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，(简写后只需要写上冒号加属性名)。

    百度链接

v-model（双向绑定）

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

el与data的另外两种写法

el后续绑定

    请输入：
    

data函数式

    请输入：
    

MVVM

M：model模型

V：view视图

VM：viewModle视图模型

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

 绑定点击事件

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

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

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

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

    点击触发事件
    

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

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

    点击触发事件!
    

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

    点击触发事件!
    

事件修饰符

1. 阻止默认事件：@Click.prevent="事件函数"
2. 阻止事件冒泡：@Click.stop="事件函数"
3. 事件只触发一次：@Click.once="事件函数"
4. 使用事件的捕获模式：@Click.capture="事件函数"
5. 事件默认应为立即执行，无需等待事件回调执行：@Click.passive="事件函数"
   1. ，先执行默认事件再执行回调函数（showInfo）.
   2. ，默认是先执行回调函数（showInfo）.后执行默认事件。
6. 只有event.target是当前操作的元素时才能除法：@Click.self="事件函数"
   1. ，当点击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

    
    请输入：