Sharing changes in Vue.js2.0

I have been learning Vue.js recently. When watching some courses, Vue may have been updated too quickly, causing the knowledge taught in the course to be inconsistent with the current Vue version, resulting in an error. This article mainly shares with you the Vue.js2.0 Summary of changes, hope it helps everyone.

1. Regarding $index in Vue, getting the index value has been cancelled. It is mostly used for operations on multiple elements, like li in ul. Multiple li's are created through v-for. If for one of them or For some li operations, you need to use the index value. The usage is as follows;

<template>
 <p class="hello">
  <h1>{{ msg }}</h1>
  <button v-on:click="reverse">点击</button>
  <input v-model="newtodo" v-on:keyup.enter="add">
  <ul>
   <li v-for="(todo,index) in todos">
    <span>{{todo.text}}</span>
    <button v-on:click="remove(index)">删除</button>
   </li>
  </ul>
 </p>
</template>
<script>
export default {
 name: &#39;HelloWorld&#39;,
 data () {
  return {
   msg: &#39;Welcome to Your Vue.js App&#39;,
   todos: [
    {text:&#39;我是一开始就有的哦!&#39;}
   ],
   newtodo: &#39;&#39;
  }
 },
 methods: {
  reverse: function(){
   this.msg = this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;)
  },
  add: function(){
   var text = this.newtodo.trim();
   if(text){
    this.todos.push({text:text});
    this.newtodo = &#39;&#39;
   }
  },
  remove: function(index){
   this.todos.splice(index,1)
  }
 }
}
</script>

This is a fragment I built myself, focusing on the use of index.

Related recommendations:

About Vue.js 2.5 new features introduction

vue.js makes a book management platform Detailed steps

detailed explanation of vue.js syntax and common instructions

The above is the detailed content of Sharing changes in Vue.js2.0. For more information, please follow other related articles on the PHP Chinese website!