zoukankan      html  css  js  c++  java
  • 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>
     
  • 相关阅读:
    五种提高 SQL 性能的方法
    join 使用详解方式
    关于MagicAjax的用法
    收藏几段SQL Server语句和存储过程
    ubuntu nfs配置 以及mount.nfs:access denied by server while mounting问题解决
    Hisi开发板上 SQLite3.3.8移植
    父进程非阻塞回收子进程(适用LINUX下C语言的clientserver模型)
    busybox asm/page.h: No such find.
    ubuntu11.10 samba服务器配置
    errno定义
  • 原文地址:https://www.cnblogs.com/xuepangzi/p/9429319.html
Copyright © 2011-2022 走看看