Vue之Todolist案例和ES6语法

最新推荐文章于 2022-12-13 10:27:07 发布

IT之一小佬

最新推荐文章于 2022-12-13 10:27:07 发布

阅读量333

点赞数

分类专栏： Vue 文章标签： vue javascript js

本文链接：https://blog.csdn.net/weixin_44799217/article/details/118567696

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

2.7 Todolist案例

2.7.1 准备工作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
   <input type="text"> <button>添加</button>
   <hr/>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
   </ul>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
      items:['学习Vue','学习Django基础','学习Django前台'],
  },
  methods:{

  }
})
</script>
</html>

2.7.2 列表数据渲染

 <ul>
     <li v-for="item in items">{{item}}</li>
 </ul>

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

<body>
<div id="app">
   <input type="text" v-model="newitem"> <button @click="addNetItem">添加</button>
   <hr/>
   <ul>
     <li v-for="item in items">{{item}}</li>
   </ul>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
      items:['学习Vue','学习Django基础','学习Django前台'],
      newitem:'',
  },
  methods:{
      addNetItem:function(){
        this.items.push(this.newitem);
        this.newitem='';
      }
  }
})
</script>
</html>

2.7.4 实现删除功能

<div id="app">
   <input type="text" v-model="newitem"> <button @click="addNetItem">添加</button>
   <hr/>
   <ul>
     <li v-for="(item,index) in items">
      <span>{{item}}</span> 
      <a href="javascript:;" @click="deleteItem(index)">删除</a>
     </li>
   </ul>
</div>
</body>
<script type="text/javascript">
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)
      }
  }
})
</script>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
   <input type="text" v-model="newitem"> <button @click="addNetItem">添加</button>
   <hr/>
   <ul>
     <li v-for="(item,index) in items">
     <a href="javascript:;" @click="upItem(index)">↑</a>
      <span>{{item}}</span> 
      <a href="javascript:;" @click="downItem(index)">↓</a>
      <a href="javascript:;" @click="deleteItem(index)">删除</a>
     </li>
   </ul>
</div>
</body>
<script type="text/javascript">
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);
      }
  }
})
</script>
</html>

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
- 数据或者属性更新之后

IT之一小佬

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue之Todolist案例和ES6语法

2.7 Todolist案例2.7.1 准备工作<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>&
复制链接

扫一扫

专栏目录