摘要： 渲染原理 在讨论性能优化之前，我们有必要了解一些浏览器的渲染原理。不同的浏览器进行渲染有着不同的实现方式，但是大体流程都是差不多的，我们通过 Chrome 浏览器来大致了解一下这个渲染流程。 渲染流程大致概括如下： 1、处理 HTML 并构建 DOM Tree 2、处理 CSS 并构建 CSSOM 阅读全文

摘要： 具名插槽 有时候我们希望在指定的位置输出我们的子元素，这时候具名插槽就排上了用场。 作用域插槽 作用域插槽的主要作用是在书写插槽内容时可以获取到插槽作用域的值。 所谓作用域插槽，就是让插槽的内容能够访问子组件中才有的数据。 hh是随便取的， 作用域插槽可以访问到子组件的数据 阅读全文

摘要： 组件名 定义组件名的方式有两种： 使用 kebab-case Vue.component('my-component-name', { /* ... */ }) 例如 <my-component-name> 使用 PascalCase Vue.component('MyComponentName', 阅读全文

摘要： 【v-on】1、事件修饰符@click.stop="" 阻止冒泡事件@click.prevent="" 阻止默认事件@click.self="" 只有自己点击时才会触发，不会被冒泡@click.once="" 点击事件将只会触发一次@click.capture="" 该添加事件使用事件捕获模式，外而 阅读全文

摘要： $event是指当前触发的是什么事件（鼠标事件，键盘事件等） $event.target则指的是事件触发的目标，即哪一个元素触发了事件，这将直接获取该dom元素 <button @click="console.log($event)" name="哈哈">单击</button> 阅读全文

摘要： 组件基础 因为组件是可复用的 Vue 实例，所以它们与 new Vue 都有 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项（组件没有el）。 注意当点击按钮时，每个组件都会各自独立维护它的 count。每用一次组件，就会有一个 阅读全文

摘要： v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数 阅读全文

摘要： 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 不推荐同时使用 v-if 和 v-for 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 阅读全文

摘要： DOM方法 addEventListener() 和 removeEventListener()是用来分配和删除事件的函数。 这两个方法都需要三个参数，分别为： 事件名称（String）、要触发的事件处理函数(Function)、指定事件处理函数的时期或阶段(boolean)。 DOM事件流如图 由 阅读全文

摘要： touchstart、touchmove和touchend 一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标 阅读全文