实习一年后,想做一个属于自己的博客网站,准备用core api去搭建服务端接口,前端准备采用vue这样的一个框架.本身时一个服务端程序员,所以来学习记录一些vue的知识点,有什么不足的希望大家指正,谢谢! 这里关于vue的指令.组件.插槽一些基础就不一一细细记录了. 先从vue cli搭建开始吧... vue cli:是vue的一款ui界面搭建的工具,简单的来说就是通过脚手架去搭建一个正规的vue项目.在以往对前端打包工具中通常可以使用webpack进行模块化打包,但是在这期间对前端打包过程中出

一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/v2/api/ 二.vue.js是什么 Vue是一个"MVVM框架(库)",和angular类似,相比angular小巧,比较容易上手 Vue是一个构建用户界面点的渐进式框架,与其他重量级框架不同的是,vue采用自底向上

本篇继续介绍vue-router,我们需要要完成这样个demo:<分页显示文章列表>:这里我们以博客园首页列表为例简化处理: 按照上图框选所示,简单分为蓝色部分文章组件(ArticleItemComponent),橙色框选部分列表组件(ArticleListComponent):分页部分我们就简单通过router-link指令构建满足演示即可,我们的代码实现逻辑: 1.列表组件初始化数据,传递给文章组件进行渲染 2.路由改变时重新初始化列表组件,更新数据 请看我们的第一版代码: <!DO

概述 由于刚开始学习 vue 源码,而且水平有限,有理解或表述的不对的地方,还请不吝指教. vue 主要通过 Watcher.Dep 和 Observer 三个类来实现响应式视图.另外还有一个 scheduler 来进行调度,本次暂时不做讨论. Watcher 和 Dep 是订阅者和发布者的关系,每个 Watcher 可以订阅多个 Dep,而每个 Dep 也可以被多个 Watcher 订阅.当 Observer 监听的数据发生改变时,相应的 Dep 就会触发其订阅者 Watcher 更新视图.

阅读目录 VUE2 第六天学习--- vue单文件项目构建 回到顶部 VUE2 第六天学习--- vue单文件项目构建 VUE单文件组件在Vue项目中,然后使用 new Vue({el: '#container' }), 在每个页面内指定一个容器元素.使用Vue.component来定义全局组件,这种方式在小规模项目中还可以,但是在项目中有如下缺点:1. 全局定义:强制要求每个component中的命名不能重复.2. 字符串模板:缺乏语法高亮,在HTML有多行的时候,需要用到丑陋的 \3. 不支

阅读目录 1.理解VUE---混合 2.Vue实例化选项 3.Vue实例化的生命周期 回到顶部 1.理解VUE---混合 在了解Vue生命周期之前,我们先来学习Vue中的混合吧: 为什么需要使用混合?  假如当我们开发时候,a.js和b.js都有公用的代码的时候,我们可以把他们抽取出来,在a.js或b.js的需要的时候可以引用进来即可,这可以简单的理解为混合.  混合对象可以包含任意组件选项,所有混合对象的选项将被混入该组件本身的选项.什么意思呢?可以简单的理解为该组件引入该混合对象的时候,该组

关于学习Vue的前置工作/技术储备 1.GitBatch 2.Sublime Text 3.Node-----npm 命令 本人用的idea GitBatch: GitBatch是一个可以编写shell脚本的工具,今天我们学习的内容在cmd下是不支持的.你要么选择gitbatch,要么你选择Linux系统 SublimeText: SublimeText:一款高级记事本 常用的主流高级记事本: UltraEdit UE                 NodePad++            E

作为一个前端菜鸟,最近开始接触和学习vue. 以前用到的是bootstrap前端框架. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架. Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. vue是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视

前言 vuejs学习——vue+vuex+vue-router项目搭建(一) vuejs学习——vue+vuex+vue-router项目搭建(二) 为什么用vuex:组件之间的作用域独立,而组件之间经常又需要传递数据,项目比较小的话传递数据还好,越大的项目,涉及的组件通信就越多.越频繁,此时管理起来就会非常累,而且容易出错,这就是 Vuex 的意义所在.它可以将数据置于单独的一层,并提供给外部操作内部数据的方法.粗俗一点,就这样理解吧.vuex1.0官网 Vuex下载 $ cnpn insta

前言 最近比较忙,所有第二章发布晚了,不好意思各位. vuejs学习——vue+vuex+vue-router项目搭建(一) 中我们搭建好了vue项目,我相信大家已经体验了vue其中的奥妙了,接下来我们结合vue-router来玩玩路由吧!在使用vue-router的同时也要熟悉官方api 准备 进入项目文件 打开Node.js command prompt  命令方式进入上章我们创建的VueProject文件夹 npm下载安装vue-router cnpm install vue-router

最近项目刚完成,手上工作稍微轻松些,准备储备下技术,为未来挑战做好准备. 之前项目用的较多的是angulajs,不过版本较老,还停留在1.5x系,虽然结合了webpack,es2015等前沿技术,但理解并不深入.也做个两个react的项目和一个react-native小东西,都是不懂现查资料,没有系统学习过.三大前端框架就没接触过Vue了,所以打算拿它从小白学起,也顺便写个完整学习心得. 以前学习angularjs是在菜鸟教程学的,看了2天直接上了项目,第一个项目用的还是原始方式,html文件中

大学还没毕业,想着先找工作,感觉计算机专业在老家做没有太大的发展,于是就在大学所在城市找了份工作.来到公司的第一天,带我的师傅让我学习vue.之前完全没有接触过框架,而且专业知识比较薄弱,前几天一直处于懵逼状态.学了几天后,感觉还可以接受,虽然没有做demo,但是感觉理解了一些基础知识.下面我来分享一下我的学习心得. 首先先接触生命周期图,师傅让我记住并理解它.在官方里的介绍,对于我这个计算机小白来说,理解起来简直太难了,于是我上网查了一下,并了解各个钩子的作用,才了解大概内容.create是创

小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-design-vue只是Vue实现的一组ant-design UI模板代码,真正使用的还是VUE环境; 直接引用VUE(直接将代码复制保存成一个html文件即可双击在浏览器中运行):<script src="https://unpkg.com/vue"></script> &

针对之前学习 Vue 用到的 es6 特性,以及接下来进一步学习 Vue 要用到的 es6 特性,做下简单总结. var.let 与 const var 与 let es6 之前,JavaScript 并没有块级作用域,所谓的块,就是大括号里面的语句所组成的代码块,比如 function fire(bool) { if (bool) { var foo = "bar"; } console.log(foo); } fire(true); //=> bar 虽然变量 foo 位于 

vue是前端兴起的一个javascript库,相信大家都使用过jQuery,虽然vue和jQuery没有可比性,但从熟悉的角度去理解新的东西或许会容易接受一些,有时候由于思想和模式的转变会带来阵痛,但领悟到了却会有一种如何至宝的感觉. 简单来说jQuery是操作页面的dom对象,而vue是操作页面的data数据,也就是将原来的操作dom的思想转变到操作数据上来. vue是一个精简的MVVM,是一套构建用户界面的渐进式框架,专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 V

ps:本文并非原著,转载自:https://www.cnblogs.com/buzhiqianduan/p/7620102.html,请悉知 前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都没读一遍(至少),那不建议动手撸码),在大致了解vue是什么东西,有什么用,核心概念之后我们就可以开始着手学习vue.首先搭建环境. 学习vue,我的建议是通

作者:小土豆biubiubiu 博客园:www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e894d 简书:https://www.jianshu.com/u/cb1c3884e6d5 微信公众号:土豆妈的碎碎念(扫码关注,一起吸猫,一起听故事,一起学习前端技术) 码字不易,点赞鼓励哟~ 一.前言 一起学习vue源码的第一篇,本来想起名为双向数据绑定原理,但是想来还是引用书中[深入浅出vue.js]比较专业

作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e894d 简书:https://www.jianshu.com/u/cb1c3884e6d5 微信公众号:土豆妈的碎碎念(扫码关注,一起吸猫,一起听故事,一起学习前端技术) 欢迎大家扫描微信二维码进入群聊讨论(若二维码失效可添加微信JEmbrace拉你进群): 码字不易,点赞鼓励哟~ 温馨提示 本篇文

在文章 源码学习VUE之响应式原理我们大概描述了响应式的实现流程,主要写了observe,dep和wather的简易实现,以及推导思路.但相应代码逻辑并不完善,今天我们再来填之前的一些坑. Observe 之前实现的observe函数只能处理一个对象的单个属性,但我们更多的数据是保存在对象中,为了抽象话,我们也封装一个对象Observe,只要传进一个参数,就可以把这个对象进行监听. 对现有所有属性进行监听 var obj = { a: 1, b: 2 } 比如一个对象有两个属性 a,b.我们可以

系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 手牵手,从零学习Vue源码 系列三(虚拟DOM篇) 陆续更新中... 预计八月中旬更新完毕. 1 前言 作为一名前端开发人员,日常开发使用Vue.js,对于各种Api使用都是只知其然而不知其所以然,不想日复一日的从入门到入门,我们已经都这个岁数了,是时候做出一些改变了! 于是我决定从即日起从GitHub上clone下来一份Vue.js源码来深入研究,本系列将一直更新至博文对Vue源码

系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 陆续更新中... 预计八月中旬更新完毕. 1 概述 Vue最大的特点之一就是数据驱动视图,那么什么是数据驱动视图呢? 其实,我们可以把数据理解为状态,而视图就是用户可直观看到页面.页面不可能是一成不变的,它应该是动态变化的,而它的变化也应该是有迹可寻的,或者是由用户操作引起的,亦或者是由后端数据变化引起的,当状态发生改变时,页面也就应该随之而变化,所以我们就可以得到如下一个公式: U