前言

ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。 ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

1.Let和const命令

之前，js定义变量只有一个关键字：var。var有一个问题，那就是var只能生命全局变量

let：声明的是局部变量

const：声明的量都是常量就相当于java中的final

2.字符串扩展方法

ES6为字符串扩展了几个新的API

includes()：包含，返回布尔值，表示是否找到了参数字符串。

startsWith()：开始的地方，返回布尔值，表示参数字符串是否在原字符串的头部。

endsWith()：结束的地方，返回布尔值，表示参数字符串是否在原字符串的尾部。

substr(startindex,length)startindex ：从哪里开始第一个索引下标为0 ，length ：截取几个字符串

substring (startindex,endindex) 包左不包右 startindex ：从哪里开始第一个索引下标为0,endindex：从哪里结束索引是从最左边开始不包括右边第一个索引下标为1

字符串模板可以让字符串换行和加空格

原始 var s = " "

模板 var s = ` `

3.解构表达式

在es6之前遍历数组时只能通过元素的下标来获取但是在es6里面增加了解析表达式可以把数组赋值给别的数组或对象来当成下标

代码演示

let arr =[1,2,3,4];
let [a,b,c,d]=arr;
alert([a,b,c,d]); //输出为1234
let [,,,e]=arr;  //在数组总,可以用来占位
alert(e);//输出为4
let user={
    name:"张三",
    age:15,
    sex:"女"
};
let {name}=user; //对象中直接写对象对应的属性即可
alert(name)//输出为张三

4.函数表达式

代码演示加注解介绍

//函数表达式第一种方法，直接写函数体调用
function f(a,b) {
    if (b == null) { //第一种判空并赋值
        b=20;
    }
    return a+b;
}
//函数表达式第二种方法，对象赋值方法
var  f2= function (a,b){
    b = b||10; //第二种判空给b加一个默认值如果为空就为10
   return a+b;
} ;
//函数表达式第三种方法箭头函数写法
//箭头函数规范
 // var 变量名 = (参数列表) => { 函数提}
var  f3= (a,b=20)=>{//第三种判空给b加一个默认值如果为空就为20
    return a+b;
} ;
//当当函数体里面如果方法体中只有一条语句，并且要返回的就是这条语句时可以省略return和大括号
// 如果参数列表只有一个参数时小括号也可以省略
var  f3 =  (a, b) => a+b;

4.Map和reduce

代码演示加注释讲解

数组中新增了map和reduce方法.
map():接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
// map方法
 var arr = [1,2,3]; // 先创建一个有值的数组
 var arr1 =arr.map(function (s) {  //通map方法依次取出arr的值并运行函数来运算赋值
     return s*10;
 });
 //第二种写法通过箭头函数
 var arr1 = arr.map(s => s*10);
 alert(arr1)
 //reduce方法
//     接收一个函数（必须）和一个初始值（可选）.
//     第一个参数（函数）接收两个参数：
// - 第一个参数是上一次reduce处理的结果
// - 第二个参数是数组中要处理的下一个元素
//     Reduce()会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数
//     没有初始值:
    var arr = [1,2,3,4,5];
    //reduce(函数体(参数必须有两个),初始值);
    //第一种写法
    var arr1=arr.reduce(function (a, b) {
        return a+b;
    });
    //第二种写法
    //通过箭头函数写法
    var arr1 = arr.reduce((a,b) => a+b);
     alert(arr1)

二、Vue入门案例

el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中

我们通过{{name}}的方式，来渲染刚刚定义的name属性。插值表达式

1.渲染信息

<div id="add">
  你好{{name}}
</div>
 <!--引入vue框架js文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var ss = new Vue({  //创一个vue对象来实例化信息
        el:"#add", //通过id来寻找要渲染的页面
        data:{  //数据模型可以有单属性也可以有数组和对象
            name:"张三"
        }
    })
</script>

2.双向绑定

概念：视图变了模型变，模型变了视图变

我们在data添加了新的属性：num在页面中有一个input元素，通过v-model与num进行绑定。
同时通过{{num}}在页面输出此时我们在输入框修改数字的值，页面上的num也会随着发生变化，model里面的值也会变化

<div> 
<!--双向绑定视图变了模型变，模型变了视图变-->
    <!--通过 v-model来锁定要绑定的属性-->
    <input type="text" v-model="num">
  你好{{name}}您有{{num}}
</div>
 <!--引入vue框架js文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    var ss = new Vue({  //创一个vue对象来实例化信息
        el:"#add", //通过id来寻找要渲染的页面
        data:{  //数据模型可以有单属性也可以有数组和对象
            name:"张三",
            num:100
        }
    })
</script>

3.v-on事件绑定

<div id="add">
    <!--双向绑定视图变了模型变，模型变了视图变-->
    <!--通过 v-model来锁定要绑定的属性-->
    <input type="text" v-model="num">
    <!--v-on一般用于事件绑定也可以简写为@-->
    <input type="button" v-on:click="add()" value="+">
    <!--也可以直接进行函数运行-->
    <input type="button" v-on:click="num--" value="-">
  你好{{name}}您有{{num}}
</div>
 <!--引入vue框架js文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //el data methods 是同级别的属性不能进行嵌套
    var ss = new Vue({  //创一个vue对象来实例化信息
        el:"#add", //通过id来寻找要渲染的页面
        data:{  //数据模型可以有单属性也可以有数组和对象
            name:"张三",
            num:100
        },
        methods:{ //可以写多个函数
            add(){
                //this代表windows对象
                return this.num++
            }
        }
    })
</script>

4.生命周期（钩子函数）

在vue里面提前定义

1.生命周期：从创建到销毁的整个过程中，所经历的方法

beforeCreate：vue对象创建之前调用

Created：vue创建之后

BeforeMount：页面渲染之前

Mounted：页面渲染之后

beforeUpdate：修改页面之前

Updated：修改页面之后

beforeDestroy：页面关闭之前

Destroyed：页面关闭之后

5.插值表达式

表达式必须有返回结果。例如 1 +1，没有结果的表达式不允许使用

用花括号来显示数据{{}}

插值闪烁：由于网速问题，会直接显示{{name}}，导致页面看起来很不对，过一会，网速回复了，就会重新显示真正的内容

1.v-text和v-html

v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

2.v-model

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。

目前v-model的可使用元素有：

input

select

textarea

checkbox

radio

components（Vue中的自定义组件）基本上除了最后一项，其它都是表单的输入项。

3.v-for

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数

语法: v-for="(item,index) in items"

items：要迭代的数组

item：迭代得到的数组元素别名

index：迭代到的当前元素索引，从0开始。

 <!--v-for格式: v-for = "变量名 in 数组"-->
    <li v-for="(u,index) in user">
        {{index}}--{{u.name}}--{{u.age}}--{{u.sex}}
    </li>
</div>
<!--引入vue框架js文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //el data methods 生命周期 是同级别的属性不能进行嵌套
    var ss = new Vue({  //创一个vue对象来实例化信息
        el:"#add", //通过id来寻找要渲染的页面
        data:{  //数据模型可以有单属性也可以有数组和对象
            name:"张三",
            num:100,
            text:"<h1> 你好 </h1>",
            user:[
                {name:"zz",age:18,sex:"女"},
                {name:"ss",age:19,sex:"女"},
                {name:"ww",age:17,sex:"男"},
                {name:"ee",age:16,sex:"男"}

            ]
        }

学习笔记可能不是特别好

Vue基础入门学习笔记

前言

一、ES6语法是什么？