![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
Lechar0327
只有不断的突破自我,才是真正的无懈可击
展开
-
基于Vue项目的富文本vue-quill-editor的使用
基于Vue项目的富文本vue-quill-editor的使用一.背景最近呢,要做一个项目,后台管理平台要实现一个商品的详情发布,因为马上要做项目了,所以看了其中的一些设计,提前把一些技术要点攻关一下,到时候做项目会得心应手,网上搜了一下,发现vue-quill-editor这款富文本编辑器还挺不错的,在github上使用率也比较高,很适合咱们的vue项目,话不多说,直接上手了二.Vue-Quill-Editor使用1.简介基于 Quill,适用于Vue的富文本编辑器,支持服务端渲染和单页应用原创 2020-07-04 17:00:48 · 46387 阅读 · 44 评论 -
Vue-Router之路由守卫
Vue-路由守卫一.概念路由守卫,官网也叫导航守卫,所谓导航,就是路由正在发生变化路由守卫,主要就是用来通过跳转或取消的方式守卫导航,在导航过程中,有三种方式可以植入导航全局守卫路由独享路由组件中二.守卫类型1.全局守卫1.1.全局前置守卫beforeEach全局前置守卫,可以使用路由的实例注册一个全局前置守卫router.beforeEach((to,from,next)=>{ });此守卫一般用于登录状态在未登录的状态下,进行守卫,直接跳转到登录页原创 2020-06-21 18:14:50 · 1299 阅读 · 0 评论 -
Vuex状态管理(下)
Vuex状态管理(下)文章目录Vuex状态管理(下)一.引言二.背景三.在Vuex中使用module1.使用步骤2.拆分后遇到的问题3.解决问题1.设置命名空间2.调用设置命名空间后的子模块数据3.调用设置命名空间后的某仓库子模块中的getter4.提交某个仓库子模块中的mutation四.仓库模块的局部状态1.getter语法2.action语法五.v-model绑定仓库中的数据情况六. Vuex核心概念图解一.引言前面我们Vuex状态管理(上)我们了解了Vuex的五大核心概念的四个概念,State原创 2020-06-20 00:42:30 · 211 阅读 · 0 评论 -
Vuex状态管理(上)
Vuex状态管理(上)文章目录Vuex状态管理(上)一.概念二.Vuex的仓库的五大核心概念1.state2.getters3.mutations4.actions5.module三.安装与使用1.安装2.使用3.main.js引入并挂载4.验证是否安装成功5.组件中如何使用state和getters1.方法一2.方法二(推荐) computed3. 方法三(推荐) vuex 辅助函数6.组件中如何修改state与getters的数据1.方法一2.方法二(推荐) vuex 辅助函数7.使用actions异原创 2020-06-18 01:00:08 · 514 阅读 · 0 评论 -
详细介绍Vue-Router路由
Vue-Router 路由文章目录Vue-Router 路由一.路由简介1.后端路由2.前端路由二.Vue-Router安装使用1.npm安装2.引用注册路由3.引入组件4.定义路由规则(是一个数组对象)5.创建路由实例6.在Vue实例配置router选项7.router-view 路由容器8.router-link三.路由属性1.命名视图三.路由属性1.命名视图一.路由简介1.后端路由应用程序如果去处理不同的url地址发送过来的请求post : localhost:3000/api/login原创 2020-06-16 14:02:39 · 379 阅读 · 0 评论 -
Vue之动态组件详解
Vue动态组件文章目录Vue动态组件一.背景1.v-if动态加载2.v-show动态加载二.动态组件1.动态组件实现2.keep-alive 状态保持2.1 被keep-alive缓存组件特点2.2 keep-alive的更多属性设置2.2.1 include 包含2.2.2 exclude排除2.2.3 max 允许最大缓存的数量,默认无限制2.2.3 max 允许最大缓存的数量,默认无限制一.背景Vue 中提供有一个内置的组件叫做 component 。这个组件就是动态组件。它需要设置 is原创 2020-06-14 15:55:47 · 2025 阅读 · 0 评论 -
Vue响应式原理探究及源码实现
Vue响应式原理一.简介Vue响应式的原理,其实就是基于ES5的Object静态方法: Object.defineProperty() 对这个方法做劫持,还有说法是代理,劫持数据的setter和getter.然后结合发布订阅模式,在数据发生变化的时候,通知页面进行更新注意:由于 ES5的Object.defineProperty()方法不支持IE8,所以我们的Vue不兼容IE8以下版本二.实现响应式源码1. Object.defineProperty()介绍MDN:方法会直接在一个对象原创 2020-06-14 01:35:22 · 660 阅读 · 2 评论 -
Vue之slot插槽详解
Vue slot插槽一.slot简介slot(插槽),我们理解为就是"占位",还有些人可能没那么儒雅,称之为"占坑,茅坑",所以有坑,我们就要填.真正的作用是:在组件模版中占一个坑,当我们使用这个组件标签的时候,通过替换组件模版中slot位置,来填这个坑,并且可以作为承载分发的内容出口,slot可以干哪些活呢? 如果我们需要父组件在子组件内放一些DOM,那么这些DOM是显示、不显示、在哪个地方显示、怎么显示,就可以使用slot分发二.slot基础使用 我们知道,在调用组件时,没有使用插槽原创 2020-06-13 02:13:59 · 1374 阅读 · 0 评论 -
Vue之过滤器浅析
Vue过滤器一.Vue过滤器概念 过滤器是对即将显示的数据做进一步的筛选处理,然后进行显示,值得注意的是过滤器并没有改变原来的数据,只是在原数据的基础上产生新的数据。二.过滤器使用1.过滤器的定义过滤器的定义有两种方式:全局定义和局部定义全局定义 /* Vue.filter(filterName,callback); filterName 过滤器的名字 callback 过滤器的逻辑操作,必须要有返回值原创 2020-06-12 00:13:31 · 204 阅读 · 0 评论 -
Vue之组件通信方式浅析
Vue组件通信方式一.组件之间的通信方式两个组件或者多个组件进行一些数据传递等操作1.组件关系组件关系的确定不是在定义时,而是在调用时确定的 <div id="app"> <!-- 调用parent组件 --> <parent></parent> </div> // 定义一个名为 parent的组件 Vue.component('pa原创 2020-06-11 18:59:41 · 267 阅读 · 0 评论 -
MVC及MVVM介绍
MVC及MVVM1. MVVMMVVM,是Model-View-ViewModel的缩写,即模型-视图-视图模型. 本质上是MVC(模型-视图-控制器)的改进版,它最重要的特性就是数据绑定,很多js框架都是基于MVVM框架.Vuejs就是其中之一.M(模型) 实体数据V(视图) 页面VM(视图模型) mvvm的核心,连接Model和View的桥梁ViewModel在其中处于承上启下的作用承上: 将模型转为视图,也就是将实体模型,转化成我们可以直接看到的页面数据,实现原理是:原创 2020-06-09 18:43:51 · 366 阅读 · 0 评论 -
Vue组件基础详解
Vue组件文章目录Vue组件一.概念二.组件的使用1.组件的注册2.组件的调用3.组件的复用4.组件名5.组件的注意事项三.Props选项1.props命名规则2.设置props3.传递参数4.props的默认值5.props的校验6.传递动态的props一.概念在vue里,一个组件的本质上是一个拥有预定义选项的一个Vue实例二.组件的使用定义(注册)组件调用(使用)组件将组件就看成是一个函数1.组件的注册全局组件注册当前Vue项目中,任何组件中都可以去使用原创 2020-05-27 00:24:48 · 293 阅读 · 0 评论 -
Vue 生命周期研究
Vue 生命周期详解文章目录Vue 生命周期详解一.概念二.生命周期的钩子函数1.生命周期的三个阶段初始挂载阶段更新阶段销毁阶段2.生命周期的钩子函数释义3.生命周期钩子函数详解beforeCreate 实例创建之前created 实例创建完成beforeMount 实例挂载之前mounted 实例挂载完成beforeUpdate 实例更新之前updated 实例更新完成beforeDestro...原创 2020-04-10 00:15:14 · 370 阅读 · 0 评论 -
Vue 指令基础语法
Vue 指令基础语法文章目录Vue 指令基础语法1.v-text 输出文本指令2.v-html 输出html代码3.v-show 切换元素的 display CSS 属性(显示隐藏)4.v-if 通过表达式的值来控制元素是否渲染5.v-if 和v-else 和v-else-if组合6.template 包裹元素,不会渲染到页面上7.v-if和v-show区别8.v-for 主要用于循环数据1....原创 2020-04-08 01:36:45 · 286 阅读 · 0 评论