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 중국어 웹사이트의 기타 관련 기사를 참조하세요!