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>宠物空间…

前端采用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…

搭建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 访问:…

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是一个轻量级的渐进式框架,对于它的一…

登录注册模态框 注: [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…

数据库建表 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…

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

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

一. 基础 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的世界里,库就是一个小套餐,框架就是全家桶 代码上的不同 一般使用库的代码,是调用某个函数,我们自己把控库的代码 一般使用框架,其框架…

一. 历史介绍 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; //…

Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就好.Vue.js基础主要包括,生命周期,数据绑定,过滤器,方法,计算属性,内置指令,组件,自定义指令,Render函数. Vue实例与数据绑定 通过构造函数Vue就可以创建一个Vue的根实例,el挂载DOM对象,data绑定数据,页面文本中通过插值显示data数据,插值方式为{{}}双大括号,如<d…

[NFS项目实战二]NFS共享数据的时时同步推送备份 标签(空格分隔): Linux服务搭建-陈思齐 ---本教学笔记是本人学习和工作生涯中的摘记整理而成,此为初稿(尚有诸多不完善之处),为原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处,作者信息和本声明.否则将追究法律责任.http://www.cnblogs.com/chensiqiqi/ [TOC] 前言 <项目实战>系列为<linux实战教学笔记>第二阶段内容的同步教学配套实战练习,每个项目循序衔接最终将组成&…

Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vue生命周期,从创建,运行,到销毁,称为生命周期. new Vue() : var vm = new Vue({}) 开始创建一个Vue实例对象 init 表示初始化一个Vue空的实例对象,这时候,这个对象上有一些生命周期和默认时间 ajax, vue-resource实现get,post,jsonp…

项目简介: 在Linux环境下用C语言开发的Vsftpd的简化版本,拥有部分Vsftpd功能和相同的FTP协议,系统的主要架构采用多进程模型,每当有一个新的客户连接到达,主进程就会派生出一个ftp服务进程来为客户提供服务.同时每个ftp服务进程配套了nobody进程(内部私有进程),主要是为了做权限提升和控制. 实现功能: 除了基本的文件上传和下载功能,还实现模式选择.断点续传.限制连接数.空闲断开.限速等功能. 用到的技术: socket.I/O复用.进程间通信.HashTable 欢迎技术交…

转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014年2月开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在 GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. 开发初衷 2013年末,我还在Google Creativ…

对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下.   前言 随着移动设备的升级.网络速度的提高,用户对于web应用的要求越来越高,web应用要提供的功能越来越.功能的增加导致的最直观的后果就是资源文件越来越大.为了维护越来越庞大的客户端代码,提出了模块化的概念来组织代码.webpack作为一种模块化打包工具,随着react的流行也越来越流行. 使用 Vue 开发…

5.3 使用现有组件 在之前的五个实验中,我们所演示的基本都是如何构建自定义组件的方法,但在具体开发实践中,并非项目中所有的组件都是需要程序员们自己动手来创建的.毕竟在程序设计领域,"不要重复发明轮子"也是一项理应受到所有程序员遵守的基本原则.换而言之,在亲自动手创建一个组件之前,程序员们理应先确认一下 Vue.js 框架的内置组件库,以及当前流行的第三方组件库中是否已经提供了类似功能的组件.如果有的话,就直接拿来使用即可,不必再去自定义一个功能重复的组件了.遵守这一基本原则不仅可以避…

用vue.js写的一个瀑布流的组件:https://segmentfault.com/a/1190000010741319 https://www.jianshu.com/p/db3cadc03402…

公众号原文 创建数据库 我在上一篇笔记中已经创建了数据库,具体查看<scrapy电影天堂实战(一)创建数据库>,这篇笔记创建scrapy实例,先熟悉下要用到到xpath知识 用到的xpath相关知识 reference: https://germey.gitbooks.io/python3webspider/content/4.1-XPath%E7%9A%84%E4%BD%BF%E7%94%A8.html nodename 选取此节点的所有子节点 / 从当前节点选取直接子节点 // 从当前节点…

当我们的项目足够大,使用的组件就会很多,此时如果一次性加载所有的组件是比较花费时间的.一开始就把所有的组件都加载是没必要的一笔开销,此时可以用异步组件来优化一下. 异步组件简单的说就是只有等到在页面里显示该组件的时候才会从服务器加载,不显式的话就不会加载,这样即可提高客户端的访问速度也可以降低对服务器的请求次数,可谓优化的一个利器. 异步组件常用有3种异步组件的实现:工厂函数.Promise加载和高级异步组件. 注:一般的项目都是在vue-router的路由里面创建vue-router实例时通过…

一.初始化项目 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文…

Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js 之前首先需要搭建 vue.js 的开发环境,下面,我们就来一步一步的搭建 vue.js 的环境: 1.首先,我们需要安装 node.js: 安装 node.js 请参考  node.js安装配置 ,可以打开命令行,输入 node -v,如果输出版本号,说明我们安装 node 环境成功,输入 npm…

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

普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单元格数据的显示格式,我们可以通过作用域插槽自定义数据的显示格式,对于二次开发来说具有很强的扩展性. 作用域插槽使用<template>来定义模板,可以带两个参数,分别是: slot-scope    ;模板里的变量,旧版使用scope属性 slot              ;该作用域插槽的nam…

对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-group组件的props是没有mode属性的,另外多了以下两个props    tag                  标签名    moveClass      新增/移除元素时的过渡    ;如果未指定则默认会拼凑出name+"-move"这个格式的,一般很少用到,比较复杂的动画可以该…

我们定义一个组件的时候,可以在组件的某个节点内预留一个位置,当父组件调用该组件的时候可以指定该位置具体的内容,这就是插槽的用法,子组件模板可以通过slot标签(插槽)规定对应的内容放置在哪里,比如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script s…

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上时,该元素在初次渲染.插入到父节点.更新.解绑时可以执行一些特定的操作(钩子函数() 自定义指令有两种注册方式,一种是全局注册,使用Vue.directive(指令名,配置参数)注册,注册之后所有的Vue实例都可以使用,另一种是局部注册,在创建Vue实例时通过directives属性创建局部指令,局…

v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsde…