vue
文章平均质量分 92
慌张的唐同学
这个作者很懒,什么都没留下…
展开
-
Vue进阶(三)插槽slot,并使用slot开发高级分页组件
如果对组件不太了解,可以先阅读笔者的这两篇文章,在对组件有了一定的了解之后,在查看本篇文章:vue进阶(一),深入了解组件,自定义组件Vue进阶(二)设计高级组件——自定义通知注意:本篇文章的重点是使用slot开发一个分页组件,如果希望详细了解Vue中slot的用法,可以查看官网文档,同时,如果您在阅读本文中发现错误或者使用不当的地方,还请您指出修正!1. 什么是插槽Vue实现了一套内容分发的API,而<slot>元素就是承载分发内容的出口。使用<slot>,我们可以这样原创 2022-03-07 22:06:25 · 2565 阅读 · 0 评论 -
Vue进阶(二)设计高级组件——自定义通知
这篇文章主要是为了记录笔者长期以来对于 $on 和 $emit 存在的一个误区。看过一些博客上面将 $on 和 $emit 的使用称之为父组件监听子组件。当子组件对用户的行为做出响应时,可以向父组件 $emit 一个事件,当父组件监听到该事件时,父组件调用对应的方法来处理。比如存在一个comp组件,它的任务是this.$emit('test')。<template> <div>this is a son comp</div></template>原创 2022-03-05 14:19:53 · 1286 阅读 · 0 评论 -
深入了解Vue 2响应式原理,并手写一个简单的Vue
1. Vue 2的响应式原理Vue.js 一个核心思想是数据驱动。所谓数据驱动是指视图是由数据驱动生成的,对视图的修改,不会直接操作 DOM,而是通过修改数据。vue.js里面只需要改变数据,Vue.js通过Directives指令去对DOM做封装,当数据发生变化,会通知指令去修改对应的DOM,数据驱动DOM的变化,DOM是数据的一种自然的映射。vue.js还会对View操作做一些监听(DOM Listener),当我们修改视图的时候,vue.js监听到这些变化,从而改变数据。这样就形成了数据的双向绑定。原创 2022-04-13 20:31:04 · 2470 阅读 · 0 评论 -
Vue进阶(四)自定义指令,并使用自定义指令实现防抖节流
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。注意:这里官方对自定义指令有明确的说明,所以我们应该尽量去遵守,而不应该盲目的滥用自定义指令去完成一些任务1. 指令Vue为我们添加了很多内置指令,我们可以直接使用,例如v-on,v-bind,v-model,形如v-xx。2. 自定义指令假设我们现在需要在原创 2022-03-16 10:00:12 · 3567 阅读 · 2 评论 -
vue 生命周期
每个Vue实例都会在创建时经历一系列的初始化过程——例如,需要设置数据监听,编译模板,将实例挂载到DOM上并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。从...原创 2022-02-26 19:55:38 · 731 阅读 · 0 评论 -
Vuex详解(一) Vuex的使用详解
Vuex 使用单一状态树——用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT (opens newwindow))”而存在。这也意味着,每个应用将仅仅包含一个 store实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。原创 2022-03-02 13:25:15 · 695 阅读 · 0 评论 -
Vuex详解(二) 进阶——Vuex的模块化使用
随着项目越来越复杂,我们可能向store中添加的状态越来越多,这不便于我们对数据的管理,同时,既然vue是模块化开发,那么我们能否将Vuex中的状态也进行模块化管理呢?Vuex——ModuleVuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:const moduleA = { state: () => ({ ... }), mutations: { .原创 2022-03-02 17:04:16 · 2032 阅读 · 0 评论 -
Vue Router详解,Vue Router钩子函数详解
想必来查看笔者的这篇Vue Router文章的人,应该了解什么是Vue Router,至少知道其的作用是路由映射,所以笔者在这里不再赘述。假设我们现在有一些简单的vue组件,MyHeader.vue:<template> <div class="container"> this is header of each page </div></template><script>export default { name原创 2022-03-01 09:50:06 · 1677 阅读 · 0 评论 -
vue进阶(一),深入了解组件,自定义组件
本篇为笔者阅读官方教程后的笔记记录1. 什么是Vue组件?组件就是可以复用的Vue实例,和new Vue接收相同的选项,例如data,computed,watch,methods以及生命周期钩子等。仅有的例外是像el这样的根实例特有的选项。// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, temp.原创 2022-01-23 16:50:22 · 516 阅读 · 0 评论 -
Vue项目使用SSR服务器渲染
注意:这是笔者用于记录自己学习SSR的一篇文章,用于梳理将一个项目进行服务器渲染的过程,本文仅是读者根据demo得出的理解,如果您想通过本文来学习如何部署ssr,笔者建议您查阅其他更权威的资料进行学习;当然,如果您发现了本文中有任何描述不恰当的地方,还恳请您指出更正。...原创 2022-03-04 22:40:33 · 5408 阅读 · 5 评论