张泽坤 15331410
因为我在本次项目中主要负责项目前端实现，但因为之前比较少接触JS和vue，所以这一次需要重新学习一下。以下主要是我在学习过程中所做的一些总结。
JS学习报告
什么是 JavaScript？
JavaScript 是一门跨平台、面向对象的动态的弱类型的轻量级解释型语言，是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。应用于 HTML 文档能够在网站上提供动态的交互能力，他不同于 Java。简单说就是基于浏览器处理 HTML 文档，实现各种网页特效，响应用户的各种操作，为网页添加动态效果，提升用户操作体验，比如图片滚动播放效果，点击登录按钮弹出对话框，鼠标移入移出动画，表单提交数据验证等。
JavaScript 组成
JS 由三部分组成：
ECMAScript：也叫解释器，充当翻译角色，这是 JS 的核心部分。
DOM：文档对象模型（Document Object Model）。DOM 赋予了 JS 操作 HTML 的能力，即 document 操作。
BOM：浏览器对象模型（Browser Object Model）。BOM 赋予了 JS 操作浏览器的能力，即 window 操作。
为什么要学习 JavaScript？ JavaScript 通常被称为 JS，他发明的目的，就是作为浏览器的内置脚本语言，为网页开发者提供操控浏览器的能力，他可以让网页呈现出各种特殊效果，为用户提供友好的互动体验。随着 Ajax 技术的出现，前端可以在不刷新页面的情况下和后端进行数据交换，更新页面数据，jQuery 等库的盛行让 JS 编写变得异常简单，Bootstrap 框架更让前端的成本无限降低，大大提高了前端开发的效率，JS 在前端领域前景非常广阔。
随着 Node 的发布，使得 JS 不仅可以运行在前端，还可以运行在服务器上。这对 JS 来说是一次质的突破，Node.js 项目使得 JS 可以用于开发服务器端的大型项目，网站的前后端都用 JS 开发已经称为了现实。
至此 JS 除了可以被浏览器解析，也可以作为后端语言使用，越来越多的应用程序，将 JS 作为内嵌的脚本语言，可以用来构建移动端 APP，开发 HTML 游戏，可以不依赖于浏览器，构建桌面应用程序。
可以预期，最终只使用 JS 这一种语言，就可以开发出适应不同平台（包括桌面端，服务器端，手持端）的程序。在 Jeef Atwood 发布的博客中，他提出了著名的“Atwood定律”，即“任何能够用 JavaScript 实现的应用程序，最终都必将用 JavaScript 实现”。
JS 一些基本概念
(1)、标识符：标识符是 JS 中定义的符号，可以由任意顺序的大小写字母、数字、下划线、和美元符号( $ )组成。标识符就是识别一个具体对象的名称，最常见的标识符就是变量名和函数名，JS对大小写敏感，所以 a 和 A 是两个不同的标识符。标识符不能以数字开头，也不能是JS中的保留关键字，具体可百度参考资料。另外还有三个虽然不是保留字，但是因为他们具有特别的含义，也不能用作标识符：Infinity、NaN、undefined。
(2)、代码块：代码块其实不难理解，先来解释以下 JS 代码，JS 代码就是 JS 语句的序列，浏览器依据编写 JS 语句的顺序依次逐行的执行每个语句，而代码块则是 JS 语句的组合，并且包含在花括号内，代码块的作用是告诉浏览器这些代码一起执行语句序列。JS 函数就是将语句组合在块中的典型例子。
(3)、变量：从字面上来理解，变量就是可以改变的量，但是从编程角度讲，变量是用于存储某种/某些数值信息的“容器”，简单说就是对“值”的引用，使用变量等同于引用一个值，每一个变量都有一个变量名。比如：var x = 1; 先声明一个变量 x，x 就是变量名，然后用 = 赋值，也就是将 1 赋值给 x，以后，在引用 x 的时候，就会得到值 1。在 JS 中创建一个变量通常被称为“声明”一个变量，var 就是用来声明变量的。变量在声明之后是空的，他的值为undefined（未定义），需要给他赋值后使用，= 就是建立这种引用关系。上面的代码可以看作为：var x；x=1；这样写是先声明一个变量，再给其赋值，上面的代码则在声明的同时就进行了赋值。在一条语句中，可以声明多个变量，并使用逗号隔开。注意：在给变量命名的时候不能使用 JS 关键词和 JS 保留词。
(4)、常量：有变量就会有常量，变量可以理解为变化的量，而常量就是不变的量。其实在 JS 中并没有常量这个概念，所谓的常量，只不过是提前赋值的变量而已。常量和变量都属于变量，只不过常量是赋过值后就不能再改变的变量，而普通的变量可以再次进行赋值操作。为了与变量有所区分，增强代码的可读性，所以在声明一个常量时，一般采用常量名全部大写，若有多个单词，可用下划线隔开。
(5)、字面量：所谓的字面量，其实是对象的表示形式，或者说是创建方式，他不是一种值，而是一种表示值的记法，简单说字面量就是如何表达一个对象的值，在给变量赋值时，赋值运算符后面的都可以认为是字面量。字面量也叫直接量，一个字面量，也可以被认为是一个常量，如 100。这里需要注意：变量是一个名称，而字面量是一个值。字面量可分为：数字字面量、字符串字面量和表达式字面量。数字字面量，可以是整数或者是小数，比如：var a=10; var b=3.14; 10 和 3.14 就是数字字面量。字符串字面量，使用引号包含起来的一系列字符，比如：var str='小明'； '小明'就是字符串字面量。表达式字面量又可分为：数组字面量、对象字面量、函数字面量。数组字面量，每个值用逗号隔开，比如：var arr = [1,2,3,4,5,6]; [1,2,3,4,5,6] 就是数组字面量。对象字面量是一个键值对的组合，每个键值对之间用逗号分割，并包含在花括号内，比如：var obj = {a:12, b:5, c:'21'}， {a:12, b:5, c:'21'} 就是对象字面量。函数字面量，function myFunction(a, b) { return a * b;} 函数字面量是用关键字 function 后加可选的函数名、用圆括号括起来的参数和用花括号括起来的执行语句构成。函数字面量是一个表达式，而不是语句。上面的例子可写为：var myFunction = function (a, b) { return a * b;} ，这样就有便于理解了，也可以说函数的字面量就是一个匿名函数，他的指向是归谁使用。
(6)、变量的作用域：变量分为：全局变量和局部变量。全局变量简单说就是在函数外声明的变量，任何地方都可以使用，而局部变量就是在函数内部声明的变量，只能在声明他的函数内部使用。这就是变量的作用域，通俗理解就是他的作用范围。JS 变量的生命期从他们被声明的时候开始，全局变量会在页面被关闭之后删除，局部变量则在函数被运行以后删除。
(7)、表达式：表达式与数学中的定义相似，是指具有一定的值、用运算符把常量和变量连接起来的代数计算式，一个表达式可以包含常量或变量。比如：var a=a+1; a 是变量名称，a+1 就是表达式。在生活中”再见“表达方式有很多种，比如：英语(goodbey)，网络语(886)，肢体语言(摆摆手)等。JS 中的表达式无处不在，可以表达以下几种内容：字符串的连接，被称为串表达式，var str = "I" + "love" + "you"; 还有这种形式：var str = "hello"; var str1 = str + "World"; 串表达式值为字符串。数值表达式，var num = 10 + 2.5; 也有如下形式：var num = 10 + 2.5; var num1 = num + 10 * 2.5; 数值表达式值为数值。还是有一种是布尔表达式，var num = 2; alert(num == 2); 返回 ture，alert(num > 10); 返回 false。布尔表达式值为 true 或 false。
(8)、函数：一看到函数，很多人可能就头疼，但是编程中函数还是很好理解的，是由事件驱动的或者当它被调用时执行的可重复使用的代码块。简单说就是完成某个特定功能的一组语句，使用function关键字定义包裹在花括号中的代码块，便于反复调用。其基本形式为：function moveStart(){代码} 。声明一个函数只是在告诉浏览器这有一个函数，不会被实际执行，而在函数调用的时候，才真正执行函数内的代码。moveStart 就是函数名，遵循 JS 命名规范，在函数调用的时候使用：moveStart()。若将函数定义在变量后，变量则可作为函数使用。函数存储在变量中，不需要函数名，可以通过变量名调用。我们把没有名称的函数称为匿名函数。函数返回值，函数执行的结果就是函数返回值，return 可以将函数内的结果返回到函数外调用，在使用 return 语句时，函数会停止执行，并返回指定的值，再从调用的地方开始执行，函数调用会被返回值取代，同样一个函数应该只返回一种类型的值，在仅仅是希望退出函数时，也可以使用 return，返回值是可选的，比如下面的代码：如果 a 大于 b，则退出函数，并不会计算 a 和 b 的和。
(9)、函数传参：在调用函数时，可以向其传递值，这些值被称为参数，这些参数可以在函数中使用，可以传递任意多的参数，并由逗号分割，比如：function myFunction(x, y){return x * y;} ，在调用的时候传入值：myFunction(3 ,4)，则返回 x乘y 的运算结果。简单理解，参数就是一个占位符，即先把位置占住，后面再用。传递的值必须与参数以一致的顺序出现，第一个值就是第一个被传递的参数给定的值，依次类推。函数很灵活，可以传递不同的值，来调用该函数。函数参数可分为：显式参数和隐藏参数( arguments )。函数的显式传参，也叫固定参，就是在函数被声明定义的时候列出的参数。隐藏参数也叫可变参，或者不定参，arguments 对象是 JS 内置的对象，对象包含了函数调用的参数数组，通过这一点可以很方便的找到最后一个参数的值，或者计算所有参数的和。当函数里有一部分定不下来的时候可以用函数传参.
Vue学习报告
vue是什么？
vue也是一个数据驱动框架，做spa页面的
vue如果不做页面可以当做一个单独使用的js库，做双向数据绑定用
Vue的
核心库只关注视图层,但是vue并不只关注视图，和angular一样也有指令，过滤器这些东西vue有非常强大的单文件组件
就是css+html+js都写在一个.vue文件中，这样定义的组件很简洁，清晰，组件化分的很彻底
而angular中的js文件只能写js
虽然react中可以写css-in-js，但是缺乏选择器功能，即便可以在js中引入css文件，但还是不方便
vue融合了react和angular的优点，并且解决了react和angualr的痛点
vue学习地址和技术栈
Vue2.0中文网：https://vuefe.cn/
vue全家桶变为vue2.0+vue-router+fetch+vuex
我们下文中所出现的vue都指代vue2.0
vue和其他框架的对比
vue比市面上的其他框架功能更完善，性能更高效
Vue.js特点
简洁：页面由HTML模板+Json数据+Vue实例组成
数据驱动：自动计算属性和追踪依赖的模板表达式
组件化：用可复用、解耦的组件来构造页面
轻量：代码量小，不依赖其他库
快速：精确有效批量DOM更新
模板友好：可通过npm，bower等多种方式安装，很容易融入
Vue.js入门小例子
**声明式渲染**
本例子由HTML模板（View）+Json数据（Model）+Vue实例（ViewModel）组成。
创建Vue的实例，需传入一个选项对象，如：数据、挂载元素、方法、模生命周期钩子等。本例子中，选项对象的el属性为#app，表示Vue实例挂载在<div id="app">...</div>元素上，data属性为exampleData，表示Model为exampleData。View中{{message}}是Vue的一种数据绑定语法，在运行时，{{message}}会被数据对象的message属性替换。
<!DOCTYPE html> <html> <head> <title>声明式渲染</title> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <!-- View --> <div id="app"> {{message}} </div> <script> //Model var exampleData = { message: 'Hello Vue!' } //ViewModel var app = new Vue({ el: '#app', data: exampleData }) </script> </body> </html>12345678910111213141516171819202122232425
双向绑定
在Vue中使用v-model在表单元素上实现双向绑定。当在输入框输入的信息发生变化，<p>...</p>中的信息随之变化；当通过控制台中的Console，修改exampleData.message的值，输入框中的信息也随之变化。
<!DOCTYPE html> <html lang="en"> <head> <title>双向绑定</title> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <!-- View --> <div id="app"> <p>{{message}}</p> <input type="text" v-model="message"> </div> <script> //Model var exampleData = { message: 'Hello Vue!' } //ViewModel var app = new Vue({ el: '#app', data: exampleData }) </script> </body> </html>