Vue入门以及ES6新特性讲解

1.前端技术发展史简介

1.1 前端技术发展史

（1）1990年，HTML（超文本标记语言）诞生，主要用来做静态网页，由一些标签+css等组成。
（2）1995年，JSP、PHP、ASP的相继出现，可以使用它们来完成动态网页，但是后台非常臃肿。
（3）Ajax（Asynchronous Javascript And XML，即异步Javascript和XML，也称为局部刷新技术）成为主流。
（4）2008年，HTML5出现了，也标志着前端的春天来了。
（5）2010年，NodeJs出现，它的出现吸引了很多前端开发人员开始用 JavaScript 开发服务器代码，其异步编程风格也深受开发人员的喜爱。Node.js 的伟大不仅在于拓展了 JavaScript 在服务器端的无限可能，更重要的是它构建了一个庞大的生态系统。在这之后，一大批前端框架涌现，其中就包含Vue，Vue的最初发布时间为2014年7月。

1.2 MVVM架构

我们之前用过的SpringMVC框架基于MVC架构，而MVC的意思是：Model (模型)、 View(视图) 、Controller(控制器)。
前端框架Vue则基于MVVM框架，意思为：Model(模型) 包括数据和一些基本操作 、View (视图) 页面渲染结果 、 ViewModel(视图模型)模型与视图间的双向操作。其中Vue框架最具特色的为可以实现数据的双向绑定，需要v-model指令来实现，只要我们Model发生了改变，View上自然就会表现出来。当用户修改了View，Model中的数据也会跟着改变。
把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。具体流程如图：

2.NodeJS&NPM环境

NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们需要先安装node及NPM工具.
NodeJs下载：https://nodejs.org/en/download/
（1）安装nodejs工具包，安装非常简单，一直下一步即可。安装完毕之后可以在cmd控制台输入以下指令查看及完成相应操作。
node -v 查看node版本信息

npm -v 查看npm的版本信息

npm install npm@latest -g 升级为最新版(需要升级)
（2）在idea工具上，安装nodejs插件，

安装完毕之后，重启即可。
（3）创建一个static web项目
（4）在Terminal控制台输入npm init -y（相当于是创建了一个maven项目）

（5）安装vue，有如下指令：
npm install -g vue 全局安装vue（所有项目都可以使用）

npm install vue 局部安装vue（当前项目使用，推荐）

npm uninstall vue 卸载vue

npm update vue 更新vue

3.ECMAScript6

3.1 什么是ECMAScript

web1.0时代：
最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。
web2.0时代：

• 1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。
• 1996年，微软发布了JScript，其实是JavaScript的逆向工程实现。
• 1997年，为了统一各种不同script脚本语言，ECMA（欧洲计算机制造商协会）以JavaScript为基础，制定了ECMAscript标准规范。JavaScript和JScript都是ECMAScript的标准实现者，随后各大浏览器厂商纷纷实现了ECMAScript标准。
  所以，ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范。

3.2 ECMAScript历史

• 1997年而后，ECMAScript就进入了快速发展期。
• 1998年6月，ECMAScript 2.0 发布。
• 1999年12月，ECMAScript 3.0 发布。这时，ECMAScript 规范本身也相对比较完善和稳定了，但是接下来的事情，就比较悲剧了。
• 2007年10月，ECMAScript 4.0 草案发布。这次的新规范，历时颇久，规范的新内容也有了很多争议。在制定ES4的时候，是分成了两个工作组同时工作的。
  一边是以 Adobe, Mozilla, Opera 和 Google为主的 ECMAScript 4 工作组。
  一边是以 Microsoft 和 Yahoo 为主的 ECMAScript 3.1 工作组。
  ECMAScript 4 的很多主张比较激进，改动较大。而 ECMAScript 3.1 则主张小幅更新。最终经过 TC39 的会议，决定将一部分不那么激进的改动保留发布为 ECMAScript 3.1，而ES4的内容，则延续到了后来的ECMAScript5和6版本中
• 2009年12月，ECMAScript 5 发布。
• 2011年6月，ECMAScript 5.1 发布。
• 2015年6月，ECMAScript 6，也就是 ECMAScript 2015 发布了。 并且从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是ECMAScript6。
  ES6就是javascript用的最多语言规范.被浏览器实现了.

3.3 ES6常用的一些新特性

（1)let与const
let相较于var，它是块级的（相当于局部变量）

for(var j = 0;j < 10;j++){
            console.log(j)
        }
        console.log(j);

        for(let i = 0;i<10;i++){
            console.log(i);
        }
        console.log(i);

const声明常量不能修改（相当于final）

（2）解构表达式
数组解构：

//数组解构
        var arr = [1,2,3];
        var [a1,a2,a3] = arr;
        console.log(a1,a2,a3);

对象解构：

//对象解构
        var obj = {"name":"小困困","age":25}
        var {name,age} = obj;
        console.log(name,age);

（3）箭头函数

// 以前：
    eat: function (food) {
        console.log(this.name + "在吃" + food);
    },
    // 箭头函数版：
    eat2: food => console.log(person.name + "在吃" + food),// 这里拿不到this
    // 简写版：
    eat3(food){
        console.log(this.name + "在吃" + food);
    }

箭头函数+解构表达式写法：

//箭头表达式+解构表达式
        //以前写法
        var person = {
            name:"小憨憨"
        }
        let a = function (person) {
            console.log(person.name);
        }
        a(person);
        //箭头表达式+解构表达式写法
        var b = ({name}) =>{
            console.debug(name);
        }
        b({"name":"小憨憨"});

（4）Promise对象
Promise是异步编程的一种解决方案，比传统的解决方案（回调函数+事件）更加合理和强大。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。过Promise的构造函数来创建Promise对象，并在内部封装一个异步执行的结果。
案例：

//(4)promise
        const p = new Promise((resolve, reject) =>{
            // 这里我们用定时任务模拟异步
            setTimeout(() => {
                const num = Math.random();
                // 随机返回成功或失败
                if (num < 0.5) {
                    resolve("成功！num:" + num)
                } else {
                    reject("出错了！num:" + num)
                }
            }, 300)
        }).then(function (msg) {
            console.log(msg);
        }).catch(function (msg) {
            console.log(msg);
        })

（5）模块化
模块化是一种思想,这种思想在前端有多种规范常见的规范有commonJs(nodeJS),cmd/amd(可以在浏览器中使用),es6(可以在浏览器中使用).
模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。而JS中没有包的概念，换来的是模块。es6模块功能主要由两个命令构成：export和import。

• export命令用于规定模块的对外接口，
• import命令用于导入其他模块提供的功能。
  导出：
  
  也可简写为：
  
  注意：
  1.可以导出任何东西
  2.可以省略名字
  导入：
  

4.Vue介绍及使用

4.1 什么是Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue渐进式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html
Vue只关注视图层。
Vue通过新的属性（自定义）和{ {表达式}}扩展了 HTML。
Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue学习起来非常简单。
官网：https://cn.vuejs.org/

4.2 Vue的特性

• 轻量
  Vue.js库的体积非常小的，并且不依赖其他基础库。
• 数据绑定
  对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
• 指令
  内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。
• 插件化
  Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
• 组件化
  组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

4.3 Vue的入门

Vue是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
Vue是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：
下载Vue文件到本地，官方提供两个版本：
https://cn.vuejs.org/v2/guide/installation.html
引入vue.js

4.3.1 Vue实例挂载(el)的标签

每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。 实例上的属性和方法只能够在当前实例挂载的标签中使用。

    {
    { message }}

4.3.2 Vue中的数据(data)详解

Vue实例的数据保存在配置属性data中, data自身也是一个对象.
通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上

4.3.3 Vue中的方法(methods)详解

Vue实例的方法保存在配置属性methods中,methods自身也是一个对象. 该对象中值都是方法体
方法都是被Vue对象调用,所以方法中的this代表Vue对象

4.4 Vue的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

4.5 Vue的表达式

支持算术运算：

  
    
{
    {5+5}}
    
    
{
    {5+"v5"}}
    
{
    {5+"5"}}
    
    
{
    {"5"-"5"}}
    
{
    {5*5}}
    
{
    {"a"-"b"}}
    
    
{
    {"5"*"5"}}
    
    
{
    {5/5}}

    
    {
    {show?"男":"女"}}

字符串操作：

    {
    {"一点寒芒先到，随后抢出如龙"}}

    {
    {"一点寒芒先到，随后抢出如龙".length}}

    {
    {"一点寒芒先到，随后抢出如龙".substring(2,6)}}

    {
    {"abcdefg".toUpperCase()}}

对象数组操作：

    
    {
    {user}}

    
    {
    {JSON.stringify(user)}}

    {
    {user.name}}

    {
    {user.age}}

    {
    {user.fight()}}


    {
    {hobbys}}

    {
    {hobbys[0]}}

    {
    {hobbys.length}}

    {
    {hobbys.toString()}}

    {
    {hobbys.join("------")}}

4.6 Vue的指令

(1)v-text（类似于innerText）
语法:
<标签名 v-text=“表达式”>
作用:
通过data中的数据更新标签标签中的textContent属性的值.(标签中的文本内容)
注意事项:

• 如果值是html的值,会作为普通的文本使用。
• 标签中的属性值必须是data中的一个属性.
  (2)v-html（类似于innerHTML）
  语法:
  <标签名 v-html=“表达式”>
  作用:
  通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容)
  注意事项:
• 如果值是html的值,不会作为普通的文本使用,要识别html标签。
• { {表达式}} 可以插入的标签的内容中
• v-text和v-html更改标签中的所有内容

(3)v-for 循环
语法:
<标签 v-for=“元素 in 数据源”>
数据源: 数组,
元素: 数组中的一个元素,
数据源: 对象
元素: 对象中的一个属性名
<标签 v-for="(元素,索引|键) in 数据源">
当数据源是数组时, ()的第二个参数值索引
当数据源是对象时, ()的第二个参数值键
<标签 v-for="(元素,键,索引) in 对象">
作用:
基于数据源多次循环达到多次渲染当前元素.

    

        

            {
    {text}}
        
    
    

        

            {
    {v}}
        
    
    

        

            {
    {index}}===={
    {text}}
        
    
    

        

            {
    {value}}===={
    {key}}====={
    {index}}
        
    
    

        

            

                
序号
                
姓名
                
年龄
                
性别
            
        
        

            

                
{
    {tea.id}}
                
{
    {tea.name}}
                
{
    {tea.age}}
                
{
    {tea.sex}}
            
        
    

(4)v-bind 将data中的数据绑定到标签上,作为标签的属性. 比如 :
语法:
为一个标签属性绑定一个值
<标签 v-bind:标签属性名字=“表达式”>
简写形式:
<标签 :标签属性名字=“表达式”>
为一个标签绑定一个对象作为该标签的多个属性
<标签 v-bind=“对象”>
注意事项
将一个对象键和值作为标签的属性的名字和值时, 在v-bind后不需要指定属性的名字

(5)v-model 在表单控件上创建双向绑定
表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,
当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定
需要注意：

• 如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定.
• 绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中-回显
• v-model只作用于以下表单:input select textarea
  (6)v-show
  语法:
  <标签名 v-show=“表达式”>
  作用:
  根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
  当v-show的值为假时, 会在标签的css中添加 display: none :
  注意事项:
• 当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除
• 标签的值会自动转换为boolean类型的值
  (7)v-if
  语法:
  <标签名 v-if=“表达式”>
  作用:
  根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
  注意事项:
• 当表达式中的值是false时, 是从页面上删除.
• 标签的值会自动转换为boolean类型的值
  (8)v-else
  语法:
  <标签名 v-if=“表达式”>
  <标签名 v-else>
  作用:
  当v-if表达式不成立时, v-else执行.
  注意事项:
• 该指令必须也v-if搭配起来使用.
• v-else是一个单独的属性, 该属性是不要赋值的.
  (9)v-else-if
  语法:
  <标签名 v-if=“表达式”>
  <标签名 v-else-if=“表达式”>
  <标签名 v-else-if=“表达式”>
  <标签名 v-else>

    

    
你好世界1
    
你好世界2
    
    
你好世界3

    

    
你成绩还有待提高！
    
你成绩还可以嘛！

    

    
你成绩很差
    
你成绩较差
    
你差一点就及格了
    
你及格了，学分到手了