1.类与样式动态类（与普通类属性共存）：可以直接使用对象。如果有普通的类，应该使用数组语法。对象里面只有动态的①：class="[{active:isActive},errorClass]"②:class="{active:isActive,'text-danger':hasError}"内联样式：对象语法，都是camelcaseanddash①:style="{color:activeColor,fontSize:fontSize+'px'}"二、v-if和v-for和v-showv-if切换多个元素标签，用包裹Vue来尽可能高效地渲染元素，通常，现有元素会被重用，而不是从头开始渲染。需要密钥识别。v-show不支持元素，v-elsev-if也没有更高的切换开销，而v-show的初始Rendering开销更高①如果需要切换很频繁，还是用v-show比较好②如果条件在运行时很少改变，最好使用v-if当v-if与v-for一起使用时，v-for的优先级高于v-if。一般都是用v-if把v-for用模板包裹起来，这样就不允许在同一层了3.列表渲染#Arrayv-for="(item,index)initems"v-for="itemofitems"#Objectv-for="valueinobject"v-for="(value,key)inobject"v-for="(value,key,index)inobject"给Vue一个提示所以它可以跟踪每个节点要重用和重新排序现有元素，您需要为每个项目提供唯一的键属性。理想的键值是每个项目的唯一ID。v-for的范围{{n}}不能直接修改数组中的某一项，长度①使用this.$set(arr,index,newValue)改变一个item②使用this.arr.splice(newLength)删除也会触发DOM更新4.beforeCreated生命周期：实例初始化后，在事件配置前调用数据观察者（dataobserver）和event/watcher。created：实例创建后立即调用；数据观察、属性和方法的计算、watch/event事件回调已经完成；$el元素目前是不可见的；这个可以用；一般情况下，异步获取的数据会在createdforuse页面第一次渲染时分配。beforeMount：实例挂载前调用；第一次调用相关的渲染函数。mounted：实例挂载后立即调用；$el元素可用，此时可以操作DOM元素。①注意mounted并不保证所有的子组件也一起挂载。如果你想等到整个视图渲染完成，你可以用vm.$nextTick替换mounted:视图已经渲染//[nextTick:延迟到下一个DOM更新周期之后回调。修改数据后立即使用它，然后等待DOM更新。]})}beforeDestory:在实例被销毁之前调用。这一步，实例还是完全可用的destroy：实例销毁后立即调用5.不要使用箭头函数在watch,computed,method等option属性上定义函数，例如watch中的searchQuery:newValue=>this.updateAutocomplete(newValue)。原因是箭头函数绑定了父作用域的上下文，所以this不会像预期的那样指向Vue实例，this.updateAutocomplete会是undefined。因为在标准函数中，this指的是使用函数作为方法调用的context对象，而this指向vue实例。比如方法函数中（一般函数写法下）调用事件回调调用某个函数，而this并没有指向想要的结果。这时候把回调函数写成箭头函数就可以解决问题，因为箭头函数的this是parent。作用域的this，父作用域是调用方法函数时生成的上下文作用域。从原理上解释，就像vue中method函数里面的代码，这个函数在定义的时候一定是一个通用的函数。在一般函数中，指针this指的是将函数作为方法调用的上下文。在vue中，实例vue将方法函数作为方法调用，所以指向vue实例。方法函数内部还有一个闭包箭头函数。这个闭包中的this指向方法的上下文，而方法的上下文是vue实例，所以被覆盖了。闭包中的this指的是vue实例，也就是方法的上下文，都是一样的。6.事件修饰符：快速理解。stop：防止事件冒泡，相当于JavaScript中的event.stopPropagation()，防止事件冒泡。一般来说，它会阻止事件传递给父元素并阻止任何父事件处理程序被执行，相当于JavaScript中的event.stopPropagation()。.prevent：阻止预设行为的执行，相当于JavaScript中的event.preventDefault()。有些标签有自己的默认事件，比如标签，点击后会跳转到页面。这类默认事件虽然在冒泡后开始，但不会因为stop而停止执行。为了防止执行此类预设行为，.prevent就派上用场了。例如：点击跳转.capture：捕获冒泡捕获冒泡，即发生冒泡时，用.修饰。捕获带有符号的Dom元素将首先执行。我们还是以stop为例。一般情况下，点击最里面的按钮会从下往上冒泡。.self:Bindtheeventtoitself,onlytheselfcanbetriggered把事件绑定到自己身上，只有自己可以触发，通常用于避免冒泡事件的影响。.once：很容易理解，只触发一次。添加once修饰符后，事件只触发一次，但不影响事件的冒泡。仍然会触发上层事件，页面刷新后数字会重置。.passive：不阻塞事件的默认行为`.passive是2.3.0中新增的修饰符。这里有个问题，为什么需要告诉浏览器不要屏蔽事件的默认行为？原因是这样的，浏览器只会在每次触发监听器时判断是否调用preventDefault()来阻止默认行为。这种判断在某些场景下会影响交互。例如，当用户通过手势滑动页面时，无法快速滚动。使用.passive可以提前告诉浏览器，我们没有使用preventDefault来阻止默认动作，你不必反复判断，从而提高性能，解决卡顿。`七、VueslotVuenamedslot：是父组件在子组件中的一个占位符，用表示，父组件可以在这个占位符中填充任何模板代码，比如HTML，components，等等，填充的内容会替换子组件的标签。①2.6.0之后的版本用法如下：//在父组件中使用模板语法，使用v-slot绑定槽名。②//子组件中仍然使用name作为slot的标识。或者直接在普通元素上使用slot属性，例如：Heremightbeapagetitle。这种写法是2.6.0之前版本的语法，现在已经过时了。Vue作用域插槽：有时让插槽内容访问仅在子组件中可用的数据很有用，但因为只有子组件可以访问，例如用户数据，我们提供的内容在父级呈现。①为了让用户数据在父slot内容中可用，第一步：我们可以将user绑定为元素的attribute属性，{{user.lastName}}。②第二步：元素绑定的属性称为slotprop。现在在父作用域中，我们可以使用带有值的v-slot来定义我们提供的插槽prop的名称。{{slotProps.user.firstName}}，在本例中我们选择将包含所有槽道具的对象命名为slotProps，但你也可以使用任何你喜欢的名字.注意：①defaultslot的缩写语法不能与namedslot混用，否则会导致作用域不明确。②只要出现多个插槽，始终对所有插槽使用完整的基于的语法：{{slotProps.user.firstName}}...
