9、.passive
<div v-on:scroll.passive="onScroll">...</div>
监听元素滚动事件的时候，会一直触发onscroll事件，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符。
10、.native
<My-component @click.native="shout(3)"></My-component>
自定义组件必须使用.native来修饰这个click事件（即），可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签 注意：使用.native修饰符来操作普通HTML标签是会令事件失效的。
（3）、鼠标按钮修饰符
.left左键点击.right右键点击.middle中键点击
<button @click.right="shout(1)">ok</button>
（4）、键值修饰符
11、.keyCode
注意：这里的.keyCode代表键值
<input type="text" @keyup.keyCode="shout(4)">
指定按下某一个键才触发这个shout的时候，这个修饰符就有用了。keyCode码如下：
| keyCode | 按键 |
| 48-57 | 0-9 |
| 65-90 | a-z/A-Z |
| 112-135 | F1-F24 |
| 8 | BackSpace（退格） |
| 9 | Tab |
| 13 | Enter（回车） |
| 20 | Caps_Lock（大写锁定） |
| 32 | Space（空格键） |
| 37 | Left（左箭头） |
| 38 | Up（上箭头） |
| 39 | Right（右箭头） |
| 40 | Down（下箭头） |
vue给一些常用的键提供了别名：
//普通键 .enter .tab .delete //(捕获“删除”和“退格”键) .space .esc .up .down .left .right //系统修饰键 .ctrl .alt .meta .shift
全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112
<input type="text" @keyup.ctrl.67="shout(4)">
将系统修饰键和其他键码链接起来使用，这样当我们同时按下ctrl+c时，就会触发keyup事件。
12、.exact
有些场景我们只需要或者只能按一个系统修饰键来触发。 注意：这个只是限制系统修饰键的。
<button type="text" @click.ctrl.exact="shout(4)">ok</button>
可以按下ctrl+普通键 来触发，但是不能按下ctrl + 系统修饰键 +普通键来触发。
13、.sync
更方便的使用prop进行“双向绑定”。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #app { margin: 10px auto; width: 200px; height: 200px; } input { width: 200px; height: 30px; border: 1px solid red; outline: none; } .show { width: 200px; height: 200px; background: orange; border: 1px solid red; border-top: none; } </style> <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script> </head> <body> <div id="app"> <costum-show :is-show1.sync="isShow"></costum-show> <div class="show" v-show="isShow"></div> </div> <script> Vue.component('costum-show', { props: ['isShow'], template: ` <div> <input type="text" val="" @click="showHandle"> </div> `, methods: { showHandle() { this.$emit("update:is-show1", !this.isShow); } } }) var vm = new Vue({ el: '#app', data: { isShow: false } }) </script> </body> </html>
1、使用.sync的时候，子组件传递的事件名必须为update:value，其中value与父组件绑定属性的值必须一致(如上例中的is-show1)
2、注意带有.sync修饰符的 v-bind不能和表达式一起使用 (例如v-bind:title.sync='yy=0?1:0' 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似v-model。
3、将 v-bind.sync用在一个字面量的对象上，例如v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。
14、.prop
- 通过自定义属性存储变量，避免暴露数据
- 防止污染 HTML 结构
<input id="uid" title="title1" value="1" :index.prop="index">
15、.camel
<svg :viewBox="viewBox"></svg>
实际上会渲染为
<svg :viewbox="viewBox"></svg>
SVG标签只认 viewBox，却不知道 viewbox 是什么?.camel修饰符，那它就会被渲染为驼峰名。 使用字符串模版，则没有这些限制。
14、查找函数
使用Array的find()可以实现快速查找。
const pets=[ {type:'Dog',name:'Max'}, {type:'Cat',name:'Karl'}, {type:'Dog',name:'Tommy'} ] let pet= pets.find(pet=>pet.type==='Dog'&&pet.name==='Tommy'); console.log(pet);// {type: "Dog", name: "Tommy"}
15、逐位运算符
console.log(Math.floor(4.9)) //4 console.log(~~4.9);// 4
16、递归函数
const {log}=console; function jc(number) { if(number<=1){ return 1 } return number*jc(number-1) } log(jc(2));// 2
