vue学习（1）

前置的准备学习：

ES6简单语法：

1.let和const

2.模板字符串

3.箭头函数

4.对象的单体模式

5.es6的面向对象

6.模块化

1.let和const

<script type="text/javascript">
       {
        var a=12;
       } 
       console.log(a);
</script>

浏览器输出12，说明var声明变量的作用域是全局的。

 

<script type="text/javascript">
       {
        let a=12;
        var a=13;
       } 
       console.log(a);
</script>

浏览器输出报错信息，说明let声明的变量是块级作用域，不能重复声明。

 

<script>
        var a=[];
        for(var i=0;i<10;i++){
            a[i]=function(){
                console.log(i);
            };
        }
        a[6]();// 10 因为i是用var声明的，作用于全局。
 </script>

 

<script>
        var a=[];
        for(let i=0;i<10;i++){
            a[i]=function(){
                console.log(i);
            };
        }
        a[6]();// 6 因为不能重复声明，且是块级作用域，所以每一次循环，都是一个新的函数
    </script>

 

<script>
        const PI=3.14;
        PI=2;//Uncaught TypeError: Assignment to constant variable.at let和const.html:28
    </script>

const是声明一个常量，不可变，重新赋值则会报错。

 

2.模板字符串

<script>
        var a=1;
        var b=2;
        //var str="哈哈哈"+a+"嘿嘿嘿"+b; //以前的写法
        //console.log(str);//哈哈哈1嘿嘿嘿2
        var str=`哈哈哈${a}嘿嘿嘿${b}`//ES6写法 哈哈哈1嘿嘿嘿2
        console.log(str);
   </script>

3.箭头函数

//无形参
var f=()=>5;
//等同于
var f=function(){return 5};

//多个形参
var sum=(num1,num2)=>num1+num2;
//等同于
var sum=function(num1,num2){return num1+num2;};

箭头函数的两个坑：1.this的指向发生了改变，指向定义对象时的对象window。2.arguments不能使用。

4.对象的单体模式

<script>
        var person={
            name:"张三",
            age:18,
            // fav:function(){
            //     console.log(this);
            // }
            fav(){console.log(this)}
        }
        person.fav();
    </script>

解决箭头函数不能指向本身的问题。字面量方式创建对象。

5.面向对象

es5时的面向对象：

    <script>
        //构造函数的方式来创建对象，面向对象
        function Aniaml(name,age){
            this.name=name;
            this.age=age;
        }
        Aniaml.prototype.showName=function(){
            console.log(this.name)
        };//给对象增加方法

        var dog=new Aniaml('日天',18);
        dog.showName()

    </script>

es6的面向对象

<script>
        class Aniaml{
            constructor(name,age){
                this.name=name;
                this.age=age;
            }//构造方法，且后面不能加逗号
            showName(){
                console.log(this.name)
            }
        }
        var d=new Aniaml('张三',19);
        d.showName();
    </script>