vue2.0 仿手机新闻站（五）全局的 loading 组件

vue2.0 仿手机新闻站（一）项目开发流程

vue仿手机新闻站: 1.拿到静态页面,直接用vue边布局,边写 2.假数据没有用任何UI组件,切图完成做项目基本流程: 1.规划组件结构 Nav.vue Header.vue Home.vue ... 2.编写对应路由 vue-router 3.具体写每一个组件功能建议:一些公共文件 jquery,jquery插件,一般在index.html文件里面引入 main.js require() / import vue init webpack-simple news 项目需要的模块: vu…

vue2.0 仿手机新闻站（五）全局的 loading 组件

1.组件结构 index.js const LoadingComponent = require('./Loading.vue') const loading = { install: function(Vue) { Vue.component('loading', LoadingComponent) } } module.exports = loading; Loading.vue <template> <div class="zns-loading"> &l…

vue2.0 仿手机新闻站（七）过滤器、动画效果

1.全局过滤器 (1)normalTime.js 自定义将时间戳转换成日期格式过滤器 /** * 将时间戳转换成日期格式 */ export const normalTime = (time) => { if(time){ var oDate = new Date(); oDate.setTime(time); var y = oDate.getFullYear(); var m = oDate.getMonth() + 1; var d = oDate.getDate();…

vue2.0 仿手机新闻站（四）axios

1.axios的配置 main.js import Vue from 'vue' import App from './App.vue' // 引入路由 import VueRouter from 'vue-router' // 引入路由配置文件 import routes from './router.config' // 引入 vuex入口文件 import store from './store/index' // 引入 axios import axios from 'axios'…

vue2.0 仿手机新闻站（二）项目结构搭建及路由配置

1.项目结构 $ vue init webpack-simple news $ npm install vuex vue-router axios style-loader css-loader -D 2.main.js import Vue from 'vue' import App from './App.vue' // 引入路由 import VueRouter from 'vue-router' // 引入路由配置文件 import routes from './router.con…

vue2.0 仿手机新闻站（六）详情页制作

1.结构 2.配置详情页路由 router.config.js /** * 配置路由 */ // 导入组件 import Home from './components/Home.vue' import Follow from './components/Follow.vue' import Column from './components/Column.vue' import UserInfo from './components/UserInfo.vue' import Article…

vue2.0 仿手机新闻站（三）通过 vuex 进行状态管理

1.创建 store 结构 2.main.js 引入 vuex 3. App.vue 组件使用 vuex <template> <div id="app"> <loading v-show="loading"></loading> <NavView v-show="headerShow"></NavView> <router-view></router-…

项目vue2.0仿外卖APP（五）

header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁.另外,vue-resource还提供了非常有用的inteceptor功能,使用inteceptor可以在请求前和请求后附加一些行为…

Vue2.0仿饿了么webapp单页面应用

Vue2.0仿饿了么webapp单页面应用声明: 代码源于黄轶老师在慕课网上的教学视频,我自己用vue2.0重写了该项目,喜欢的同学可以去支持老师的课程:http://coding.imooc.com/class/74.html 源代码地址:https://github.com/ColinScales/shell 演示地址:https://colinscales.github.io/scale 手机扫码查看效果: ## 技术栈:vue-cli webpack axios vue…

Vue2.0 【第二季】第7节 Component 组件 props 属性设置

目录 Vue2.0 [第二季]第7节 Component 组件 props 属性设置第7节 Component 组件 props 属性设置一.定义属性并获取属性值二.属性中带' - '的处理方式三.在构造器里向组件中传值 Vue2.0 [第二季]第7节 Component 组件 props 属性设置第7节 Component 组件 props 属性设置 props选项就是设置和获取标签上的属性值的,例如我们有一个自定义的组件,这时我们想给他加个标签属性写成意思就是熊猫来自中国,当然这…

项目vue2.0仿外卖APP（六）

goods 商品列表页开发布局编写除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可以上下滚动. good.vue: 为了兼容性问题呢,设置flex之后还设置了宽度,使得在不兼容flex的浏览器也能有80px的宽: 外壳就是这样了: 开始填内容了同样的,我们还是利用vue-resource这个技术去拿到数据,获取goods数据: goods需要用data去绑定,因为后面需要用到g…

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础：JS面向对象&字面量& this字

缘起书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的几个阶段,而且也说到了Vue系列需要讲到的知识点,今天就正式开始Code,当然今天的代码都特别简单,希望大家慢慢的学习,今天主要讲的是JS高级——关于面向对象的语法. 磨刀不误砍柴工,当然,我在写这篇之前,或者是写Vue之前,都在考虑要从何处入手,怎么写,因为大家肯定有一部分是全栈工程师,都很懂,那我写的您就…

项目vue2.0仿外卖APP（四）

组件拆分先把项目搭建时生成的代码给清了吧现在static目录下引入reset.css 接着在index.html引入,并且设置<meta> 有时候呢,为了让代码符合我们平时的编码习惯,我们可以在ESLint进行设置,如下: 回到入口js文件main.js,为了好看,我们给它加上分号: 不过这是就会报错了: 所以要到eslintrc.js去设置(上面对应可以去官网查看怎么配置),使它接受这样的编码方式. 现在的App.vue如下: 然后我们编写组件来替换那三个区块. 创建header组件将…

vue2.0：（四）、首页入门，组件拆分1

为什么需要组件拆分呢?这样才能更符合模块化这样一个理念. 首先是index.html,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1…

项目vue2.0仿外卖APP（二）

vue-cli开启vue.js项目 github地址:https://github.com/vuejs/vue-cli Vue.js开发利器vue-cli,是vue的脚手架工具. 在工地上,脚手架是工人搭建好的架子,能够帮助工人们作业:在技术圈,脚手架就是来帮助我们编写好基础的代码的工具.Vue-cli就是帮助我们写好vue.js基础代码的工具. 使用Vue.js,当你构建一个原型的时候,你所需要做的通常就是通过 <script> 把Vue.js引入进来,然后就完事了.但是真实情况往往不是这样…

项目vue2.0仿外卖APP（一）

最近用vue.js做一个仿饿了么外卖APP的项目,现在也把流程啊什么的暂时先整理一下在这个博客上面. 当然,这个过程会有点长,不过确实能学到很多东西. 话不多说,马上开始吧. 1.项目介绍选用当前最火的MVVM框架作为这个项目的技术栈 MVVM架构: View和model通过viewModel来通信,但数据发生变化,viewmodel能够观察到这种数据的变化,然后通知到对应的视图做自动更新:当用户操作view视图,viewModel也能监听到视图的变化,然后通知数据做改动,实现了数据的双向绑定…

vue2.0仿今日头条开源项目

vue-toutiao 这是用 vue.js 2.0 高仿今日头条的移动端项目,结合了原生app的部分功能以及网页版. 前言本人是今日头条的重度用户,在学习vue.js过程中,在GitHub上看到了很多高仿webapp的好项目.由此在有了一定的技术积累后,开始构思使用Vue写今日头条,一是自己对于头条的喜爱,另外也是对于自己学习成果的检验. 技术栈 vue.js 2.0全家桶(vue.vuex.vue-router) axios.jsonp element-ui.iview vue-l…

项目vue2.0仿外卖APP（七）

ratings评价列表页实现在ratings.vue组件里开发首先先引入seller数据: 书写模板结构: 由于评价页又有之前写过的star.vue组件,所以又要在ratings.vue组件引入: import star from 'components/star/star'; 并且注册: components: { star } 这部分的模板: <template> <div class="ratings"> <div class="rat…

本地运行github上的vue2.0仿饿了么webapp项目

在vue刚刚开始流行的时候,大多数人学习大概都见到过这样的一个项目吧,可以作为学习此框架的一个模板了 github源码地址:https://github.com/RegToss/Vue-SPA 课程教程:http://coding.imooc.com/class/74.html 首先搭建好vue的运行环境 1:安装node 端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/e…

项目vue2.0仿外卖APP（三）

项目的结构如下: 项目资源准备准备项目的各种图片资源等等注意:在webpack可以不用css sprite,直接用单张图片,因为它会帮忙打包. 还有SVG图片,放大之后不会影响质量,在移动端开发中,通常会把色彩单一的图片做成SVG图片.这些不是直接用,利用一些工具去把这些SVG图片去转化成一个叫图标字体的文件,就可以在CSS引用了. 图标字体制作在项目开发前期,我们需要将设计师给的一些图片制作成字体图标用一个叫IcoMoon的工具(https://ic…

vue2.0：（十）、外卖App商品组件部分和better-scroll

本篇中继续来给大家介绍外卖App制作中的商品组件的部分. 好,第一步,我们把商品的大致框架在goods.vue中搭建出来: menu-wrapper是左边菜单栏,foods-wrapper是右边商品栏. 第二步,我们需要取到我们需要的数据. 可能有人这时候会有一点疑问,因为他们记得header里面的seller是这么取得: 那我们现在来看一下data.json: 一个是json 一个是数组,所以,如上述代码可取出我们所需要的goods. 第三步,写侧边栏menu-wrapper,并填入数…

vue2.0 自定义生成二维码（QRCode）组件

1.自定义生成二维码组件 QRCode.vue  <template> <canvas class="qrcode-canvas" :class="{show: show}" :style="{height: size + 'px', width: size + 'px'}" :height="size" :width="size" ref=…

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础：ES6初体验 & 模块化编程

缘起昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很感兴趣,嗯~~这一块确实挺枯燥的,不能直接拿来代码跑一下那种,不过还是得说下去,继续加油吧!如果大家对昨天的小demo练习的话,相信现在已经对JS的面向对象写法很熟悉了,如果嵌套字面量定义函数,如何使用this关键字指向.今天呢,主要说一下ES6中的一些特性技巧,然后简单说一下模块化的问题,好啦,开始今天的讲…

Vue2.0

Vue 1.0到2.0的变化: 1.在每个组件的模板中,不再支持片段代码组件中的模板: 之前: <template> <h3我是组件<strong>我是加粗模板</strong></h3> </template> 现在:必须有根元素包裹住所有代码 2.关于组件定义 Vue.extend 这种方式,在2.0里有一些改动,这种写法即使能用也不用 Vue.component(组件名称,{ data(){}, methods:{}, templa…

VUE2.0不可忽视的很多变化

今天使用webpack-sample初始一个vue-cli项目,在app.vue文件中添加了个钩子函数ready,可是ready内的事件一直不执行,检查了webpack文件和package.json也没发现什么问题,浏览器也没报错或者提示,很令人捉急.然后去github看了webpack-simple源码,才发现原来vue init webpack-simple默认安装的vue是2.0版本.马上推测到是不是因为vue2.0废弃了ready的用法,果然不出所料,我真是太机智了.看了下vue2.0的…

vue2.0学习教程

十分钟上手-搭建vue开发环境(新手教程)https://www.jianshu.com/p/0c6678671635 如何在本地运行查看github上的开源项目https://www.jianshu.com/p/365d1a114e2a 手把手教你用vue-cli构建一个简单的路由应用https://www.jianshu.com/p/2003155cd717 如何运行vue项目(维护他人的项目)https://www.jianshu.com/p/672c9e59ac38 如何在手机上查看测试…