2、初始ES6及Vue

今日内容

es6的语法

let

特点：
1.局部作用域
2.不会存在变量提升
3.变量不能重复声明

const

特点： 
1.局部作用域 
2.不会存在变量提升 
3.不能重复声明，只声明常量 不可变的量

模板字符串

tab键上面的反引号 ${变量名}来插值
let name = '未来';
let str = `我是${name}`

箭头函数

function(){} === ()=>{} this的指向发生了改变

es6的类

原型 prototype 当前类的父类（继承性）
​

    class Person{
        constructor(name){
            this.name = name;
        }
        fav(){
        }           
    }
    Vue的基本用法

vue的介绍

前端有三大框架： 可以去github查看三个框架的 star星

框架	介绍
vue	尤雨溪,渐进式的JavaScript框架
react	Facebook公司，里面的高阶函数非常多，对初学者不用好

| angular | 谷歌公司，目前更新到6.0，学习angular得需要玩一下typescript
Vue angular2.0 3.0~6.0 React(高阶函数 es6)初学者不友好 |

vue的基本引入和创建

• 1.下载

  cdn方式下载

• 2.引包

• 3.实例化

  //2.实例化对象
  new Vue({
      el:'#app', //绑定那块地
      data:{
          //数据属性  种子
          msg:'黄瓜',
          person:{
              name:'wusir'
          },
          msg2:'hello Vue'
      }
  });

Vue的模板语法

可以插入任何你想插入的内容，除了if-else if-else用三元运算符代替

{{ msg }}
{{ 'hhahda' }}
{{ 1+1 }}
{{ {'name':'alex'} }}
{{ person.name }}
{{ 1>2? '真的': '假的' }}
{{ msg2.split('').reverse().join('') }}

Vue的指令系统之v-text和v-html**

v-text相当于innerText
v-html相当于innerHTML

Vue的指令系统之v-if和v-show

v-show 相当于 style.display

v-if和v-show的区别

记住：

v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-bind 和v-on

v-bind可以绑定标签中任何属性  
v-on 可以监听 js中所有事件

简写：
v-bind:src  等价于   :src
v-on:click 等价于 @click

    
    
    
    




    
   
    
    

     切换颜色
   
    
    

v-for 遍历列表

v-for可以遍历列表，也可以遍历对象
在使用vue的v-for指令的时候，一定要绑定key,避免vue帮咱们计算DOM

    
    
    
    




    

        
        

            
{{ item.id }} -- {{ item.name }} -- {{ item.age }}
        
    
    

        {{ key }}-----{{ value }}
    

MVVM设计模式

数据驱动逻辑流程

Typora中markdown图片相对路径设置

​ 文件-》偏好设置->