vuejs 学习旅程之 vue-resource】的更多相关文章

如上图,所有的数据是从php获取过来的.所以就引出了vuejs 与php通信之说.百度了一下需要使用到一个vue插件 就是今天的主题 vuejs 学习旅程之 vue-resource vue-resource 类似于jquery里面ajax 库. 要达到上面的效果需以下几点: 1.与php通信,获取数据 2.渲染数据 循环遍历items 数组 思路:与php通信就是要使用到vue-resource这个插件 ,获取到数据然后赋值给items ,最后循环遍历items数组. create:方法是进入…
来上海快一年了,一直在东钿金融工作着,这一年来主要负责公司前期的房产评估微信平台,公司IT部也是刚刚成立,成立IT部门不仅仅只是维护房产评估微信,而是要做一个互金理财平台.于是我一年来的主要工作是负责互金理财平台的前端工作,主要分三大块,后台,PC端,移动端(微信端).这些工作在3月份基本已经完成总体开发,进入稳定.根据公司的要求是要有一个app.于是老大就让我学习用vuejs 写一套移动端.所以就引出了今天的主题vuejs学习旅程. 一,首先从简单的开始,花了一天的时间写一个简单菜单隐藏显示的…
前言 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…
点击上方"前端自习课"关注,学习起来~ 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM:但 Vue 项目中仍然存在项目首屏优化.Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能.更好的用户体验.本文是作者通过实际项目的优化实践进行总结而来,希望读者读完本文,有一定的启发思考,从而对自己的项目进行优化…
写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而构建vnode,构建指令,实现virtual dom,然后在这基础之上实现双向绑定等.[vuejs深入二]vue源码解析之一,基础源码结构和htmlParse解析器 今天博主就来详细的实现一个拥有核心功能的htmlParse函数,看看它内部的实现逻辑,了解它是怎么样去解析一个vue模板的. 小目标…
  Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架,这个框架用来做前后端分离的项目,之前我们学习django,知道django是一个MTV模式的web框架,urls--views--templates,模板渲染通过后端的代码来实现数据的渲染,再加上前端一些简单的dom操作来完成网页的开发,当我们做一个复杂的大型的网页的时候,你会发现这种模式作起…
写在开头 2017年,部门项目太多,而且出现了一个现象,即:希望既要有APP,也能够直接扫码使用,也能放到微信公众号里面. 从技术角度来说,APP我们可以选择原生开发,也可以选择ReactNative进行开发.无论是普通扫一扫APP,还是微信里面的扫一扫,直接使用的话,那就需要考虑H5页面.微信公众号,实质上也是一个H5,当然需要调用微信服务的自然离不开微信的jssdk. 那么问题来了,如何提高复用率?答案,可能各位心里也有,那就是H5做页面开发.APP通过webview包皮打包.手机浏览器直接…
VueJs学习笔记 参考资料:https://cn.vuejs.org/ 特效库:TweenJS(补间动画库)  VelocityJS(轻量级JS动画库) Animate.css(CSS预设动画库) 比较其他框架:https://cn.vuejs.org/v2/guide/comparison.html Github:vue2-elm 安装 npm install vue 使用时推荐安装:Vue Devtools 可以方便调试 https://github.com/vuejs/vue-devto…
vuejs学习之 项目打包之后的首屏加载优化 一:使用CDN资源 我们在打包时,会将package.json里,dependencies对象里插件打包起来,我们可以将其中的一些使用cdn的方式加载,例如不想把vue,axios,vuex,vue-router打包到我们项目中,我们需要这样: 1:打开webpack.base.conf.js module.exports = { externals: { 'vue': 'Vue', 'axios': 'axios', 'vuex': 'Vuex',…
Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架,这个框架用来做前后端分离的项目,之前我们学习django,知道django是一个MTV模式的web框架,urls--views--templates,模板渲染通过后端的代码来实现数据的渲染,再加上前端一些简单的dom操作来完成网页的开发,当我们做一个复杂的大型的网页的时候,你会发现这种模式作起来会…
参考:http://www.worktle.com/articles/2467/ 文档&社区 Vue.js官方网站(中文) :http://cn.vuejs.org/ Vue论坛:http://forum.vuejs.org/ vue-router:http://vuejs.github.io/vue-router/zh-cn/index.html 组件库:https://github.com/vuejs/vue/wiki/User-Contributed-Components-&-Too…
vuejs学习网站推荐 https://coligo.io/…
http://cn.vuejs.org/ VUE官网 http://cn.vuejs.org/v2/guide/  教程 VUE模板文件: <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=&qu…
Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 chorme浏览器添加vue扩展程序 七 xxx 八 xxx 一 阶段性项目流程梳理 直接上图吧: 1.首页: 2.免费课程页 还有比如全部里面有个django框架学习,点击进去,具体的信息展示和课程套餐选择等功能 3.登陆页 还有购物车添加成功提示,更新成功提示,当然这些都是前端根据后端的代码逻辑…
  Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(component)的概念 我们在进行vue开发的时候,还记得我们自己创建的vm对象吗,这个vm对象我们称为一个大组件,根组件(页面上叫Root),在一个网页的开发中,根据网页上的功能区域我们又可以细分成其他组件,或称为子组件,看下面的图解: <!DOCTYPE html> &l…
Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 chorme浏览器添加vue扩展程序 七 xxx 八 xxx 一 阶段性项目流程梳理 直接上图吧: 1.首页: 2.免费课程页 还有比如全部里面有个django框架学习,点击进去,具体的信息展示和课程套餐选择等功能 3.登陆页 还有购物车添加成功提示,更新成功提示,当然这些都是前端根据后端的代码逻辑…
vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm install vue-resource --save 在主方法添加 过滤 Vue.http.interceptors.push(function(request, next) {//拦截器 // 跨域携带cookie request.credentials = true; next() }) 以下是针对每个请…
前言 快年底了却有新公司邀请了我,所以打算把上家公司的学到一下技术做一些总结和分享. 现在vuejs都2.0了,我相信也有很多朋友和我一样实际项目还是选择vue1.0的或者给新手一些参考,不管在选择哪个版本的时候,希望你都熟读了vue+vuex+vue-router的官方文档.下面我们就开始吧. Vue搭建 这里我假设我们的电脑都安装了nodejs,那么我现在开始吧. 我们先新建一个文件(VueProject),通过命令行的方式进入这个文件夹,现在假设我们进入了VueProject文件夹,接下来…
好久都没有来这个熟悉而又陌生的地方啦, 想想已经有两三个月了吧,不过我相信以后还是会经常来的啦,因为忙碌的学习已经过去啦,剩下的就是要好好的总结好好的复习了,好好的熟悉下我们之前学习的知识点,将他们有条理的串联起来. 在之前的将近三个月里面,不管是忙碌还是怎么样吧, 也许在有些人看来这是非人的生活,但是内个人都有自己的过法吧,面对自己从未接触过的代码和语法,刚开始确实是有那么一点点的害怕,但是慢慢的就没有那种感觉了,渐渐的也发现其实敲代码并没有那么的可怕,也没有那么的难.经过三个月与代码的磨合我…
写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. vuejs是一个优秀的前端mvvm框架,它的易用性和渐进式的理念可以使每一个前端开发人员感到舒服,感到easy.它内部的实现机制值得让我们深究,比如obServer的实现原理,为什么vue能够实现组件化等等,我们需要理解它内部的运行机制,代码结构,这样才能更深入的理解vue的优秀之处,能更好的贴合业务实际写出更恰当的代码. 说明: 在展开本章之前,博主需要对自己看的源码文件进行一个简短的说明: 博主最终选择首先阅…
之前只是注册了一下微信小程序AppID,随便玩了玩HelloWorld!(项目起手式),但是最近看微信小程序/小游戏,崛起之势不可阻挡.小程序我来了!(果然,一入前端深似海啊啊啊啊啊~) 编辑器: Sublime Text;(官方提供的编辑器实在不敢恭维): 设置默认打开方式:.wxml-->html..wxss-->css; 打开文件后点击右下角的Plain Text,在出现的文件格式中选择open all with current extension as- ->"需要显示…
https://cn.vuejs.org/v2/api/ 官网API https://cn.vuejs.org/v2/guide/ 官网教程 http://www.runoob.com/vue2/vue-tutorial.html 教程 http://www.cnblogs.com/xulei1992/p/6031138.html vue.js慢速入门 http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门 http:/…
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. vue 介绍 <html> <head> <meta charset="utf-8"/> <title>vue 介绍</title> <!-- <script src="js/vue.min.js"…
前言: 到现在用Vue做了不少项目了,用到的都是初阶的功能,很多高阶能力都没有用到.仅用初级阶段也能做项目,甚至是复杂项目,可见vue之强大,果然是渐进式开发方式. 但是本着虚心学习的态度,还是要抽空看看高阶知识,暂且不论何时会用到. 说明:不知道官网的示例代码是用了什么项目构建方式,这里我将示例改写成我本地的构建方式. 我本地是用vue-cli3.0命令构建,默认结构. 代码编辑器:vscode 项目结构如图: 下面开始学习: 混入 1.基础 混入(mixin)提供了一种灵活的方式,来分发Vu…
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过servlet的生命周期servlet 加载--->实例化--->服务--->销毁,对于vue的而言他也有自己的生命周期,那么一起来看看吧! 本章目标 学会并了解vue的生命周期和钩子函数 vue的生命周期和钩子函数 其实在提到vue的生命周期和钩子函数的时候,有的人认为常用的钩子函数有10…
首次写vue可能会出现:[Vue warn]: Cannot find element: #app 这是因为你的js在html页面头部引入的原因,自定义js文件要最后引入,因为要先有元素id,vue才能获取相应的元素. 示例: 1.index.js var app = new Vue({ el : '#app', data: { message: 'Hello Vue.js!' }}) 2.index.html <html> <head> <title>Vuejs<…
(八)传入的数据绑定 先创建一个对象(假如是obj),然后将他传入Vue实例中,作为data属性的值,那么 ①obj的值的变化,将影响Vue实例中的值的变化: ②相反一样: ③可以在Vue实例外面操纵obj,一样对Vue实例有影响: ④获取obj.a的值(假如他有这个属性),可以通过Vue实例(例如变量vm),vm.a这样的形式来获取(他们是等价的,也是绑定的): ⑤后续添加的数值是无效的 例如:   <div id=> {{a}} >+1</button> obj = {a…
属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, i) in list">{{v}}</li> </ul> <script> var vm = new Vue({ el: '#box', // 对应的元素选择器 或者是 指向元素的变量 data: { // data list: [1,2,3] } });…
属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, i) in list">{{v}}</li> </ul> <script> var vm = new Vue({ el: '#box', // 对应的元素选择器 或者是 指向元素的变量 data: { // data list: [1,2,3] } });…