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