VUEJS+PHP+NODEJS实战
学习笔记666
这个作者很懒,什么都没留下…
展开
-
带着实例继续学习(4):下拉框数据填充、组件生命周期、动态绑定事件
下拉数据填充新建子组件user-area.vue<template> <div class="form-group"> <label class="col-sm-2">地区</label> <div class="col-sm-10"> <select v-model="selectedIndex" class="form-group"原创 2016-10-21 20:31:49 · 799 阅读 · 0 评论 -
Vue.js UI框架 - element
Vue.js UI框架 - element文档:http://element.eleme.io/#/zh-CN/component/installation安装:npm i element-ui -D配置:http://element.eleme.io/#/zh-CN/component/quickstart引入:import ElementUI from 'element-ui';import原创 2016-12-07 16:52:51 · 33919 阅读 · 0 评论 -
ElementUI案例演示:导航、布局、加载动画
知识点1.vue-router之嵌套路由 http://router.vuejs.org/zh-cn/essentials/nested-routes.html 2.element-ui 导航组件、布局组件、加载动画 http://element.eleme.io/#/zh-CN/component/menu http://element.eleme.io/#/zh-CN/componen原创 2016-12-08 14:02:10 · 147390 阅读 · 1 评论 -
ElementUI之表单验证、数据绑定、路由跳转
1.新建表单组件el-form.vue<template> <div class="form"> <el-form ref="form" :model="UserForm" :rules="this.$store.state.userinfo.CheckRules" label-position="left" label-width="180px">原创 2016-12-09 16:35:22 · 64416 阅读 · 1 评论 -
视频电商网站实战 - 构建视频提交页面:视频封面上传(上)
[上节课](http://blog.csdn.net/github_26672553/article/details/54615267 )我们已经初步构建了一个『发布视频』的界面,本节课我们来完善参考Element-UI文档:http://element.eleme.io/#/zh-CN/component/upload 给发布视频组件publish.vue,添加如下模板内容:<el-form-原创 2017-02-07 09:36:40 · 2327 阅读 · 1 评论 -
视频电商网站实战 - 实战准备
1.初始化npm init #cd到项目根目录执行该命令,一路回车#初始化并生成package.json我们可以看一眼此时package.json的内容:{ "name": "videopro", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo原创 2017-01-11 17:11:42 · 1788 阅读 · 0 评论 -
视频电商网站实战 - 开始编写会员中心脚手架代码
这节课开始我们正式进入代码课。首先完成的是导航栏,那么在进入实际数据取数之前,我们要进行整个网站的脚手架代码。譬如编写自己的插件、建立通用函数库调用、API地址的存放等。一个错误上节课,我们运行webpack会提示一个错误:Cannot find module 'vue-template-compiler'这是没有安装,我们安装一下:npm install vue-template-compile原创 2017-01-12 14:35:03 · 1024 阅读 · 0 评论 -
视频电商网站实战 - 逐步完善代码结构、动态加载导航栏
上节课我们做了简单的项目代码结构,这节课我们首先实现导航栏的动态数据加载。同时也要完善我们的代码结构,建立良好的代码机制。1.后端API准备 比如,请求一个地址,返回类似导航栏数据:[{"nav_id":1,"nav_text":"首页","nav_url":"/","nav_order":1,"nav_pid":0},{"nav_id":2,"nav_text":"健身","nav_url":原创 2017-01-17 14:40:34 · 1047 阅读 · 0 评论 -
视频电商网站实战 - 侧边栏菜单、整个后台的布局、路由配置
1.路由 文档:http://router.vuejs.org/zh-cn/ 安装:npm install vue-router --save-dev如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:import VueRouter from 'vue-router';Vue.use(VueRouter);2.编写路由配置文件config/RouterConfi原创 2017-01-19 11:00:37 · 2176 阅读 · 0 评论 -
视频电商网站实战 - 视频上传:标签编辑框效果快速实现
本节我们来完成tag框,输入关键字后回车即可出现标签增加和删除效果。我们可以用一个开源组件:https://github.com/matiastucci/vue-input-tag安装: cd到我们的项目根目录下执行npm install vue-input-tag --save安装完成,我们的node_modules目录中会多一个vue-input-tag目录。然后应用到我们的项目中.来到视频发原创 2017-02-18 15:58:51 · 2266 阅读 · 0 评论 -
视频电商网站实战 - 构建视频提交页面(上)
1.构建视频提交页面,需要一个form表单,我们修改publish.vue视频发布组件:<template> <div> <el-form :model="video" label-width="100px" class="demo-ruleForm"> <el-col :span="12"> <el-form-ite原创 2017-01-19 13:36:08 · 1065 阅读 · 0 评论 -
视频电商网站视频上传准备:vue+七牛JSSDK集成(2)上传视频时显示进度条
前面我们在vue.js里继承了七牛云JSSDK, 完成了『上传文件』的基本。(我们选择了一张图片,瞬间上传到了七牛云上)。1、我们先准备html内容(我们用的是eleme-ui)<div> <el-progress :text-inside="true" :stroke-width="18" :percentage="0"> </el-progress></div>2、vue.js原创 2017-03-08 15:18:13 · 1879 阅读 · 0 评论 -
视频电商网站vue+七牛JSSDK集成(3)上传视频时暂停和续传
1、准备2个图片 2、这是我们用来控制视频上传/暂停 的按钮显示图片。 在vue.js的data() 里准备好变量(切换2个按钮图片的变量)options:{ iconsrc:'/icons/pause.png', uploadpause:'/icons/pause.png', uploadstart:'/icons/start.png'},3、编写切换按钮的事件 在vue原创 2017-03-09 14:43:45 · 3486 阅读 · 0 评论 -
视频电商网站视频上传准备:vue.js+七牛JSSDK集成(1)排坑
七牛云官方jssdk文档: https://developer.qiniu.io/kodo/sdk/javascript plupload第三方上传插件文档: http://chaping.github.io/plupload/doc/# 注意:七牛云jssdk上传功能是基于Plupload插件封装的,所以需要下载Plupload,建议使用 2.1.1 ~ 2.1.9。 如果Pluploa原创 2017-03-07 08:57:26 · 9199 阅读 · 7 评论 -
视频电商网站 - 使用localStorage存储用户信息(一)
localStorage基本要点1、一般支持5M左右的大小(各个浏览器还是有差别) 2、不建议存储太多内容(目前都是字符串存储和读取) 3、关键信息请加密(一般是后台加密,前台可以做保存)浏览器支持度看这里: http://caniuse.com/#search=localStrorage 语法文档看这里: https://developer.mozilla.org/zh-CN/docs/原创 2017-04-10 15:18:00 · 3578 阅读 · 0 评论 -
视频电商网站 - 生成token保存在客户端localStorage中
前面我们已经了解了可以通过localStorage在客户端(浏览器)保存数据。回顾token框架中的RESTful api快速领悟(中):token认证 框架中的RESTful api快速领悟(下):token的设置我们后端有这样一个接口:http://localhost/yiiserver/web/index.php/token?client_appid=aaa&client_appkey=bb原创 2017-04-11 11:52:15 · 9116 阅读 · 0 评论 -
视频电商网站 - 用户登录部分优化
前面我们已经实现了用户登录 http://blog.csdn.net/github_26672553/article/details/70048077我们先把这个『用户登录功能部分』优化一下,比如:登录成功之后跳转到会员中心。1、给用户登录方法多加一个参数,作为登录成功之后的回调函数原方法:userLogin(context,{user_name,user_pass})多加一个参数:userLog原创 2017-04-11 15:16:28 · 1074 阅读 · 3 评论 -
Vuex速学篇:(3)利用vuex模拟实现新闻点赞功能
回顾新闻详细页很早我们的新闻详情页是在news-detail.vue 组件里,获取服务器数据,然后把数据保持到组件的data 里,既然我们已经用到了vuex,学习了它的state,我们就应该想到把返回的数据交给state 来存储。1.首先在Vuex.Store 实例化的时候: state:{ user_name:"", newslist:[],原创 2016-11-22 10:32:24 · 6636 阅读 · 2 评论 -
Vuex速学篇:(3)利用vuex模拟实现新闻点赞功能
回顾新闻详细页很早我们的新闻详情页是在news-detail.vue 组件里,获取服务器数据,然后把数据保持到组件的data 里,既然我们已经用到了vuex,学习了它的state,我们就应该想到把返回的数据交给state 来存储。1.首先在Vuex.Store 实例化的时候: state:{ user_name:"", newslist:[],原创 2016-11-22 10:31:57 · 2310 阅读 · 1 评论 -
带着实例继续学习(5):模拟搜索框动态提示效果之计算属性
第一步,先撸一个子组件user-favs.vue <div class="form-group"> <label class="col-sm-2 control-label">爱好</label> <div class="col-sm-10"> <input type="text" class="form-control" v-model原创 2016-10-21 21:37:38 · 685 阅读 · 0 评论 -
路由学习(3):组件的异步加载
文档资料: https://vuefe.cn/guide/components.html#异步组件1、前面我们都是这样引入组件的import userlogin from "./../components/user-login.vue";现在我们改为这样://import userlogin from "./../components/user-login.vue";const userlogi原创 2016-11-03 11:25:06 · 2125 阅读 · 0 评论 -
结合nodejs+webpack+vuejs开启时尚学习套路
官方手册:http://cn.vuejs.org http://vuejs.org/guide/开始吧 1.新建一个目录vuepro 2.初始化。 在命令行下cd到该目录下,执行:$ npm init之后可以一路回车,在最后输入”yes”后会生成package.json文件 3.$ npm install vue webpack babel-cli babel-loader babel原创 2016-10-12 21:41:10 · 37840 阅读 · 15 评论 -
直接上手组件化开发:寻求"刺激"的”学习方法
在前面已经简单了解了Vue里的模板渲染<div id="me">我的名字是张三</div>加入上面这部分在其他地方也有,我们可以封装为”组件”比如这样myanme 就是一个组件 <div class="container"> <myname></myname> </div>3.来看看js中是怎么写的?import Vue from "vue";// 定义组件le原创 2016-10-13 20:28:09 · 2242 阅读 · 9 评论 -
vue.js 2.0父子组件学习入门套路
前面已经了解过vue的组件化开发了,现在来了解一下父子组件。先来2个子组件 myname.vue 内容如下:<template> <div id="myname">我的名字是{{name}}</div></template><script> export default{ props: ["name"] }</script>有个属性namemyage原创 2016-10-14 20:36:05 · 14271 阅读 · 3 评论 -
自己写个vue.js插件(1):自定义指令的妙用
写个插件文档:https://vuefe.cn/guide/plugins.html1.在components 目录下新建一个validate.js:export default{ install(Vue){ Vue.prototype.$myName = "zhagngsan"; }}这就是我们的插件,定义了一个属性2.入口文件jssrc/index.js 加入:原创 2016-11-05 18:43:35 · 24912 阅读 · 1 评论 -
带着实例继续学习(1):组件式登录页面-点击事件、组件通讯
本节课要点我们利用之前学到的知识点做一个用户登录框,其中 1.为了界面不至于太恶心,我们引入bootstrap样式 2.我们故意把登录界面要素比如用户名、密码和提交按钮分成3个组件(仅仅是为了学习,增加难度)一、引入bootstrap 新建目录css和fonts,放入对应的文件。安装相应的webpack插件为了正确的加载bootstrap中的样式和字体,我们需要安装 npm install原创 2016-10-18 21:07:21 · 1497 阅读 · 2 评论 -
带着实例继续学习(2):父子组件通信之自定义事件
要点我们利用之前学到的知识点做了一个用户登录框,其中 1、我们通过this.$parent.$refs 访问相邻组件的数据 2、一般来讲,我们可以把父组件作为子组件的”集中营”(集中数据状态和事件)接下来我们看套路:第一步:父组件初始化数据在父组件首先初始化,示例如下: export default{ data(){ return{username:”“,u原创 2016-10-19 19:58:23 · 1169 阅读 · 1 评论 -
自己写个vue.js插件(2):手动挂载子组件
前面我们使用原始的方法写了一个验证插件 1、学会了插件的创建的方式 2、学会了自定义指令 3、通过自定义指令返回true或false,来控制外部label的显示和隐藏 (注意:外部的label是我们预先写好的)下面我们使用自动插入label 手动挂载插件:https://vuefe.cn/api/#Vue-extend动手写代码1、先移除user-name.vue 里显示错误的label,原创 2016-11-10 11:20:37 · 6747 阅读 · 1 评论 -
vuejs路由学习(1)
准备工作1、先准备一个bootstrap的导航栏 http://v3.bootcss.com/components/#navbar 封装成一个叫做page-nav的组件,在index.js中加入导航栏的组件加载2、做一个很简单的新闻组件,并在index.js中加载<template> <div class="news-list"> <div class="row">原创 2016-10-30 19:54:54 · 4335 阅读 · 0 评论 -
ajax请求插件vue-resource的学习
http://cn.vuejs.org/guide/plugins.htmlajax请求插件vue-resource的学习https://github.com/vuejs/vue-resource/blob/master/README.md1、安装npm install vue-resource2、使用import VueResource from 'vue-resource';Vue.use(V原创 2016-10-30 20:34:30 · 31461 阅读 · 0 评论 -
路由学习(2):动态加载新闻详细页
需要实现:点击列表页,进入新闻详细页。 1、news-list.vue的变化:<h2><router-link :to="{name:'newsdetail',params:{newsid:news.newsid}}"> {{news.title}} </router-link><small>{{news.pubtime}}</small></h2><p>{{news.desc}}</p> 我原创 2016-10-31 22:37:35 · 1294 阅读 · 0 评论 -
自己写个vue.js插件(3):插件里面包含子组件
前面我们把文本框验证的错误提示部分封装到了validate.js 插件中。 还不够彻底,我们应该把文本框也封装尽量,弄成子组件的形式。1.这是用户名文本框,原本是在user-name.vue 组件中的input type="text" v-uname="username" v-model="username" v-on:change="userNameChange" class="form-con原创 2016-11-12 16:36:21 · 2283 阅读 · 0 评论 -
Vuex速学篇:(4)把我们的业务按模块分类
文档:http://vuex.vuejs.org/zh-cn/modules.html这个modules是用来干什么的? 前面我们做了一个这样的界面,有登录,有热点新闻。 我们学到了vuex这样一个框架。 我们可以看到state里,我们把user_name和新闻是糅合在一起的,如果我们这个项目的多人协作开发,这样就不是很方便。 所以modules就起到了这样一个作用。我们来演示一下怎原创 2016-11-29 10:45:38 · 12271 阅读 · 4 评论 -
Vuex速学篇:(1)基本套路
我们前面做了一个这样的页面,为了增加我们的学习难度,我们特意拆分成了不同的组件。 我们知道,我们在子组件里并不能直接对兄弟组件里的属性进行操作,我们通过this.$emit() 调用父组件的方法,通过this.$parent.$data.username 获取兄弟组件里的属性。 但是如果我们的业务越来越复杂,组件越来越多,会造成我们的整个项目维护起来非常的困难。能不能把各个组件的逻辑,数据源和方原创 2016-11-15 20:29:55 · 75909 阅读 · 19 评论 -
Vuex速学篇:(2)利用state保存新闻数据
回顾以前我们在做这个新闻列表的时候,是一个写死的数据 export default{ data(){ return{ newslist:[ {newsid:"101",pubtime:"2016-10-29",title:"探索之路",desc:"是手机团队的探索之路"},原创 2016-11-21 21:48:09 · 16014 阅读 · 0 评论 -
视频电商网站 - vuex多个module交互
我们的项目使用了Vuex,关于Vuex是什么看这里: http://vuex.vuejs.org/zh-cn/intro.htmlVuex里有个Modules的概念: http://vuex.vuejs.org/zh-cn/modules.html我们前面用户登录获取access_token等信息,都是写在UsersModule.js这个module中的。 http://blog.csdn.n原创 2017-05-02 16:50:33 · 4647 阅读 · 0 评论