Vue.js2.0 での変更の共有

最近 Vue.js を学習しているときに、いくつかのコースを視聴していたときに、Vue のアップデートがブロックされすぎていたため、コースで教えられている知識が現在の Vue バージョンと一致せず、主にエラーが発生しました。 Vue.js2.0 の変更点の概要を共有します。皆さんのお役に立てれば幸いです。

1. Vue の $index に関しては、ul の li のような複数の要素に対する操作に主に使用されます。は、インデックス値を使用する必要があります。使用法は次のとおりです。

<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>

これは、インデックスの使用に焦点を当てて、私が自分で構築したフラグメントです。

関連する推奨事項:

Vue.js 2.5 の新機能の紹介

vue.js 書籍管理プラットフォームを構築する詳細な手順

vue.js 構文と一般的な手順の詳細な説明

以上がVue.js2.0 での変更の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。