Vue.js2.0中的變化小結(jié)

更新時間：2017年10月24日 11:40:51 作者：星馬豪

最近小編在學(xué)習(xí)vue.js ,發(fā)現(xiàn)里面有好多好玩的東東，今天小編給大家分享Vue.js2.0中的變化，小編會在日后給大家持續(xù)更新的，感興趣的朋友參考下吧

最近自己在學(xué)習(xí)Vue.js，在看一些課程的時候可能Vue更新太塊了導(dǎo)致課程所講知識和現(xiàn)在Vue的版本不符，從而報錯，我會在以后的帖子持續(xù)更新Vue的變化與更新，大家也可以一起交流，共同監(jiān)督學(xué)習(xí)！

1.關(guān)于Vue中$index獲取索引值已經(jīng)取消，多用于多個元素的操作，像ul中的li，通過v-for來建立多個li，如果對于其中的某個或者一些li操作的話，需要使用到索引值，用法如下;

<template>
 <div class="hello">
  <h1>{{ msg }}</h1>
  <button v-on:click="reverse">點(diǎn)擊</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>
 </div>
</template>
<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App',
   todos: [
    {text:'我是一開始就有的哦!'}
   ],
   newtodo: ''
  }
 },
 methods: {
  reverse: function(){
   this.msg = this.msg.split('').reverse().join('')
  },
  add: function(){
   var text = this.newtodo.trim();
   if(text){
    this.todos.push({text:text});
    this.newtodo = ''
   }
  },
  remove: function(index){
   this.todos.splice(index,1)
  }
 }
}
</script>

這是我自己組建的一個片段，重點(diǎn)在于index的使用。

總結(jié)

以上所述是小編給大家介紹的Vue.js2.0中的變化，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

vue.js 1.x與2.0中js實(shí)時監(jiān)聽input值的變化

相關(guān)文章

Vue Mixins混入介紹與使用
如果我們在每個組件中去重復(fù)定義這些屬性和方法會使得項(xiàng)目出現(xiàn)代碼冗余并提高了維護(hù)難度，針對這種情況官方提供了Mixins特性，這時使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧
2023-02-02
Vue收集表單數(shù)據(jù)和過濾器總結(jié)
這篇文章主要介紹了Vue收集表單數(shù)據(jù)和過濾器的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-05-05
vue3-pinia-ts項(xiàng)目中的使用示例詳解
這篇文章主要介紹了vue3-pinia-ts項(xiàng)目中的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-08-08
基于Vue的商品主圖放大鏡方案詳解
這篇文章主要介紹了基于 Vue 的商品主圖放大鏡方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
使用Vue3+ts?開發(fā)ProTable源碼教程示例
這篇文章主要為大家介紹了使用Vue3+ts?開發(fā)ProTable源碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
Vue中Element?UI組件庫使用方法詳解
ElementUI是Vue的UI框架,提供了豐富的組件,方便快速開發(fā)頁面,本文詳細(xì)介紹了ElementUI的安裝、使用方法以及常見組件的說明,包括基礎(chǔ)組件、布局組件、選擇框組件、輸入框組件、下拉框組件等,需要的朋友可以參考下
2024-11-11
解決vue 局部過濾器獲取不到this的問題
這篇文章主要介紹了解決vue 局部過濾器獲取不到this的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-01-01
Vue中數(shù)組與對象修改觸發(fā)頁面更新的機(jī)制與原理解析
這篇文章主要介紹了Vue中關(guān)于數(shù)組與對象修改觸發(fā)頁面更新的機(jī)制與原理簡析,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-12-12
vue中data改變后讓視圖同步更新的方法
這篇文章主要給大家介紹了關(guān)于vue中data改變后讓視圖同步更新的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
Vue中component標(biāo)簽解決項(xiàng)目組件化操作
這篇文章主要介紹了Vue中component標(biāo)簽解決項(xiàng)目組件化操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09