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函数什么时候执行？
- 初次读取时会执行一次。
- 当依赖的数据发生改变时会被在此调用。
- 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
- 备注：
- 计算属性最终会出现在vm上，直接读取使用即可。
- 如果计算属性要被修改，那必须写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>
