vue学习第一天 ------ 临时笔记
学习链接
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述
http://blog.csdn.net/fungleo/article/details/77575077 Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目
http://blog.csdn.net/fungleo/article/details/77584701 Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件
http://blog.csdn.net/FungLeo/article/details/77585205
1.前后端分离开发模式
设计师设计页面设计稿
前端工程师和后端工程师以及其他技术人员约定项目开发接口规范
后端工程师按照约定接口规范开发相应接口
前端工程师开发页面,并对接后端接口(可能先期采用假接口)开发页面
2.SPA:single page web application( 单页应用程序 或 单页Web应用)
url 由以下部分组成: http:// 规定了页面采用的协议。
www.fengcms.com 为页面所属的域名。
index.html 为读取的文件名称。
?name=fungleo&old= 给页面通过 GET 方式传送的参数
#mylove/is/world/peace 为页面的锚点区域 前面四个发生改变的时候,会触发浏览器的跳转亦或是刷新行为,而更改 url 中的锚点,并不会出现这种行为,
因此,几乎所有的 spa 应用都是利用锚点的这个特性来实现路由的转换。 所谓的路由地址是在 # 号后面的,也就是利用了锚点的特性。
3.RESTful 风格接口
前后端在约定接口 目前 github 也在主推 GraphQL 这种新的接口风格,但目前国内来说还是 RESTful 接口风格比较普遍。虽然它有一些缺陷
大多数操作都是对数据库的四格操作 “增删改查” 对应到我们的接口操作分别是: post 插入新数据
delete 删除数据
put 修改数据
get 查询数据
假设,我们的接口是 /api/v1/love 这样的接口,采用 RESTful 接口风格对应操作是如下的: get 操作 /api/v1/love 获取 /api/v1/love 的分页列表数据,得到的主体,将是一个数组,我们可以用数据来遍历循环列表 post 操作 /api/v1/love 我们会往 /api/v1/love 插入一条新的数据,我们插入的数据,将是JOSN利用对象传输的。 get 操作 /api/v1/love/ 我们获取到一个 ID 为 的的数据,数据一般为一个对象,里面包含了 的各项字段信息。 put 操作 /api/v1/love/ 我们向接口提交了一个新的信息,来修改 ID 为 的这条信息 delete 操作 /api/v1/love/ 我们向接口请求,删除 ID 为 的这一条数据 由上述例子可知,我们实现了5种操作,但只用了两个接口地址, /api/v1/love 和 /api/v1/love/ 。所以,采用这种接口风格,可以大幅的简化我们的接口设计。
4.vue 是什么
官方解释:
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
大牛解释:
为了实现前后端分离的开发理念,开发前端 SPA 项目,实现数据绑定,路由配置,项目编译打包等一系列工作的技术框架
vue
不仅仅是 vue.js
这一个文件,而是围绕 vue.js
配套的一系列的工具。
vue.js 核心,不解释。
VueRouter2 实现路由组织工具。
webpack 项目打包以及编译工具。
nodejs 前端开发环境。
npm 前端包管理器。
axios ajax 接口请求工具。
sass-loader 和 node-sass css 预处理。
element 基于 vue 的后台组件库。
iview 基于 vue 的另一套后台组件库。
vue-cli vue 项目脚手架。一键安装 vue 全家桶的工具。
等等
5.命令行的重要性
CLI(command-line interface,命令行界面)
黑苹果的介绍:
https://baike.baidu.com/item/%E9%BB%91%E8%8B%B9%E6%9E%9C/5220943?fr=aladdin
大牛的建议:
1.抛弃 windows 操作系统,不管它是什么版本的 windows。
2.购买一台 macbook pro 没钱购买可以选择 黑苹果 ,可以参考我的系列博文 打造前端MAC工作站以及相关文章索引
3.如果不是 photoshop 的重度用户,并且想要更深层次的掌握更多内容,请使用 linux 系统。
ubuntu 操作系统还是比较简单上手的。有一定 linux 使用经验的同学,建议使用 arch linux 操作系统,新手不要尝试,因为你一定安装不上。
4.除了使用 atom 或 vscode 这样的现代编辑器,更推荐掌握 vim 这样基于cli的编辑器的基本使用。
能用到什么样的层次,取决于你自己的需求,相关内容可以参考:世界上最牛的编辑器: Vim系列博文。
6.安装nodejs环境
.在 https://nodejs.org/ nodejs 官方网站下载安装包,然后进行安装 .官方网站的文档操作 命令行安装 nodejs
测试安装是否成功
node -v
npm -v
npm config set prefix “d:\nodejs\node_global” npm config set cache “d:\nodejs\node_cache” 进入环境变量对话框,在系统变量下新建”NODE_PATH”,输入”D:\nodejs\node_global\node_modules”。(ps:这一步相当关键。) 上面的用户变量都要跟着改变一下(用户变量”PATH”修改为“d:\nodejs\node_global\”), 要不使用module的时候会导致输入命令出现“xxx不是内部或外部命令,也不是可运行的程序或批处理文件”这个错误。
7.安装 vue-cli VUE的脚手架工具
npm install -g vue-cli
npm 是 nodejs 的官方包管理器。可以简单的理解为,用这个来管理所有的依赖包,虽然不仅仅是如此。
install 命令表示执行安装操作。
-g 是命令参数,代表,这个包将安装为系统全局的包。也就是说,在任何地方都可以用这个包。
vue-cli 是我们安装的包的命令。
安装完成后,我们在终端中输入: vue -V 注意,这里的 V 是大写的。如果输出为下面的图片中的内容,则代表你安装正确。
vue学习第一天 ------ 临时笔记的更多相关文章
- vue学习第二天 ------ 临时笔记
学习链接: vue.js官方文档: https://cn.vuejs.org/v2/guide/index.html vue.js API: https://cn.vuejs.org/v2/api/# ...
- vue学习第一篇 hello world
计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...
- Vue学习第一天:Vue.js指令系统
1. 如何使用Vue.js? 1.1 直接引入 - <script src="./statics/vue.min.js"></script> - 引入之后在 ...
- 前端-Vue学习思维导图笔记
看不清的朋友右键保存或者新窗口打开哦!喜欢我可以关注我,还有更多前端思维导图笔记有vue结构分析,JS基础,JQ,JS高级,Angular,git等等
- VUE学习第一天,安装
vue生命周期好文章: http://www.zhimengzhe.com/Javascriptjiaocheng/236707.html
- vue学习第一天:v-bind的使用(让属性绑定变量)
v-bind的使用 v-bind: 是vue中,提供用于绑定属性的指令 例: <input type="button" value="按钮" title ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- vue 学习笔记(二)
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
随机推荐
- [Django笔记] 从已有的数据库构建应用
Django适合从零开始构建,所谓 'Green-field' 开发.那么当我需要基于已存在的数据库构建应用时怎么办呢? inspectdb # 扫描默认数据库 python manage.py in ...
- 【bzoj3209】: 花神的数论题 数论-DP
[bzoj3209]: 花神的数论题 首先二进制数中1的个数最多就是64个 设所有<=n的数里二进制中1的个数为i的有a[i]个 那么答案就是 然后快速幂 求a[i]可以用DP 设在二进制中从 ...
- PHP删除目录下包含某个字符串的全部文件
//获取全部的路径 function tree(&$arr_file, $directory, $dir_name='') { $mydir = dir($directory); whi ...
- springmvc htmlEscape标签的作用
有些东西自己不知道就想要弄明白 唉 做项目 看人家项目中用到啦 不会 不知道 就百度啦 整理了一下 方便自己记忆 一.SpringMVC 表单元素标签 如下: <form:textarea ...
- laytpl....
switch 语句.. <ul class='mui-table-view'> <!--switch 语句 ...--> {{# switch(d['event']){ cas ...
- 浅谈CSS3中display属性的Flex布局
浅谈CSS3中display属性的Flex布局 最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...
- hdu3068 求一个字符串中最长回文字符串的长度 Manacher算法
最长回文 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- python自动化day2-列表、字典、集合
一.数据类型 1.什么是数据? x=10,10是我们要存储的数据 2.为何数据要分不同的类型 数据是用来表示状态的,不同的状态就应该用不同的类型的数据去表示 3 数据类型 数字(整形,长整形,浮点型, ...
- Go语言学习包(1)之bufio包
参考网址: https://blog.csdn.net/wangshubo1989/article/details/70177928
- php rtrim的一个坑,很“二”的问题
一.背景: 做项目的时候遇到一种情况,商家的营业时间显示的问题,设计图上要求显示成:“星期一,星期二,星期三,星期四,星期五,星期六,星期天” 换句话说,就是营业星期勾哪个就显示哪个,类似下面这样: ...