vue
文章平均质量分 76
_阿锋丶
这个作者很懒,什么都没留下…
展开
-
写vue3+ jsx+ts语法+ storybook展示的组件库
代码地址前言会不定期更新,现在已更新三个组件,准备用视频记录自己写的过程并贴出来。样式上copy的别人原创 2021-12-15 21:28:00 · 3158 阅读 · 4 评论 -
实现mini-vue3
初始化项目yarn init -y[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jv0z6mLw-1638152199262)(https://i.loli.net/2021/11/28/2W6ANjVYauZeykC.png)]vue3源码采用的是monorerpo的管理方式,我们这就简单点的方式创建包集成typescript注意如果没有安装typescript需要先安装typescriptnpx tsc --init集成jestyarn add j原创 2021-11-29 10:16:59 · 639 阅读 · 0 评论 -
学会一个手写一个简单的vue(1)-含视频
前言想直接看视频的可以点击下面视频观看我的手写简单vue全过程本片文章的讲解步骤不完全按照视频里写代码的思路,但是有详细注释准备工作先看下面这张图,我是按照这张图的思路一步一步写的由于时间原因 ,视频录制中已经把vue的响应式核心的部分串联,但是编译解析部分还只写了mustuche,v-html,v-text的编译解析代码,后面会进一步完善v-model,v-bind等一系列指令先建立一个文件夹,里面放置index.html如下,然后建立下面引入的几个文件 observer.js和compi原创 2021-06-23 11:05:41 · 351 阅读 · 2 评论 -
vue3自定义组件v-model和vue2的用法比较
文章目录vue3自定义组件v-model实例vue3自定义v-model的优点(较vue2)vue3自定义组件v-model实例注意:我这里是typescript的语法,只是有个别地方和js相比要确定一下类型,比如函数传参时,和使用input元素的value时父组件App.vue<template> <div> <InputModel v-model="inputVal"/> <span>{{inputVal}}</span&原创 2020-12-07 17:13:09 · 1605 阅读 · 0 评论 -
vue中的一些高级特性(含vue3新特性)
文章目录自定义v-model组件$nextTickslot自定义v-model组件子组件CustomVModel.vue<template> <!-- 例如:vue 颜色选择 --> <input type="text" :value="content" @input="$emit('changeEvent', $event.target.value)" > <!-- 1. 上面的 input 使用了 :va原创 2020-11-30 17:17:51 · 1573 阅读 · 0 评论 -
vue3生命周期和vue2的比对
vue2和vue3的生命周期函数对应关系以下表格是按照生命周期的顺序从上到下品牌列的vue2vue3beforeCreatesetupcreatedsetupbeforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedupdatedonUpdateddestroyedonUnmountedactivatedonAct原创 2020-11-27 16:48:32 · 462 阅读 · 0 评论 -
vue3 ref 和reactive的区别
文章目录RefreactiveRefref数据响应式监听,和react-hook好像差不多。ref 函数传入一个值作为参数,返回一个基于该值的响应式Ref对象,该对象中的值一旦被改变和访问,都会被跟踪到,就像我们改写后的示例代码一样,通过修改 count.value 的值,可以触发模板的重新渲染,显示最新的值<template> <h1>{{name}}</h1> <h1>{{age}}</h1> <button原创 2020-11-27 15:45:14 · 27170 阅读 · 5 评论 -
解决vue3+ts 创建项目其中的.vue文件出现 ‘interface‘ declarations can only be used in TypeScript files.
在首选项->设置里面打开setting.json文件删除或者注释掉下面代码, "files.associations": { ".eslintrc": "json", "*.vue": "html" },出现这个问题的原因可能就是一些插件之间的配置冲突什么的,反正搞得我这几个小时 是真的累了...原创 2020-11-27 11:22:20 · 9659 阅读 · 10 评论 -
创建vue3.0的第一个组件,学习vue3较vue2的改变
前言vue3继承了vue2的大部分功能,增添了一些特性,所以vue叫做渐进式框架,所以还是可以用vue2的大部分语法的vue3组件代码<template> <h1>{{name}}</h1> <h1>{{age}}</h1> <button @click="sayName">按钮</button></template><script lang="ts">import原创 2020-11-26 21:08:12 · 357 阅读 · 0 评论 -
vue watch监听方法
添加链接描述转载 2020-06-09 19:51:47 · 543 阅读 · 0 评论 -
vue router全面详细知识点
文章目录认识路由什么是路由后断路由前端路由前端路由的规则url的hashHTML5的history模式vue router基础什么是vue router安装和使用如何创建一个router实例挂载到vue实例中具体使用router创建实例的过程细节处理路由的默认路径设置HTML5的history模式详解router-link如和修改linkActiveClass实现路由代码跳转如何创建动态路由路由的懒加载效果三种方法路由嵌套什么是路由嵌套路由嵌套的实现步骤嵌套路由的默认路径(重定向)传递参数准备工作传递参数的原创 2020-05-21 08:33:03 · 5865 阅读 · 1 评论 -
vue-cli全面复习
文章目录什么是vuevue cli的使用前提vue cli的安装和初始化项目步骤vue cli2详细教程vue cli 项目目录结构介绍Vue程序运行过程render函数的使用npm run build 详解执行意义npm run dev 执行意义修改配置vue cli3详解与cli 2 的区别创建项目过程目录结构vue ui 和配置文件的位置怎样配置文件别名什么是vuevue cli的使用前提vue cli的安装和初始化项目步骤在命令行输入 vue init webpack 项目名 之后原创 2020-05-21 08:00:22 · 4105 阅读 · 0 评论 -
Vue所有基础语法细节整理复习
文章目录插值操作Mustachev-oncev-htmlv-testv-prev-cloak绑定属性v-bindv-bind动态绑定class的多种方法v-bind动态绑定style计算属性什么是计算属性计算属性的复杂操作计算属性的setter和getter有了methods为什么还要有计算属性computed事件监听v-on条件判断v-ifv-if v-elsev-if v-else-if v-else条件渲染的案例v-show和v-if的区别循环遍历v-for遍历数组v-for遍历对象组件的key属性检原创 2020-05-17 19:17:47 · 30445 阅读 · 40 评论 -
vue中$refs的用法及作用详解
vue中$refs的用法及作用详解转载 2020-05-11 08:43:49 · 714 阅读 · 0 评论 -
ElementUI表格中获取当前行数据(实现对table数据的修改和删除)
ElementUI表格中获取当前行数据(实现对table数据的修改和删除)转载 2020-04-29 10:39:05 · 4107 阅读 · 0 评论 -
element ui table表格里面插槽的使用方法
element ui table表格里面插槽的使用方法转载 2020-04-28 11:45:45 · 4387 阅读 · 0 评论 -
深入理解vue中的slot与slot-scope
深入理解vue中的slot与slot-scope转载 2020-04-28 11:22:23 · 164 阅读 · 0 评论 -
10分钟了解token
token转载 2020-04-27 08:31:06 · 277 阅读 · 0 评论 -
10分钟学会axios框架核心知识,详细axios教程
文章目录vue选择网络模块的比较jsonp介绍了解jsonpjsonp的封装为什么选择axiosaxios的全部请求方式怎样发送并发请求怎么进行全局配置有哪些常用的配置选项学会创建axios实例封装axios学会使用axios拦截器vue选择网络模块的比较jsonp介绍了解jsonpjsonp的封装为什么选择axiosaxios的全部请求方式怎样发送并发请求axios....原创 2020-04-25 12:20:45 · 8092 阅读 · 1 评论 -
vuex核心内容及重点细节总结
文章目录vuex简介vuex的状态管理vuex几大核心内容state模块mutations模块mutations怎么传递参数mutations提交风格mutations响应规则mutations常量类型细节编程mutations同步函数getters模块Actions模块module模块详细代码store/index.jsHelloWorld.vueApp.vuemutations-types.j...原创 2020-04-24 12:05:54 · 9377 阅读 · 10 评论 -
VueJS 数组哪些方法是响应式的
VueJS 数组哪些方法是响应式的转载 2020-04-23 11:45:37 · 209 阅读 · 2 评论 -
vuex超详细教程
vuex详细教程转载 2020-04-23 09:52:55 · 233 阅读 · 1 评论 -
Vue-cli3 项目配置 Vue.config.js
Vue-cli3 项目配置 Vue.config.js转载 2020-04-22 09:09:58 · 257 阅读 · 0 评论 -
flex:1是什么含义及flex弹性布局详解
flex:1阮一峰flex教程转载 2020-04-21 11:03:43 · 4992 阅读 · 0 评论 -
Vue keep-alive实践总结
Vue keep-alive实践总结转载 2020-04-20 17:33:08 · 121 阅读 · 0 评论 -
Vue-router的导航守卫
Vue-router的导航守卫转载 2020-04-20 15:33:10 · 139 阅读 · 0 评论 -
Vue Router 的params和query传参的使用和区别(详尽)
Vue Router 的params和query传参的使用和区别(详尽)转载 2020-04-20 08:59:19 · 207 阅读 · 0 评论 -
vue-router之什么是动态路由
vue-router之什么是动态路由转载 2020-04-16 11:53:21 · 869 阅读 · 0 评论 -
vue-router路由懒加载的详解(原因,效果,和三种方式进行懒加载)
文章目录使用路由懒加载的原因路由懒加载使用前后对比懒加载的三种方式使用路由懒加载的原因路由懒加载使用前后对比没有使用路由懒加载时解析下面三个文件分别的作用app文件是自己写的业务代码的整合,manifest文件是为我们打包的代码做底层支撑的,比如使commonjs的导入导出和es6的导入导出是有效的,vendor是处理第三方的工具比如vue的一些代码的整合使用懒加载后懒加载的三...原创 2020-04-16 11:16:31 · 3437 阅读 · 0 评论 -
"router-link"各种属性解释
"router-link"各种属性解释转载 2020-04-16 09:08:34 · 221 阅读 · 0 评论 -
vue.esm.js?f959:610 [Vue warn]: Failed to mount component: template or render function not defined.
vue.esm.js?f959:610 [Vue warn]: Failed to mount component: template or render function not defined.转载 2020-04-16 08:29:44 · 300 阅读 · 0 评论 -
Vue --- vue-router的安装和配置方式
Vue — vue-router的安装和配置方式转载 2020-04-16 08:01:00 · 147 阅读 · 0 评论 -
url的hash和HTML5的history
url的hash和HTML5的history转载 2020-04-16 07:39:06 · 137 阅读 · 0 评论 -
体验vue UI,图形可视化化管理vue项目
体验vue UI,图形可视化化管理vue项目转载 2020-04-15 11:11:23 · 775 阅读 · 0 评论 -
vue-cli 3.0 安装和创建项目流程以及和vue-cli 2的区别
vue-cli 3.0 安装和创建项目流程以及和vue-cli 2的区别转载 2020-04-15 10:25:23 · 155 阅读 · 0 评论 -
Runtime Only和Runtime+Compiler的区别
转载于dream_Q转载 2020-04-15 09:41:33 · 369 阅读 · 0 评论 -
vue-cli怎么关掉ESlint规范
vue-cli怎么关掉ESlint规范转载 2020-04-15 09:11:52 · 821 阅读 · 0 评论 -
vue-cli2创建项目过程的详细解析及项目目录解析
原创 2020-04-14 17:23:02 · 313 阅读 · 0 评论 -
配置webpack配了三天,这篇过程清晰,讲解详细的教程拯救了我
配置webpack转载 2020-04-14 16:01:41 · 175 阅读 · 0 评论 -
vue组件中的父子组件通信两种方式
子组件是不能引用父组件或者vue的实例数据的,但是在开发中一些数据需要从上层传递到下沉,比如在下面的页面中,我们从服务器请求到了很多的数据,其中一部分数据是需要子组件来进行展示的,这个时候,并不会让子组件在次发送网络请求,而是直接将大组件的数据传递给小组件父子通信的两种方式1,用props向子组件传递数据(vue实例是根组件,最大的父组件)num就是父传子的元素<body>...原创 2020-04-03 10:14:19 · 539 阅读 · 4 评论