Vue系列

Vue之ToDoList实战

之前的文章windows下搭建vue开发环境，我们已经搭建好了vue的环境，并且写了Vue系列之WebPack与Eslint，对vue项目的整体情况有了了解，这篇文章我们就来练习一下vue，实现ToDoList
充电实践·2020-06-29 21:52

【Vue原理】Vue源码阅读总结大会 - 终

白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于Vue版本【2.5.17】如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧【Vue原理】Vue源码阅读总结大会-终终于啊终于啊，把Vue
Web全栈开发·2020-06-29 16:02

vue系列：vue中使用typescript

文章目录安装1、通过脚手架2、自定义安装2.1安装2.2配置webpack2.3添加tsconfig.json2.4添加tslint.json2.5让ts识别.vue2.6改造.vue文件测试安装1、通过脚手架vue/cli3的脚手架可以选择默认安装ts，也就省的我们自己配置了2、自定义安装2.1安装//安装vue的官方插件npmivue-class-componentvue-property-d
Lvan-Zhang·2020-06-29 11:18

VUE系列一：VUE入门：搭建脚手架CLI（新建自己的一个VUE项目）

一、VUE脚手架介绍官方说明：Vue提供了一个官方的CLI，为单页面应用快速搭建(SPA)繁杂的脚手架。它为现代前端工作流提供了batteries-included的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时lint校验，以及生产环境可用的构建版本。更多详情可查阅VueCLI的文档。个人理解：在实际开发中都是通过脚手架快速搭建一个vue项目，当然也可以使用CDN的方式（具体请看
weixin_34279061·2020-06-28 15:36

VUE系列三：实现跨域请求(fetch/axios/proxytable)

1.在config/index.js配置文件中配置proxyTable'usestrict'//Templateversion:1.3.1//seehttp://vuejs-templates.github.io/webpackfordocumentation.constpath=require('path')module.exports={dev:{//PathsassetsSubDirecto
weixin_34205826·2020-06-28 13:23

vue系列之vue cli 3引入ts

插件vue-class-component强化Vue组件，使用TypeScript/装饰器增强Vue组件vue-property-decorator在vue-class-component上增强更多的结合Vue特性的装饰器vuex-class基于vue-class-component对Vuex提供的装饰器vue-class-componentimportVuefrom'vue'importComp
weixin_34037173·2020-06-28 10:24

mpvue系列（三）：组件、数据交互

1、mpVue项目组件的使用？（1）mpvue可以支持小程序的原生组件，比如：picker,map、swiper等。（2）需要注意的是原生组件上的事件绑定，需要以vue的事件绑定语法来绑定，如bindchange="eventName"事件，需要写成@change="eventName"。2、mpVue项目数据交互？（1）package.json加入依赖或者npminstallflyio--sav
醉虾不醉·2020-06-28 08:48

【vue系列之一】使用vue-cli脚手架工具搭建vue-webpack项目

最近更新了webpack配置详解，可移步vue-cliwebpack详解对于Vue.js来说，如果你想要快速开始，那么只需要在你的html中引入一个标签，加上CDN的地址即可。但是，这并不算是一个完整的vue实际应用。在实际应用中，我们必须要一系列的工具，包括：模块化，转译，预处理，热加载，静态检测和自动化测试等。对于一个需要长期维护和大型的项目而言，这些工具是必不可少的，但是尝试配置初始化这些很
weixin_30621919·2020-06-27 22:12

Vue系列之顶部进度条（NProgress）

一、Vue顶部进度条（实战）1、安装nprogress插件本地引入npm或bower安装npminstall--savenprogressbowerinstall--savenprogress2、在main.js中配置nprogress//导入进度条插件importNProgressfrom'nprogress'import'nprogress/nprogress.css'//全局进度条的配置NP
singular港·2020-06-25 14:55

大前端常用技术（持续更新）

大前端常用技术Vue系列Vue全家桶：Vue+vuex+vue-router+veu-cliVue服务端渲染SSR:vue-nuxtVue组件库：vant,element,iView…Vue全栈：Express
fltenwall·2020-06-25 06:41

Vue系列教程（六）—— 使用axios发送请求

在Vue1.0的时候有一个官方推荐的ajax插件vue-resource，但是自从Vue更新到2.0之后，官方就不再更新vue-resource。关于为什么放弃推荐?->尤大原话Ajax本身跟Vue并没有什么需要特别整合的地方，使用fetchpolyfill或是axios、superagent等等都可以起到同等的效果，vue-resource提供的价值和其维护成本相比并不划算，所以决定在不久以后取
Y-LOL·2020-06-24 20:45

vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（二）

推荐我的vue教程：VUE系列教程目录通过上一篇文章vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（一），我们已经新建好了一个基于vue+webpack的项目。
言墨儿·2020-06-24 20:08

【开源项目】个人博客项目

#Blogv1.0项目地址：http://www.istorms.net/开源地址：https://github.com/Eval0day7/Blog/概述：该项目为前后端分离项目，前端采用Vue系列，
iStorms·2020-06-24 04:26

vue系列教程-15vuex的使用

本内容为系列内容，全部内容请看我的vue教程分类我的个人博客本节仓库地址视频教程地址什么是vuexvuex是vue.js专门用来进行状态管理的工具，采用集中式状态管理,并以相应的规则保证一种可预测的方式发生变化通俗的来说，就相当于一个管家，我们把一些公用的数据交给他进行管理，并且每个组件都能从他那里获取数据，或者通知他修改数据，比如存储用户信息组成State数据仓库getter获取数据mutati
lookroot·2020-06-23 19:00

vue系列教程-14axios的使用

本内容为系列内容，全部内容请看我的vue教程分类我的个人博客本节仓库地址视频教程地址什么是Axios是一个基于promise（承诺）的HTTP网络请求库可以用于浏览器和node.js项目vue官方推荐的请求库，从以前的vue-resource到axios通俗点说就是对JavaScript的http请求的二次封装，就类似jQuery的ajax中文文档立即查看原则上学习这一节需要mock数据相关的知识
lookroot·2020-06-23 19:00

vue系列教程-13vuecli初体验

本内容为系列内容，全部内容请看我的vue教程分类我的个人博客本节仓库地址视频教程地址VueCLI是一个基于Vue.js进行快速开发的完整系统终于就是到了这一节，前面多次提到的脚手架来啦！什么是脚手架其实就是一个配置好了的使用webpack完成打包构建的初始化工程，和我们前面讲的webpack打包没啥区别，只是更为全面，在实际开发中也是常用的工具当前最新版本为vue-cli4但是和cli3区别不大所
lookroot·2020-06-23 19:00

vue系列教程-12vue单文件组件开发

本内容为系列内容，全部内容请看我的vue教程分类我的个人博客本节仓库地址视频教程地址那么前面我们都是直接引入vuejs文件的方式进行开发，然后在同一个html文件中进行开发这显然是不符合组件化开发的思路的，前面我们说过实际当中的开发都是编写以.vue结尾的页面文件，然后用webpack进行打包这一节我们将到vue的单文件组件开发，使用的是webpack提供的简易模板，没有webpack基础的朋友不
lookroot·2020-06-23 19:00

vue系列教程-11vuerouter路由

本内容为系列内容，全部内容请看我的vue教程分类我的个人博客本节仓库地址视频教程地址什么是路由大家还记得我最开始提到的spa单页面吗，通过不同的路径显示不同的组件，这个就是通过router实现的那么首先我们还需要引入一个router文件这里的话我们还是以上面的bilibili消息中心为示例，使用到刚刚的代码还是先定义组件模板回复我的这是回复我的界面@我的这是@我的界面收到的赞这是收到赞的界面然后定
lookroot·2020-06-23 19:00

vue系列教程-10vue过滤器和自定义指令

本内容为系列内容，全部内容请看我的vue教程分类我的个人博客本节仓库地址视频教程地址vuefilter过滤器这个过滤器其实可以看成就是保安这样一个，对资源做一些处理，当然不仅仅是看门这么简单我们这里举例比如敏感字符串的过滤全局过滤器那么和组件一样，有全局的私有的，我们先来定义全局的在vue实例化之前定义,首先msgFormat这个是过滤器的名称然后我们使用replace处理一下字符串再返回Vue.
lookroot·2020-06-23 19:00

vue系列教程-09vue组件

本内容为系列内容，全部内容请看我的vue教程分类我的个人博客本节仓库地址视频教程地址什么是组件还记得我们前面讲的spa单页面吗，那么这个只有一个单页面文件是如何实现切换显示和不同路径展示不同内容的呢？这就是组件，我们还是用哔哩哔哩这个界面举例，这个每个红圈勾住的地方就可以看做是一个个组件，当然每个组件里面也是可以再嵌套组件的，可以看做是套娃行为我们上面所写的全部实例化vue的代码它本身就是一个组件
lookroot·2020-06-23 19:00

vue系列教程-08vue的动画和过渡效果

本内容为系列内容，全部内容请看我的vue教程分类我的个人博客本节仓库地址视频教程地址过去都是jquery来做动画比较多吧，这一节就是介绍一下vue的过渡和动画，这需要你具备实现css的基本过渡和动画的能力vue也可以借助第三方库实现比较复杂的动画，本次只是介绍常用的简单效果，更深的在下次的进阶课程中vue的过渡效果这里要先介绍它的原理，也就是不同的阶段给这个节点绑定上不同的class，来看一个动图
lookroot·2020-06-23 19:00

vue系列教程-07vue动态绑定样式

本内容为系列内容，全部内容请看我的vue教程分类我的个人博客本节仓库地址视频教程地址前面在讲到v-bind的时候我们说到vue是可以绑定样式的，那么这里我们就简单实践一下为什么要动态绑定样式来看这个效果，默认渲染选中的是蓝色字体，这就是一个简单的场景，包括还有些列表展示中，不同数据不同样式，比如vip用户的标识就不同，这就需要动态绑定样式，懂了吧！[外链图片转存失败,源站可能有防盗链机制,建议将图
lookroot·2020-06-23 19:00

vue系列教程-06vue的事件处理

本内容为系列内容，全部内容请看我的vue教程分类我的个人博客本节仓库地址视频教程地址点击事件还记得jquery是怎么绑定点击事件的吗$("button").click(function(){console.log('我被点击了')});那么vue是如何绑定点击事件呢？就要使用v-on来监听dom的事件首先实例化一个vue,定义一个数字countletvm=newVue({el:'#app',dat
lookroot·2020-06-23 19:00

vue系列教程-05vue常用指令

本内容为系列内容，全部内容请看我的vue教程分类我的个人博客本节仓库地址视频教程地址v-bind上面讲了页面怎么渲染数据，那么vue如何给一些空间绑定数据呢？比如图片链接、单选框、样式等等这里就要使用到v-bind首先初始化一个vue项目，定义一个图片链接字符串letvm=newVue({el:'#app',data(){return{avatar:'https://www.baidu.com/i
lookroot·2020-06-23 19:00

vue系列教程-04vue数据处理和页面渲染

本内容为系列内容，全部内容请看我的vue教程分类我的个人博客本节仓库地址视频教程地址vue定义数据还记得前面说的mvvm的model层吗?也就是数据层在vue中我们如何定义我们需要使用到的数据呢letvm=newVue({el:'#app',data(){return{//定义字符串name:'lili',//定义数字age:1,//定义对象user:{name:'lookroot',age:20
lookroot·2020-06-23 19:00

vue系列教程-03vuejs的结构和生命周期

vuejs的结构和生命周期本内容为系列内容，全部内容请看我的vue教程分类我的个人博客本节仓库地址视频教程地址结构上一节我们实例化vue的时候传递了一个对象，那么这个对象具体是个什么样的结构那，可以传递一些什么样的值那//实例化一个vueletvm=newVue({//页面中的挂载点el:'#app',//定义内部数据data:{},//方法列表methods:{},//监听事件watch:{},
lookroot·2020-06-23 19:00

Vue系列教程（二十二）自定义全局指令让文本获取焦点

实现文本框自动获取焦点，在原生JS中的做法如下：htmljsdocument.getElementById('search').focus()但是vue不提倡操作DOM，vue中的做法是使用自定义指令：注意：vue中自定义指令都是以v-开头使用Vue.directiv()定义全局指令参数1：指令名称在定义的时候，指令名称前面，不需要加v-前缀，在调用时，必须在指令名称前加上v-前缀来进行调用参数2
刘阳不吃饭·2020-06-23 17:04

Vue系列4 - Vue+store 保存用户登录信息和退出登录

阿里云采购季1.store/index.jsimportVuefrom'vue'importVuexfrom'vuex'importqsfrom'qs'importexamplefrom'./module-example'import_from'lodash';Vue.use(Vuex)Vue.prototype.$qs=qs/**IfnotbuildingwithSSRmode,youcan*d
西北码农·2020-06-22 18:45

从零开始学vue 系列一(搭建vue项目)

从零开始学vue系列一(搭建vue项目）写在前面一、安装node.js二、创建项目并运行写在前面Vue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式框架。
AlwaysWM丶·2020-06-22 05:45

精通React/Vue系列之实现一个全局提示(Message)组件

我们看到的组件效果可能是这样的：由于全局提示组件的设计原理和笔者上一篇写的精通React/Vue系列之手把手带你实现一个功能强大的通知提醒框(Notification)是类似的，区别主要是布局和配置参数
徐小夕_上海·2020-06-21 23:20

Vue系列(二):Vue基础语法

Vue基础语法内容概述插值操作绑定属性计算属性事件监听条件判断循环遍历阶段案例v-model一.插值语法1.1.Vue的template代码规范平常我个人习惯是缩进四个空格，但是大型的框架(比如Vue)大多是缩进两个空格,我们尽量习惯缩进两个空格。Webstorm抽离模板选择文件-->设置--->codestyle--->代码模块-->选择Vue,复制你要抽离的代码，点击应用，再点击确定，就ok了
songstar·2020-06-16 11:17

Vue系列(一):邂逅Vue开发

邂逅Vue开发遇见Vuejs1.1.为什么学习Vuejs？每个人学习Vue的目的是各不相同的。可能你的公司正要将原有的项目使用Vue进行重构。口也可能是你的公司新项目决定使用Vue的技术栈。当然，如果现在正在换工作，会发现招聘前端的需求中，10个有8个都对Vue有或多或少的要求。当然，作为学习者我们知道Vuejs目前非常火，可以说是前端必备的一个技能。招聘要求.png1.2.Vuejs的特点Vue
songstar·2020-06-14 20:09

vue系列教程-01第一个vue程序

第一个vue程序本内容为系列内容，全部内容请看我的vue教程分类我的个人博客本节仓库地址视频教程地址首先是常见的使用方式直接引入，就是我们常规的通过script标签引入完整版vue文件webpack自定义打包，这个打包的意思就好比是你家里买了很多家具，你直接全部乱放也能正常使用，但是肯定不科学，所以要放置到指定的位置，这个过程就相当于是打包，后面会详细讲到vue-cli脚手架，这个也是通过webp
lookroot·2020-05-26 21:00

vue系列教程-02什么是mvvm和spa

什么是mvvm和spa本内容为系列内容，全部请看我的vue教程分类我的个人博客本节仓库地址视频教程地址什么是mvvmModel-View-ViewModel很多初学者就对这个比较模糊，其实我这里讲了你也不一定能理解，这个东西还是需要实践才能体会我尽量讲的通俗一点首先还是这张图，大家可能都看过了，这里我们举一个例子结合图来说明比如我们的电脑，显示器等同于(view视图层),硬盘等同于(model数据
lookroot·2020-05-26 21:00

vue系列-DateUtil工具组件

原文博客：Doi技术团队链接地址：https://blog.doiduoyi.com初心：记录优秀的Doi技术团队学习经历引入组件引入Moment.js组件官网使用：安装npminstallmoment--save#npm使用vue页面引入importmomentfrom'moment'功能将时间自定义格式化获取时间戳获取当前时间时间推移代码importmomentfrom'moment'cons
蓝汝丶琪·2020-04-09 22:16

web前端-在迷惘中的探索HTML5（二）本地存储之IndexDB

今天原本打算继续出VUE系列的教程，结果由于今天被要求从数据库请求一个压缩文件，然后放置在页面上在线浏览，我就去查相关的关于HTML5的indexDB本地数据库存储，结果网上的教程一个比一个烂我愣是看了
言墨儿·2020-04-01 04:05

Vue系列一之：如何构建一个简单的Vue项目

网络上已经有很多关于学习vue的资源和内容，官方文档更是给出了大量的知识点和使用方法给我们提供学习，可是学习归学习，如果这些内容没有应用到实际的开发当中，那也是没有什么用途的，因为工具之所以为工具，是因为在你不断的使用中，有自己的思考，有自己的判断，有自己去探索的空间。好了，废话不多说了，下面我们来看一下官方给予的一个定义：Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vu
蔡俊宇·2020-03-19 18:10

VUE系列---VUE+indexDB+JSZip+在线预览zip压缩文件(一)

推荐我的vue教程：VUE系列教程目录如果说上面的温馨连接提示，带你们进入了VUE的大门，那么，今天我们就玩一个绝活，在网页端使用VUE框架配合indexDB数据库来实现zip文件的在线预览，这个功能对于
言墨儿·2020-03-18 20:48

mpvue系列（四）：建议与注意事项

1、mpVue使用中好的建议？（1）mpvue建议使用v-model.lazy绑定方式以优化性能，此外v-model在老基础库下输入框输入时可能存在光标重设的问题。2、mpVue使用中需要注意的地方？（1）不支持在组件上使用Class与Style绑定，需要在组件内部书写。（2）新增页面需要npmrundev重启一下。可以先建好空页面。（3）小程序里所有的BOM／DOM都不能用，也就是说v-html
醉虾不醉·2020-03-15 03:07

VUE系列---VUE+indexDB+JSZip+在线预览zip压缩文件(三)

推荐我的vue教程：VUE系列教程目录温馨连接提示：vue中级之路篇系列教程：VUE系列---VUE+indexDB+JSZip+在线预览zip压缩文件(一)VUE系列---VUE+indexDB+JSZip
言墨儿·2020-03-10 03:41

vue升级之路（一）-- 使用vue-cli构建vue项目

最近在公司用vue.js做了个移动端OA项目，有点感觉vue2.0的运用有点不足，所以准备用这次项目的累积及之前的一些理解，写一个vue系列的博客，巩固一下自己对vue的使用，也希望对大家有所帮助。
tree_book·2020-03-03 05:02

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 实现授权验证登陆

壹周回顾哈喽，又是元气满满的一个周一，又与大家见面了，周末就是团圆节了，正好咱们的前后端也要团圆了，为什么这么说呢，因为以后的开发可能就需要前后端一起了，两边也终于会师了，还有几天Vue系列就基本告一段落了
SAYLINING·2020-03-02 02:50

06、手把手教Vue--移动webapp适配方案--rem

PS：转载请注明出处作者:TigerChain地址:https://www.jianshu.com/p/443c6704d8d8本文出自TigerChain手把手教Vue系列大纲教程简介1、阅读对象本篇教程适合新手阅读
TigerChain·2020-02-26 19:41

vue系列01：修改浏览器title图标

一、将图片放至根目录image.png二、修改根目录中index.html文件三、修改根目录build下面webpack.dev.conf.js和webpack.prod.conf.jswebpack.dev.conf.js和webpack.prod.conf.js都在HtmlWebpackPlugin中添加favicon:path.resolve('logo1.png')imageimage
Clare_l·2020-02-09 20:01

Vue系列教程（三）v-bind指令

v-bind是用来绑定变量的.我们给按钮设置title的方法如下：v-bindvarvm=newVue({el:'#app',data:{myTitle:'自定义title'}})鼠标方法按钮上会有提示，页面效果：现在我们想动态显示title的值，更改代码：页面效果：我们发现，这样简单的替换是不可行的，这时候v-bind指令该登场了,更改代码如下：页面效果：另外值得一提的是，v-bind会把后面引
刘阳不吃饭·2020-02-09 18:00

Vue系列教程（二）v-cloak、v-text、v-html的基本使用

v-cloak我们已经知道双向绑定的方法如下：v-cloak{{msg}}varvm=newVue({el:'#app',data:{msg:'123'}})效果：调整网络速度：浏览器f12，找到Network，改成Slow3G，刷新页面显示效果如下：当网速比较慢的时候，我们能看到插值表达式，这时候v-cloak该出场了：v-cloak/*凡是使用了v-cloak指令的标签，都设置成隐藏*/[v-
刘阳不吃饭·2020-02-09 18:00

Vue系列教程（一）基础介绍

什么是Vue.jsVue.js是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也可以进行手机App的开发，需要借助Weex）Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架！Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于第三方库或既有项目整合。（Vu
刘阳不吃饭·2020-02-09 18:00

indexdb

(image-2be8ad-1511424883366)]言墨儿关注2017.02.2200:04*字数2020阅读883评论9喜欢8今天原本打算继续出VUE系列的教程，结果由于今天被要求从数据库请求一个压缩文件
杨晨1994·2020-02-08 09:10

Vue系列三之：watch观察者与条件渲染

watch观察者watch顾名思义，就是作为一个观察者的形式存在，只要绑定的数据有所修改，既对应watch里面的函数也会发生响应的变化，可以用来计算某些数值、存储该内容到LocalStorage使用、输入过程中校验表单信息等。举一个输入账号密码的例子，html代码如下：请输入您的账号：您的账号必须超过6位数字请输入密码：请再次输入密码：两次输入的密码不一致提交表单上面内容所做的操作是，在账号表单里
蔡俊宇·2020-02-06 14:22

vue系列11：vuex

1、概念，什么是vuexvuex是Vue配套的公共数据管理工具，它可以把一些共享的数据，保存到vuex中，方便整个程序中的任何组件直接获取或修改我们的公共数据；2、vuex概念图props：父子组件data：私有数据vuex：组件间的贡献数据3、安装npminstallvuex--savehttps://vuex.vuejs.org/zh/4、使用5、实例App.vue这是App组件importc
xidianzxm·2020-01-17 13:00
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他