vue 初识(基础语法与数据驱动模型)

1.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的基本用法

2.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('') }}

v-text和v-html

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

    {{ msg }}
    

    

v-for 遍历列表

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

    
    
    
    




    

        
        

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

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

watch和computed

watch可以监听单个属性

    
    
    


    

        
{{ msg }}
        修改
    
    
    

计算属性 computed

监听多个属性

    
    
    



    
{{ myMsg }}
    修改

MVVM设计模式

数据驱动逻辑流程