Vue
文章平均质量分 75
毛小星
这个作者很懒,什么都没留下…
展开
-
vue 封装 wangEditor
wangEditor 是一款比较流行的富文本编辑器,它比较轻量级,并且很容易通过css来定制化样式下面的代码是用ts写的,如果是js的话,转换一下就行了,只是语法不一样<template> <div class="editor"> <div ref="toolbar" class="editor_toolbar" :class="toolbarClass" ></div> <原创 2021-07-02 10:57:14 · 286 阅读 · 0 评论 -
Vue 项目优化
v-if 和 v-show 区分使用场景v-if 是 真正 的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。true:渲染元素false:不渲染,移除元素v-show 就简单得多, 不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 的 display 属性进行切换。true:display: blockfalse:display: none原创 2021-06-30 20:19:01 · 100 阅读 · 0 评论 -
Vue3的简单介绍
Vue3和Vue2的区别源码的组织方式使用 TypeScript 重写首先为了提升代码的可维护性,Vue3.0 抛弃了 Flow 类型注释,而是全部采用了更加严格的 TypeScript 重写,大型项目的开发都推荐使用类型化的语言,这样可以在编码的过程中帮助我们检查类型化的问题,比如给函数传参,如果类型不匹配,会有相应的类型提示。当然了,你可以不在你的项目中使用 TypeScript,而是使用 JavaScript,Vue3.0 也是完全支持的使用了 monorepo 管理项目结构mono原创 2021-06-29 19:32:20 · 846 阅读 · 0 评论 -
github自动部署nuxt项目
部署前的准备最近在学习 nuxt 框架,花了几天做了一个 realWorld 博客 demo,正好遇到了一些部署的问题,在这里做一个简单的教程。在部署前我们需要准备一些东西:首先你需要一个本地能够跑通的项目然后需要一个能够使用的云服务器,可以到阿里云或者腾讯云买一个 linux 服务器在 linux 服务器上安装 node,安装过 node 可以直接略过,如果没安装过看我之前写的在linux服务器上安装node教程在 linux 服务器上安装 pm2,我们需要使用 pm2 来在服务器上后台开启原创 2021-06-29 19:28:39 · 393 阅读 · 0 评论 -
Vuex的使用并实现一个简易版Vuex
Vuex 回顾什么是 VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 是专门为 Vue.js 设计的状态管理库它采用集中式的方式存储需要共享的数据从使用角度,它就是一个 JavaScript 库它的作用是进行状态管理,解决复杂组件通信,数据共享什么情况下使用 Vuex官方文档:Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期原创 2021-05-24 21:31:03 · 121 阅读 · 0 评论 -
Vue之watch源码解读
回顾 watch 的用法watch 是 Vue 中的一个监听数据变化的一个方法,我们在阅读源码之前先来回顾一下 watch 的用法监听基本数据类型<div> {{ name }} <button @click="changeName">改变name</button></div>export default { data() { return { name: 'maoxiaoxing', } }, wa原创 2021-05-16 22:59:16 · 515 阅读 · 0 评论 -
Vue中的$attrs和$listeners
Vue中的 $attrs 和 $listeners最近在研究 Vue 的组件库,之前也用过 $attrs 和 $listeners,官方文档描述的不太详细,也没有太好的例子,就没有深入的研究过这两个属性。最近生病在家,正好有时间好好研究一下 Vue 的高阶用法,写了几个 demo,下面我们来看看这两个属性到底有什么奥秘。$attrs我们先来看看官方文档的 api 描述是怎样描述 $attrs 的乍一看可能有点懵,下面我们结合下面的例子来看看 $attrs 的作用普通的 props 传值先来看看原创 2021-05-05 21:41:11 · 407 阅读 · 1 评论 -
Vue Router原理实现
Vue Router原理实现Vue 中的 History 和 Hash 模式的区别在实现 Vue Router 之前,我们来看看 Vue Router 的两种模式,前端路由的表现形式有两种,一种是 Hash 模式,一种是 History 模式。无论是哪一种都是客户端路由实现的方式,也就是说当路径发生变化时,不会向服务器发送请求,是由 JavaScript 监听路由的变化,根据不同的路由地址渲染不同的内容,如果需要服务器的内容,会发送 ajax 请求来获取。表现形式的区别Hash 模式http原创 2021-04-18 21:14:44 · 200 阅读 · 0 评论 -
从源码看vue响应式原理
前言众所周知,Vue 是一个 MVVM 框架,它最基本的特征就是数据的双向绑定,在改变数据模型的时候更新视图,视图改变更新数据模型。Vue 上手快速、简单好用,再加上文档丰富全面,Vue 现在已经成为了市面上最流行前端框架之一。但是我们对 Vue 的了解不能仅仅只停留在应用层面上,我们还要了解它的内部原理,为什么这样设计,这样设计的优缺点是什么。我们去了解 Vue 源码,一方面是为了在我们遇到一些比较复杂的问题的时候,我们可以从源码的角度去思考问题;另一方面,了解了很多技术原理之后,或许某一天,你也能创造原创 2021-04-05 23:53:36 · 160 阅读 · 1 评论 -
Vue异步更新Dom和$nextTick原理
$nextTick 的使用场景虽然 Vue 是数据驱动的,但是有时候我们不得不去操作 DOM 去处理一些特殊的场景,而 Vue 更新 DOM 是异步执行的,所以我们不得不去使用 $nextTick 去异步获取 DOM。<template> <div> <span ref="msg">{{ msg }}</span> </div></template><script>export default {原创 2021-04-04 23:07:37 · 551 阅读 · 0 评论 -
手写Vue2.0响应式原理
今天来实现一个简易版的Vue2.0响应式class Vue { constructor(options) { this.$options = options this.$data = options.data // 重写数组方法 let arrayPrototype = Array.prototype const methods = ['pop', 'push', 'shift', 'unshift']原创 2021-03-30 23:29:30 · 160 阅读 · 0 评论 -
在v-html中使用filters以及在filters中使用this
vue2.0中去除了在v-html中使用filters方法,但是这是否意味着不可以这么使用了呢html部分<span v-html="$options.filters.contentFilters(item.data.description, this)"></span>js部分filters: { contentFilters(val: string, vm: Vue) { if (val && val.length > 1原创 2021-03-30 23:27:07 · 194 阅读 · 0 评论