Vue学习笔记021. 事件基本使用使用v-on:xxx或@xxx绑定事件，其中xxx是事件名；事件的回调需要配置在

1. 事件基本使用

使用v-on:xxx或@xxx绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数！否则this就不是vm了；
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象；
@click=“demo”和@click="demo($event)"效果一致，但后者可以传参；

事件修饰符

prevent：阻止默认事件；
stop：阻止事件冒泡；
once：事件只触发一次；
capture：使用事件的捕获模式；(捕获模式与冒泡模式顺序相反)
self：只有event.target是当前操作的元素时才触发事件；
passive：事件的默认行为立即执行，无需等待时间回调执行完毕。

 <a href="http://www.baidu.com" @click.prevent="demo"></a>

注意：也可以连着写，但是有顺序。下面的就是先阻止默认事件，再阻止冒泡。

 @click.prevent.stop="demo()"

键盘事件

 <input type="text" value="" @keyup.enter="demo()" />

Vue中常用的按键别名：

回车 => enter

删除 => delete（捕获“删除”和“退格”键）

退出 => esc

空格 => space

换行 => tab (特殊，必须配合keydown去使用)

上 => up

下 => down

左 => left

右 => right
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但要注意转为kebab-case（短横线命名。如键盘的CapsLock，名字为caps-lock）
系统修饰键（用法特殊）：ctrl、alt、shift、meta
- 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其它键，事件才触发。
- 配合keydown使用：正常触发事件。
也可以使用keyCode去指定具体的按键（不推荐）
Vue.config.keycode.自定义键名 = 键码，可以去定制按键名。
```
 Vue.config.keycode.huiche = 13
```

注意：也可以连着写，如下为按下ctrl+y键触发demo()事件。

 @keyup.ctrl.y="demo()"

2. 计算属性

定义：要用的属性不存在，要通过已有的属性计算得来。
原理：底层借助了Object.defineproperty方法提供的getter和setter。
get函数什么时候执行？
1. 初次读取时会执行一次。
2. 当依赖的数据发生改变时会被在此调用。
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
备注：
1. 计算属性最终会出现在vm上，直接读取使用即可。
2. 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生。

如下为实现“姓”、“名”两个值拼接的三种方法

简写方式 (当不需要修改计算属性的时候可以采取以下方式简写)

 computed: {
     fullName(){
         return this.firstName + '-' + this.lastName;
     }
 }

1.插值方法

 <body>
     <div id="root">
         姓： <input type="text" v-model="firstName"><br /><br />
         名： <input type="text" v-model="lastName"><br /><br />
         全名：<span>{{firstName}} - {{lastName}}</span>
     </div>
 </body>
 <script>
     Vue.config.productionTip = false;
 
     new Vue({
         el: '#root',
         data() {
             return {
                 firstName: '张',
                 lastName: '三'
             }
         },
         methods: {
 
         }
     })
 </script>

2.methods方法实现

 <body>
     <div id="root">
         姓： <input type="text" v-model="firstName"><br /><br />
         名： <input type="text" v-model="lastName"><br /><br />
         全名：<span>{{fullName()}}</span>
     </div>
 </body>
 <script>
     Vue.config.productionTip = false;
 
     new Vue({
         el: '#root',
         data() {
             return {
                 firstName: '张',
                 lastName: '三'
             }
         },
         methods: {
             fullName() {
                 return this.firstName + '-' + this.lastName
             }
         }
     })
 </script>

3.计算属性

<body>
    <div id="root">
        姓： <input type="text" v-model="firstName"><br /><br />
        名： <input type="text" v-model="lastName"><br /><br />
        全名：<span>{{fullName}}</span>
    </div>
</body>
<script>
    Vue.config.productionTip = false;

    var vm = new Vue({
        el: '#root',
        data() {
            return {
                firstName: '张',
                lastName: '三'
            }
        },
        computed: {
            fullName: {
                get() {
                    return this.firstName + '-' + this.lastName;
                },
                set(value) {
                    this.firstName = value.split('-')[0];
                    this.lastName = value.split('-')[1];
                }
            }
        }
    })
</script>