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">點擊</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>
這是我自己組建的一個片段，重點在于index的使用。
總結(jié)
以上所述是小編給大家介紹的Vue.js2.0中的變化，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了vue按需引入element Transfer 穿梭框的相關(guān)資料,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了VUE表達式{{}}中如何拼接字符問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了VUE3頁面div如何點擊改變樣式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3中實現(xiàn)拖拽排序代碼示例(vue-draggable-next的使用)
在Vue3中使用拖拽功能時應(yīng)選用vue-draggable-next插件,傳統(tǒng)的draggable插件不兼容Vue3,可能導(dǎo)致TypeError錯誤,安裝后,需在項目中引入并使用,具體步驟包括安裝插件、引入使用、查看效果和相關(guān)說明,需要的朋友可以參考下2024-09-09
Avue自定義formslot調(diào)用rules自定義規(guī)則方式
在Avue框架中,使用formslot自定義表格列時可能會遇到無法調(diào)用Avue的自定義校驗規(guī)則的問題,這通常發(fā)生在嘗試通過formslot自定義設(shè)置列的場景中,解決這一問題的一個有效方法是將自定義列與Avue的校驗規(guī)則通過特定方式連接起來2024-10-10
這篇文章主要介紹了Vue中自定義一個鈴聲提示音組件的實現(xiàn)以及使用方法，文中的示例代碼講解詳細，對我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下2022-01-01
這篇文章主要介紹了如何構(gòu)建一個Vue插件并生成npm包，幫助大家更好的理解和使用vue，方便以后的開發(fā)，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了vue的路由動畫切換頁面無法讀取meta值的bug記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要給大家介紹了關(guān)于vue中實現(xiàn)打印功能的幾種方法,打印功能在實際開發(fā)中非常常見,通常我們需要將網(wǎng)頁中的某一部分或整個網(wǎng)頁打印出來,需要的朋友可以參考下2023-09-09
Electron+vite+vuetify項目搭建的流程和方法
最近想用Electron來進行跨平臺的桌面應(yīng)用開發(fā),同時想用vuetify作為組件,于是想搭建一個這樣的開發(fā)環(huán)境,這里分享下Electron+vite+vuetify項目搭建的流程和方法,感興趣的朋友一起看看吧2024-06-06