![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 96
大魔王sama
这个作者很懒,什么都没留下…
展开
-
Vue 集成 CKEditor5 踩坑记录
最近项目中有编辑文章的需求,需要用到富文本编辑器,在查看个各种编辑器之后,发现只有 CKEditor5 的功能是比较符合需求的。然而,在使用过程中发现,坑是真的多… 这里记录下填坑经历,希望能对其他小伙伴有帮助。CKEditor5 介绍编辑器种类CKEditor5 有 5 种常用编辑器,分别是:ClassicBallonBallon BlockInlineDocument具体区别可以参照官网:https://ckeditor.com/ckeditor-5/demo/以上 5 种编辑器原创 2020-11-25 14:19:23 · 12922 阅读 · 6 评论 -
Vue 自定义指令
基本配置除了核心功能默认内置的指令,Vue 也允许注册自定义指令。我们可以使用 Vue.directive() 【全局注册】或者是在组组件内新增选项:directive: {} 来注册自定义指令。全局注册Vue.directive('demo', { inserted(el, binding) {}})组件内注册directive: { demo: { inserted(el, binding) {} }}钩子函数每个指令定义对象可以提供如下几个钩子函数 (均为可选)原创 2020-09-19 16:57:33 · 284 阅读 · 0 评论 -
Vuex 总结
Vuex 概述Vuex 用来管理全局数据,方便实现组件间的数据共享,数据集中管理有以下三点好处:易于后期开发和维护高效实现数据共享,提高开发效率能够实现数据实时同步注意:只有需要共享的数据才有必要存入 Vuex 中Vuex 的基本使用安装Vuex依赖包npm install vuex --save导入Vueximport Vuex from 'vuex'Vue.use(Vuex)创建 store 对象const store = new Vuex.Store({原创 2020-07-15 17:53:51 · 165 阅读 · 1 评论 -
Vue Router - 详细总结
路由的配置Vue 的特点是数据驱动和组件化,根据组件化的特点,我们可以很方便的用 Vue 来实现单页面应用程序。在 Vue.js 中,我们已经可以通过组件名来切换组件,但是这样做浏览器的地址栏内容不会发生变化,为了解决这一问题,我们可以引入 Vue Router 通过路由来标识组件,并且把路由带入到地址栏中。这里我们通常使用 hash (#) 形式来约定路由,因为 HTTP 请求中不会包含 hash (#) 相关的内容,所以单页面程序中的页面跳转主要用 hash (#) 实现。绑定路由(基础)首先我们原创 2020-07-15 17:17:21 · 161 阅读 · 0 评论 -
Vue 组件和插槽
Vue 组件组件是一个可复用的 Vue 实例且带有一个名字,所以要接收和 new Vue 相同的选项,例如 data 、methods 、computed 以及生命钩子函数等。注意:组件是一个全新的 Vue 实例,组件内部的选项不会相互影响。但是 data: {} 除外,因为如果 data 是一个对象,就不会构成作用域,每个组件的 data 都是共用一个存储地址,会互相影响。这时需要使用 data() { return {} } 的形式来形成作用域。组件必须只有一个根元素由于 HTML 不区分大原创 2020-07-10 11:07:20 · 2730 阅读 · 0 评论 -
Vue 使用注意
在 Vue 的使用过程中,应当注意以下几个问题:初始化数据当一个 Vue 实例被创建的时候,会将 data 对象中的所有 property 都加入到响应式系统中,当值发生变化时,视图也会随之响应。但值得注意的是,只有当创建前就已经存在于 data 对象中的 property 才是响应式的。也就是说,在已经被创建的 Vue 实例上新增一个 property ,这个property 不是响应式的。如果你知道你会在晚些时候需要一个 property,但是一开始它为空或不存在,那么你仅需要设置一些初始值。数组原创 2020-07-09 11:30:22 · 291 阅读 · 0 评论 -
Vue 生命周期钩子
每个 Vue 实例在从被创建到被销毁的过程中,都有 8 个必须要经历的阶段,这 8 个阶段组成了 Vue 的生命周期,Vue 在这几个阶段,都分别提供了对应的函数,这 8 个函数被叫做生命周期钩子,这给了用户在不同阶段添加自己的代码的机会。对于这 8 个阶段,官方给出了一张图示:分别是:beforeCreate :没有创建 Vue 实例之前。可以制作加载动画created :Vue 实例创建结束,页面还没有生成。此时可以请求页面所需数据,结束加载动画beforeMount :页面还没有渲染出来原创 2020-07-09 10:43:06 · 150 阅读 · 0 评论 -
Vue.js --- transition 过渡动画
在 Vue 中,为了方便操作 DOM 的过渡和动画,Vue 封装了一个 transition 组件,以 Vue 专属标签的形式使用,在下列情形中,可以给任意元素或组件添加过渡/动画条件渲染(v-if)条件展示(v-show)动态组件组件根节点当插入或删除在 transition 组件中的元素时,Vue 会做以下处理:如果 transition 元素应用了 CSS 过渡 / 动画,在适当的时机添加或移除类名如果元素挂载了 JavaScript 钩子函数,在适当的时机调用如果既没有 CSS原创 2020-07-08 18:50:20 · 1049 阅读 · 0 评论 -
Vue.js 常用修饰符汇总
事件修饰符.stop ==> 阻止冒泡.prevent ==> 取消默认行为.capture ==> 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理.self ==> 只当在 event.target 是当前元素自身时触发处理函数.once ==> 只执行一次.passive ==> 不阻止默认行为按键修饰符.enter.tab.delete ==> 删除和退格.esc.space.up.down原创 2020-07-08 14:29:14 · 677 阅读 · 0 评论 -
Vue 模板语法、计算属性以及侦听器
插值表达式文本在 Vue 中进行数据绑定,我们最常用的方法就是使用 {{ }} 的文本插值。例如:<span>Hello, {{ name }}</span>在解析时, {{ name }} 将会被解析为对应的数据对象中 name 属性的值,如果数据对象中的 name 值发生了变化,由于 Vue 是双向数据绑定,所以标签中的内容也会实时更新。{{ }} 语法只可以替换指定区域的文本内容,不能输出真正的 HTML ,如果需要嵌入 HTML 代码,需要用到 v-html 属性原创 2020-07-08 10:20:59 · 250 阅读 · 0 评论 -
Vue 双向数据绑定原理(数据劫持和发布者-订阅者)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l原创 2020-07-07 14:06:49 · 509 阅读 · 0 评论 -
MVC 、MVVM 以及 Vue.js 概述
MVC 框架MVC 框架全称为 Model - View - Controller 的缩写,即 模型 - 视图 - 控制器,是后端分层开发的概念。【模型】是指后端数据。【视图】是指前端页面。【控制器】是指页面业务逻辑,作用是读取视图数据,控制用户输入,并向后端发送数据,属于单向通信。MVVM 框架随着前端开发越来越受到重视,前端又将 MVC 中的 V 细分出了 MVVM 框架,全称为 Model - View - ViewModel ,即 模型 - 视图 - 视图模型。【模型】是指后端原创 2020-07-07 11:42:49 · 381 阅读 · 0 评论