1.let和const的使用

1.因为var声明变量会有变量提升的问题

const声明的变量跟let相似，但是const声明的变量是常量

使用let声明有以下几个特点：(1)  不存在变量提升

(2)  不允许重复声明

(3)块级作用域

var arr = []for (var i = 0; i < 10; i++) {    arr[i] = function(){        console.log(i)     //只有在函数中的称为作用域，如：function后的                    }                               '{ console.log(i) }' 是作用域}arr[3]()    //输出结果 10  因为用来计数的循环变量泄露为全局变量            原因：等价于  var i ；for（i =0；........    循环时arr[0],arr[1]...等 赋给他的只是一个函数（列表中有10个 ' function(){console.log(i)}'）,执行完之后，i又进行了i++一次，此时，i = 10var arr = []for (let i = 0; i < 10; i++) {          arr[i] = function(){        console.log(i)    }}arr[3]()    //输出结果  3变量提升：当解析脚本的时候，当在脚本中遇到var声明的变量，会将var a；提到最上面去声明。由此，会使a，是一个全局变量

2.模板字符串

let name = '超哥';

let age = 18;

let strongstr = `我是${name},今年${age}岁了`

3.箭头函数(  function()等价于()=>)

普通函数function add(){    return 5}函数表达式let add = function(){    return 5}自执行函数(function(形参){    return 5})(实参)箭头函数add =(a,b)=>{    return a+b}console.log(add(3,4))

4.单体模式

let person={                        name:'alex',    age:18,    fav(){        console.log(this)        console.log(this.name);        setInterval(()=>{            console.log(this.age++);        },2000000)    }}person.fav();               //字面量方式创建对象let person2={    name:'alex2',    age:18,    fav:()=>{        console.log(this)    }}person2.fav() 对象单体模式class Student{    constructor(name,age){        this.name = name;        this.age = age;    }    fav(){        console.log(this)    }}let s17 = new Student('alex',18)s17.fav()

 5.指令系统

        
     
                {
    { message }}        
     
                
     
          
      
现在你看到我了
        
     
                
     
            
      
                
       
                    {
    { todo.text }}                
            
      
        
     
                
     
            
      
{
   { message }}
            
      逆转消息        
     
                
     
            
      
{
   { message }}
            
              
     
                    

 6.双向数据绑定 : v-model

7.组件

let bus=new Vue({})let Vpingxing=Vue.component('Vpingxing',{    data(){        return{                    }    },     methods:{                 //和 Vheader为平行组件之间的传值，bus为媒介        clickhandler(){            bus.$emit('myBus','alex')                    }              //传值流程：Vpingxing-->bus-->Vheader    },    template:`
     
      我是平行组件        
      我是平行组件    
     
`})let Vheader=Vue.component('Vheader',{       //全局组件    data(){        return{                    }    },    methods:{                             //methods：触发后执行事件        handlerClick(){               //触发后将数据传给            bus.$on('myBus',(val)=>{          //接收组件中的传过来的值，他们两个为平行组件   　　　　　　　this.val=val;　　　　　　　}；            console.log('-->1111')            this.$emit('handler','alex')     //$emit：传值 ，        },                   //handler是下面父组件中定义的触发事件    }, 　　created(){                 // 组件创建完成。 钩子函数 ，组件创建就触发钩子函数中的方法　　},    props:['myName'],                    //’props‘ ：子组件，用于接收父组件的数据    components:{                                         },    template:`
     
        
      
       等春嫁给深秋以后
      
        
      
       {
   { myName }} 
      
        
      触发组件的按钮    
     
`         //点击后触发methods中的'handlerClick' 事件})let App={                          //声明组件    data(){        return{            name:'超哥'        }    },    methods:{        clickHandler(name){            alert(`来啦${ name }`);            this.name = name        },    },    template:`
     
            
      
       最后被你看通透
      
        
              
      
       等我把脸皮磨厚
      
　　　　 
          
     
`}new Vue({    el:'#app',    data(){        return {                    }    },    methods:{            },    components:{                       //子组件挂载        App    },    template:`
     `      //用子组件})

 Vue的生命周期