一 . web前端框架------VUE

一. es6语法

http://es6.ruanyifeng.com/

什么是ECMAScript，以及es6的诞生？
1997年 ECMAScript 1.0 诞生

1999年12月 ECMAScript 3.0诞生，它 是一个巨大的成功，在业界得到了广泛的支持，它奠定了JS的基本语法，被其后版本完全继承。
直到今天，我们一开始学习JS，其实就是在学3.0版的语法

2000年的ECMAScript4.0是当下ES6的前身，但由于这个版本太过激烈，对ES3做了彻底升级，所以暂时被“和谐”了

2009年12月，ECMAScript5.0版正式发布。ECMA专家组预计ECMAScript的第五个版本会在2013年中期到2018年作为主流的开发标准。2011年6月，
ES5.1版发布，并且成为ISO国际标准

2013年，ES6草案冻结，不再添加新的功能，新的功能将被放到ES7中；2015年6月，ES6正式通过，成为国际标准

好的，介绍es6的诞生，我们简单来学几个es6的语法，仅仅的只是为了后面咱们vue的课程做课前准备。如果感兴趣的同学可以查看

https://www.cnblogs.com/majj/p/9041582.html ES6基本语法使用

https://www.cnblogs.com/haiyan123/p/8361470.html ES6基本语法使用

对象的单体模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
    var person = {
        name:'张三',  属性
        age: 18,
       
        fav(){    方法
            console.log(this,"111111111111");
        }
    }
    person.fav();   调用方法
    </script>
    
</body>
</html>

面向对象ES6和javascript
https://www.cnblogs.com/chaixiaozhi/p/8515087.html    javascript 面向对象(实现继承的几种方式)
https://www.cnblogs.com/shizk/p/9561997.html           javaScript面向对象是什么？（一）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        
javascript 面向对象构造函数 使用
     // 构造函数的方式创建对象
     function Animal(name,age){
         this.name = name;    初始化属性
         this.age = age;
  
     }
     
//   给上面构造函数添加方法
    Animal.prototype.showName = function(){
            console.log(this.name);
     }
    //   给上面构造函数添加方法
     Animal.prototype.showName2 = function(){
        console.log(this.name);
      }
     //   给上面构造函数添加方法
     Animal.prototype.showName3 = function(){
        console.log(this.name);
     }
     
     //   给上面构造函数添加方法
     Animal.prototype.showName4 = function(){
       console.log(this.name);
    }
     
     //   给上面构造函数添加创建实例
    var dog = new Animal('日天',18)


   console.log("*********************************************************************************")
  
   
ES6 面向对象(构造器函数)使用
   
    class Animal{
        constructor(name,age){
            this.name = name;   初始化属性
            this.age = age;
        }
        
//      方法
        showName(){  
            // 一定不要加逗号
            console.log(this.name)
        }
    
        
    }
   
    var d = new Animal('张三',19);   //实例 对象
    d.showName(); 
    </script>
    
</body>
</html>

模板字符串拼接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <script>
        var a = 1;
        var b = 2;

        // var str = "哈哈哈哈" + a + "嘿嘿嘿" + b;
        var str = `哈哈哈哈${a}嘿嘿嘿${b}`;
        console.log(str);
    </script>
    
</body>
</html>

01-let和const

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
   
    <script type="text/javascript">

    // let声明变量块级作用域,不能重复声明
    // let声明的变量 是块级作用域,不能重复声明
    // {
    //     // let a = 12;
    //     let a  = 12;
    //     let a  = 13;
    // }
   
    // console.log(a);

    // var a = [];
    // for (let i = 0; i < 10; i++) {
    //  a[i] = function () {
    //     console.log(i);
    // };
    // }
    // a[6](); // 6 10
    
    // 不存在变量提升
    console.log(foo); // 输出undefined
    var foo = 2;

    // const 声明常量，一旦声明，立即初始化，不能重复声明。
    </script>
    
</body>
</html>

二.VUE.框架介绍

一、什么是VUE？
它是构建用户界面的JavaScript框架（让它自动生成js,css，html等）

https://www.cnblogs.com/haiyan123/p/8352742.html vue

https://www.cnblogs.com/pythonywy/p/11568799.html vue

一 . web前端框架------VUE

一. es6语法

http://es6.ruanyifeng.com/

二.VUE.框架介绍

猜你喜欢