![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
背包Boy
朽木也,穷其一生自雕。心已觉累,没有眼泪。
个人博客:http://lawsan.xyz
展开
-
Vue的v-model实现原理
<input v-model="inputValue" /><input :value="inputValue" @input="inputValue = $event.target.value" />第二行是第一行的语法糖。原生JS实现v-model<body> <input type="text" id="inputModel"> <p id="p"></p></body><script&g原创 2021-04-02 14:45:24 · 252 阅读 · 0 评论 -
vue路由守卫与自定义命令
// 组件内守卫beforeRouteEnter(to,from) // 在渲染该组件的对应路由被验证前调用beforeRouteUpdate(to,from) // 在当前路由改变,但是该组件被复用时调用beforeRouteLeave(to,from) // 在导航离开渲染该组件的对应路由时调用// vue自定义指令vue.directive(‘pin’,{//钩子函数})created(el,binding,vnode,prevNode)beforeMountmountedbe原创 2021-04-02 10:50:03 · 139 阅读 · 0 评论 -
记修改ElementUI的时间控件DateTimePicker样式踩坑日记
前言需求是这样的,时间只能选择之后的时间,并且日期时间只要求精确到小时,也就是不用选分钟和小时。根据ElementUI的代码复制粘贴过来。 <el-date-picker v-model="value2" type="datetime" placeholder="选择日期时间" align="right" format="yyyy-MM-dd HH" value-format="yyyy-MM-dd HH"> </el-date-pi原创 2021-01-16 14:42:30 · 7357 阅读 · 2 评论 -
Vue中的nextTick
在Vue中涉及DOM的异步更新,也就是nextTick;Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。nextTick会在DOM更新后调用回调函数。this.$nextTick(function () { // Code that will run only after the // entire view has been rendered})相关源码解读/* @flow *//* globals MutationObse原创 2020-12-22 11:54:36 · 93 阅读 · 0 评论 -
200多行代码带你实现一个简单Vue
我们都知道Vue是响应式的,Vue就是基于数据劫持+发布者-订阅者模式实现的数据响应式,数据变化驱动视图更新,而通过操作视图也能改变数据。数据劫持是通过Object.defineProperty把Vue中的data转化成getter和setter实现,ES6中也有Proxy对数据进行拦截处理。首先来着一个图,大概总结一个流程。代码开始class MyVue{ constructor(options){ this.$el = options.el this.$data = options.原创 2020-08-15 19:36:25 · 238 阅读 · 0 评论 -
Vue开发指南之深入了解组件
前言这篇文章是上一篇文章的续文,让我们一起了解组件吧。组件注册全局组件与局部组件组件名称首字母大写命名(MyComponentName)或者短横线分隔命名(my-component-name)全局组件:Vue.component('my-component-name', { /* ... */ })局部组件注意一点:局部注册的组件在其子组件中不可用(也就是说局部组件只在当前注册的组件中可用,当前注册的组件的子组件不可用,要在子组件重新注册)。var ComponentA = { /* .原创 2020-07-18 17:16:42 · 207 阅读 · 0 评论 -
Vue开发指南之基础篇
前言博主博客,欢迎来访http://lawsan.xyz写这编文章也是为了回顾之前学的Vue,查漏补缺。此篇文章涵盖Vue的基本知识以及开发技巧等。这篇文章不讲Vue的相关原理,只会讲Vue 2.0在开发中常见的知识点。你准备好了吗?安装CDN引入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>NPMnpm install vue命令行工具(CLI)安装Vue-cli np原创 2020-07-14 18:21:07 · 298 阅读 · 0 评论 -
浅谈vue组件通信
以下文章浅谈以下vue组件之间的通信,propsprops主要是父组件向子组件传值,以下为使用方法//父组件Home 子组件S1 //父组件通过绑定属性的方式向子组件传递数据//子组件通过props来接收//以下为父组件Home的代码<template> <div class="home"> 以下为组件S1的内容 <S1 :s1Dat...原创 2020-03-28 21:44:36 · 85 阅读 · 0 评论 -
Vue通过render渲染$Notice
主要是通过vue的render函数实时渲染$Notice的内容,基于iview UI的Notice通知提醒。通过直接调用以下方法来使用组件:this.$Notice.open(config)this.$Notice.info(config)this.$Notice.success(config)this.$Notice.warning(config)this.$Notice.erro...原创 2020-03-25 13:47:08 · 1603 阅读 · 0 评论 -
vue中使用quill-editor并配合七牛云上传图片后回显
在开发项目时不可能所有的资源都存放在一个服务器中,这样造成资源加载慢,许多带宽都被图片或者视频的加载占用;七牛云是一个不错的对象存储服务商;使用我是配合iview的upload组件使用 <div class="edit_container"> <quill-editor v-model="articleForm.content" ref=...原创 2020-02-20 20:52:51 · 1499 阅读 · 2 评论 -
如何对vue中v-htm渲染出的元素添加样式
在开发时我们可能会遇到对vue中的v-html渲染出来的元素添加样式;在原有的style里面加也没有效果;下面有3中方法可以起到效果;去掉style标签中的scoped属性,此方法会对全局的样式污染,不建议使用;在钩子函数 updated()里面对要添加样式的元素添加样式; updated(){ let art = document.getElementById('my...原创 2020-02-20 20:20:06 · 436 阅读 · 1 评论 -
解决vuex页面刷新重新赋值问题
每次刷新就会发现vuex里面的值并没有改变。解决:利用vuex-along保持持久化。安装:npm install vuex-along -save使用:在stroe的文件中引入import createVuexAlong from 'vuex-along',代码如下export default new Vuex.Store({ state: {}, mutations: {}, ...原创 2020-02-10 11:16:20 · 1332 阅读 · 0 评论 -
记一次vue项目打包部署
配置此次vue项目时利用vue-cli3构建的,所以并没有vue.config.js文件,我们在项目根目录下创建vue.config.js文件,文件如下// vue.config.jsmodule.exports = { // 选项... publicPath:'/', //部署应用包时的基本 URL outputDir:'dist',//生成的...原创 2020-02-10 10:47:08 · 1122 阅读 · 2 评论 -
基于Vue+iview的头像剪切上传vue-cropper
写项目的时候遇到了一个头像的更改,也就是要对要上传的图片进行裁剪,然后再上传;默认已经安装了iview安装npm install vue-cropper -Save使用在要使用的页面的template中引入 <Modal v-model="modal1" title="操作图片" :loading="loading" @...原创 2020-02-04 11:35:36 · 2630 阅读 · 15 评论 -
解决Vue中iview ui的导航栏刷新状态保持不变
iview的Menu 导航菜单中active-name为激活的name值。要想刷新不变,可以设置:active-name="$route.path,还有每个MenuItem 的name值等于to的值就行。这样就可以实现刷新保持状态不变。当然你也可以利用Vuex来保存状态。相关代码如下 <Menu mode="horizontal" :active-name="$route.path...原创 2020-01-10 19:47:03 · 2013 阅读 · 0 评论 -
Vue笔记
快速构建vue项目先确保node,webpack,vue已经安装安装vue-cli npm install -g @vue/cli如果要使用vue-cli-2.x npm install -g @vue/cli-initvue init webpack my-project 创建my-project项目创建完后 cd my-project 、npm insatll、npm run de...原创 2019-10-03 11:17:07 · 95 阅读 · 0 评论