一.初始化项目 1.下载模板 进入github中https://github.com/tastejs/todomvc-app-template,并且在命令行将其clone下来 git clone https://github.com/tastejs/todomvc-app-template.git 2.安装依赖 进入项目目录中安装依赖 npm install 3.引入vue.js文件 首先在命令行中安装vue npm install vue 然后再index.html中引入 然后再app.js文…

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由蔡述雄发表于云+社区专栏 需求背景 组件库是做UI和前端日常需求中经常用到的,把一个按钮,导航,列表之类的元素封装起来,方便日常使用,调用方法只需直接写上或者这样的代码就可以,是不是很方便呢,接下来我们将要完成以下页面: 这是我们组件库的首页,包含三个子页面,按钮页面.列表页面.导航页面:点击进去子页面会由路由来配置.先看我们的目录结构: pages目录存放我们的页面,包括首页和三个子页面:components目录存放我们的具体组…

axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,params) .then(function(res){ console.log(res); alert(res.data); }) .catch(function(err){ console.log(err); }) 4. vue2.0 子组件和父组件之间的传值 Vue是一个轻量级的渐进式框架,对于它的一…

搭建koa2服务端 安装两个版本的koa 一.版本安装 1.安装 koa1 npm install koa -g 注:必须安装到全局 2.安装 koa2 npm install koa@2 -g 二.创建项目 1.安装 koa 生成器 (koa1 和 koa2 都用此生成器) npm install koa-generator -g 2. koa1 生成一个 test 项目,切到 test 目录并下载依赖 koa test cd test npm install 运行:npm start 访问:…

前端采用vuex+element-ui: 后端采用koa2+restfulAPI+sequlize: (一)项目介绍 宠物社区 1.社区 2.好友 3.说说 4.宠粮 5.健康 (二)项目框架 1.Vue.js 2.Vuex 框架 3.Element UI 4.Axios 交互 5.Koa2 + es6 6.Restful API 7.Sequlize 8.mysql (三)创建项目和elementUI配置 vue init webpack pet elementui 1.安装: npm ins…

一. vue补充 1. 获取DOM元素 救命稻草,document.querySelector 在template中标示元素`ref = "xxx" 在要获取的时候,this.$refs.xxx获取元素 创建组件,装载DOM,用户点击按钮 ref 在DOM上获取的是原生DOM对象 ref在组件上获取的是组件对象 $el是拿其DOM 这个对象就相当于我们平时玩的this,也可以直接调用函数 总结: $属性:$refs获取组件内的元素 $parent:获取当前组件对象的父组件 $child…

一. 基础 1. 注册全局组件 应用场景:多出使用的公共性能组件,就可以注册成全局组件,减少冗余代码 全局APIVue.component('组件名','组件对象') 2.附加功能:过滤器&监视改动 filter || filters 全局过滤器(给数据添油加醋显示):Vue.filter('过滤器名',过滤器方式fn) 组件内过滤器filters:{'过滤器名',过滤器方式fn} 将数据进行添油加醋的操作 过滤器分为两种 1.组件内的过滤器(组件内有效) 2.全局过滤器(所有组件共享) 先注册…

一. vue基础 1. 历史介绍 angular 09年,年份较早,一开始大家是拒绝的 react 2013年,用户体验较好,直接拉到一堆粉丝 vue 2014年,用户体验较好 前端框架与库的区别 jquery库->DOM(操作DOM)+请求 art-template 库->模板引擎 框架 = 全方位功能齐全 简易的DOM体验+发请求+模板引擎+路由功能 KFC的世界里,库就是一个小套餐,框架就是全家桶 代码上的不同 一般使用库的代码,是调用某个函数,我们自己把控库的代码 一般使用框架,其框架…

登录注册模态框 注: [Vue warn]: Do not use built-in or reserved HTML elements as component id: diaLog 原因:diaLog 组件名 与 HTML元素名称 重复,将 组件名 改为 diaLoger 即可. 1.封装 可复用 DiaLog 组件 DiaLog.vue <template> <el-dialog title="提示" :visible.sync="dialogVisi…

elementUI界面布局 1.创建 HeadBar 组件 HeadBar.vue <template> <el-row> <el-col :span="2"> </el-col> <el-col :span="4" style='background:#f9fafc;font-size:2em;'><i class="el-icon-menu"></i>宠物空间…

一. 历史介绍 1. 规范 AMD Commonjs||CMD UMD 参考:认识AMD.CMD.UMD.CommonJS 2. 工具 npm bower webpack browserify 参考:bower 和 npm 的区别详细介绍npm.cnpm.bower安装区别gulp/grunt和browserify/webpack的区别 二. webpack打包模块源码 1. 把所有模块的代码放入到函数中,用一个数组保存起来 2. 根据require时传入的数组索引,能知道需要那一段代码 3.…

一. axios 1. 基本使用 axios.method('url',[,...data],options) .then(function(res){ }) .catch(function(err){ }) 2. 合并请求 this.$axios.all([请求1,请求2]) .then(this.$axios.spread(function(res1,res2){ }) ) 3. 取消请求 API 3步骤: const cancelToken = axios.CancelToken; //…

数据库建表 1.打开 MySQL 终端 2.查看所有数据库 show databases 3.创建数据库 create database pet 4.进入数据库 use pet 5.创建数据表 create table users( id bigint not null auto_increment primary key, email varchar(60) not null, pwd varchar(60) not null, nicheng varchar(60) not null, up…

继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜值,打算走心派.结合了后台nodejs,以及数据库MongoDB来开发了一个实时聊天系统.这个系统可以说是一统江山,也算是实现前端程序员的一个梦了,前后通吃.自认为是一个比全的项目.项目地址:https://github.com/hua1995116/webchat 觉得好的请顺手来个star. 技…

原项目地址:[ vue+websocket+express+mongodb实战项目(实时聊天)(一)][http://blog.csdn.net/blueblueskyhua/article/details/70807847](http://blog.csdn.net/blueblueskyhua/article/details/70807847) github地址: https://github.com/hua1995116/webchat 在线演示地址:http://www.qiufengh…

地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么把数据展示出来,用到的资源主要是element-ui和vue-resource,其它参考(vue-resource插件使用).今天讲到的一些功能开发,主要就是请求列表数据,详情数据,分页功能操作,搜索,搜索标签等的开发.今天这个,按照下面步骤,一步一步来.一个一个功能的做! 2.数据接口 我以'回款…

vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json "scripts": { "dev": "node build/dev-server.js", //npm run dev ,执行这里 "build": "node build/build.js" }, build文件下…

web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程    web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 1.drf前期准备 1.django-rest-framework官方文档 https://www.django-rest-framework.org/ #直接百度找到的djangorestframework的官网是打不开的 2.安装依赖包 如图所示,django restframework的依赖模…

新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚垫菜盘之良器,欢迎大家无情购买使用,欢迎大家共同学习交流,欢迎大家提出改进意见. 内容简介: 本书从项目实践出发,手把手.心贴心地带领读者从零开始,一步一步地开发出功能相对完整的权限管理系统,从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术. 全书分为三…

web前端Vue+Django rest framework 框架 生鲜电商项目实战  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看的时候可以关注下面几点: 1.为了追求精简简洁牺牲了部分实用性,导致不足以达到某些工作的需要2.大部分是实战课程弱化了其他技术点的不足,无法全面了解python,但是很多都是刚接触python的(很致命)3.因为是录播课程导致某些问题不能及时去解决,没人交…

本篇文章主要介绍了vue的环境配置,vue项目的目录结构以及在开发vue项目中问题的一些解决方案. 环境配置及目录结构 1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,回车,等待安装...3.安装全局vue-cli…

马上过年了,最近工作不太忙,再加上本人最近比较懒,毫无斗志,不愿学习新东西,或许是要过年的缘故(感觉像是在找接口). 就把前一段时间做过的vue项目,进行一次完整的总结. 这次算是详细总结,会从项目的搭建,一直到最后的服务器上部署. 废话不多说了.干货直接上. 一.   必须node环境,   这次就不写node环境的安装了.过两天我会写个node环境的安装随笔. 二.  node环境配好后.开整vue. 1. 安装vue脚手架. npm install -g vue-cli 2.  用脚手架搭…

环境搭建 安装NodeJS →箭头https://nodejs.org/en/ NPM是随同NodeJS一起安装的包管理工具. 检查环境是否安装成功: 打开一个命令提示符,有成功输出版本号则为安装成功. //检查node 版本号 node -v //检查npm版本号 npm -v 安装vue npm install vue -gnpm install -g @vue/cli 新建项目 vue create vuedemo 选择第一个就是默认配置了babel 跟eslint 一般选择第二个 选择相…

首先上一下完成后的效果: 首页: 商品详情页: 购物车页(其实还有个订单页,只是和购物车页基本类似,所以就不截图啦): 开始项目: 由于涉及的是前后端分离,所以我们的后台数据就模拟存储于浏览器端(config/config.js里面): 当然在这之前你需要使用Vue CLI构建项目(),然后才可以进行下去,还有我们这各项目里面用了Font Awesome图标库 来使我们的项目的图标更加酷炫.读者可以使用cnpm install font-awesome --save-dev安装,具体的Font…

这节主要讲解真正项目用用到的 webpack配置问题,项目实战篇 就像我们不会完全做一个项目,不用别人的轮子一样.这个配置我们借用 vue-cli 搭建的配置来研究,因为它已经足够优秀. 有了前面的基础,这节快速切入主题. 文章目录 1. 用 vue-cli脚手架 初始化项目 2. 学习分析vue-cli的配置 2.1. 目录结构 2.2. config目录 2.3. build目录,webpack配置精华 2.3.1. webpack.base.conf.js 2.3.2. webpack.d…

为什么使用 Angular 我不是 Angular 的布道者,但如今痴迷 Angular,使用 Angular 做项目让我有一种兴奋感.目前的三大主流前端框架都研究过,博客中也有三者的相关教程,最早接触的是 React,但是并没有实际的项目经验,只做过一些 Demo .使用 Vue 做过一个比较复杂的移动端大数据项目,技术栈采用 Framework7 + Vue + Vuex,整体效果还是满意的. 因为去年的项目几乎都是后台管理系统,所以框架用的不多,主要还是传统方式开发,后期为了改善前端开发体…

制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开的api来做项目.不过本章节不涉及调用接口等内容.这里,我们假设我们的项目是做俩页面,一个列表页面,一个内容页面.列表页面有分页等,内容页面展示. 因此,我们需要两个模板文件. 我们在src/page目录下面新建两个文件,分别是index.vue和content.vue index.vue代码: <…

通过上一篇博文<Vue2+VueRouter2+webpack 构建项目实战(一):准备工作>,我们已经新建好了一个基于vue+webpack的项目.本篇文章详细介绍下项目的结构. 项目目录以及文件结构 如图所示: 如上图所示,自动构建的vue项目的结构就是这样. 目录/文件 说明 build 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管. config 配置目录,默认配置没有问题,所以我们也不用管 node_modules 项目开发依赖的一些模块 src 开发目录(…

铭文一级: DataV功能说明1)点击量分省排名/运营商访问占比 Spark SQL项目实战课程: 通过IP就能解析到省份.城市.运营商 2)浏览器访问占比/操作系统占比 Hadoop项目:userAgent DataV访问的数据库(MySQL),需要能够在公网上访问 DataV测试数据CREATE TABLE course_click_count(ID int(4) PRIMARY KEY,day VARCHAR(10),course_id VARCHAR(10),click_count lo…

Vue 入门之 Vuex 实战 引言 Vue 组件化做的确实非常彻底,它独有的 vue 单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其 Vue 组件设计的就是,父组件通过子组件的 prop 进行传递数据,而且数据传递是单向的.也就是说:父组件可以把数据传递给子组件,但是 反之则不同.如下图所示: 单向数据流动 单方向的数据流动带来了非常简洁和清晰的数据流,纯展示性或者独立性较强的模块的开发确实非常方便和省事. 但是复杂的页面逻辑,组件之间的数据共享处理…