Vue之Todolist案例和ES6语法

2.7 Todolist案例

2.7.1 准备工作

    
    
    
    



    添加
   
   

     
1
     
2
     
3
   



var app = new Vue({
  el: '#app',
  data: {
      items:['学习Vue','学习Django基础','学习Django前台'],
  },
  methods:{

  }
})

2.7.2 列表数据渲染

 

     
{{item}}
 

2.7.3 绑定数据能够添加到列表中

    添加
   
   

     
{{item}}
   



var app = new Vue({
  el: '#app',
  data: {
      items:['学习Vue','学习Django基础','学习Django前台'],
      newitem:'',
  },
  methods:{
      addNetItem:function(){
        this.items.push(this.newitem);
        this.newitem='';
      }
  }
})

2.7.4 实现删除功能

    添加
   
   

     

      {{item}} 
      删除
     
   



var app = new Vue({
  el: '#app',
  data: {
      items:['学习Vue','学习Django基础','学习Django前台'],
      newitem:'',
  },
  methods:{
      addNetItem:function(){
        this.items.push(this.newitem);
        this.newitem='';
      },
      deleteItem:function(index){
        this.items.splice(index,1)
      }
  }
})

2.7.5 添加移动按钮,实现移动功能

    
    
    
    



    添加
   
   

     

     ↑
      {{item}} 
      ↓
      删除
     
   



var app = new Vue({
  el: '#app',
  data: {
      items:['学习Vue','学习Django基础','学习Django前台'],
      newitem:'',
  },
  methods:{
      addNetItem:function(){
        this.items.push(this.newitem);
        this.newitem='';
      },
      deleteItem:function(index){
        this.items.splice(index,1);
      },
      upItem:function(index){
          current=this.items[index];
          this.items.splice(index,1);
          this.items.splice(index-1,0,current);
      },
      downItem:function(index){
          current=this.items[index];
          this.items.splice(index,1);
          this.items.splice(index+1,0,current);
      }
  }
})

2.8 ES6语法

ES6标准入门:http://caibaojian.com/es6/

2.8.1 ES6语法介绍

ES6是JavaScript语言的新版本，它也可以叫做ES2015，之前学习的JavaScript属于ES5，ES6在它的基础上增加了一些语法，ES6是未来JavaScript的趋势，而且vue组件开发中会使用很多的ES6的语法，所以掌握这些常用的ES6语法是必须的。

2.8.2 变量声明

var:它是用来声明变量的。如果在方法中声明，则为局部变量；如果在全局中声明，则为全局变量。

var num=10

变量一定要在声明后使用，否则报错

let:ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
  let a = 10;
  var b = 1;
}

上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

for循环的计数器，就很合适使用let命令。

for (let i = 0; i < 10; i++) {}
计数器i只在for循环体内有效，在循环体外引用就会报错。

const:const声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.1415;

2.8.3 Javascript对象的写法

ES5的写法

var person = { 
    name:'itcast',
    age:13,
    say:function(){
        alert('hello')
    }
}

person.say()

还可以写

var person = {};
person.name='itheima';
person.age=13;
person.say = function (){alert('hello')}
person.say();

ES6的写法

需要注意的是, 实现简写,有一个前提,必须变量名属性名一致

//定义变量
var name='itcast';
var age=13;
//创建对象
var person = {
    name,
    age,
    say:function(){
        alert('hello');
    }
};
//调用
person.say()

2.8.4 ES6的箭头函数

作用:

• 定义函数新的方式
• 改变this的指向

定义函数新的方式

//无参数,无返回值
var say = ()=> {
    alert('我是无参数无返回值函数');
}
//有参数,无返回值
var eat = food => {
    alert('我喜欢吃'+food);
}
//有参数,有返回值
var total = (num1,num2) => {
    return num1+num2;
}

改变this的指向

如果层级比较深的时候, this的指向就变成了window, 这时候就可以通过箭头函数解决这个指向的问题

var person = {
    name:'itcast',
    age:13,
    say:function(){
        alert('my name is ' + this.name);
    }
}
//调用
person.say()

2.9 实例生命周期

各个生命周期函数的作用

• beforeCreate
  • vm对象实例化之前
• created
  • vm对象实例化之后
• beforeMount
  • vm将作用标签之前
• mounted(重要时机初始化数据使用)
  • vm将作用标签之后
• beforeUpdate
  • 数据或者属性更新之前
• updated
  • 数据或者属性更新之后