最近自己在学习Vue.js，在看一些课程的时候可能Vue更新太块了导致课程所讲知识和现在Vue的版本不符，从而报错，我会在以后的帖子持续更新Vue的变化与更新，大家也可以一起交流，共同监督学习！
1.关于Vue中$index获取索引值已经取消，多用于多个元素的操作，像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的使用。
2.关于Vue中partial被取消的问题，这里可以用is来动态绑定组件
<body>
<div id="app">
<button v-on:click="change">变化</button>
<p>{{currentView}}{{msg}}</p>
</div>
<component v-bind:is="currentView"></component>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
currentView: 'hello',
msg: '星豪，欢迎来到Vue的世界！'
},
methods: {
change: function(){
var arr = ['hello','hi'];
var index = arr.indexOf(this.currentView);
if(index < 1){
this.currentView = arr[index + 1]
}else{
this.currentView = arr[0]
}
}
},
components: {
hello: {template: '<p>Hello</p>'},
hi: {template: '<p>你好</p>'}
}
})
</script>
在这里不可以用js中的index++来使索引值增加
3.关于Vue1.0中使用$set方法来更改数组的方法已经更改，下面例子是想改变数组中的第一个内容，之前写法是：
var vm = new Vue({
el: '#app',
data: {
items: [
{msg:'1'},
{msg:'2'},
{msg:'3'}
]
},
methods: {
yes: function(){
vm.items.$set(0,{
msg: '4'
})
}
}
})
现在写法：
var vm = new Vue({
el: '#app',
data: {
items: [
{msg:'1'},
{msg:'2'},
{msg:'3'}
]
},
methods: {
yes: function(){
vm.$set(vm.items[0],
'msg', '4'
)
}
}
})
4.关于Vue中之前的$remove方法已经移除，用this.items.indexOf(item)或者直接this.items(index)来获取被删除的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for中操作删除元素</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in items">
{{index}}.{{item.color}}
<button v-on:click="fn1(item)">vm.items.splice(index,1)</button>
<button v-on:click="fn2(index)">vm.items.splice(index,1)</button>
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
show: false,
items: [
{color: 'blue'},
{color: 'yellow'}
]
},
methods: {
fn1: function(item){
var index = this.items.indexOf(item);
if(index !== -1){
this.items.splice(index,1)
}
},
fn2: function(index){
this.items.splice(index,1)
}
}
})
</script>
</html>
5.Vue1.0中的$key已经被取消
6.在给select添加multiple属性只有，数据为数组形式，如果没有添加就是用字符串
<body>
<div id="app">
<select id="city" v-model="city">
<option value="beijing">beijing</option>
<option value="shanghai">shanghai</option>
<option value="guangzhou">guangzhou</option>
</select>
<br>
<span>City is:{{city}}</span>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
city: 'guangzhou'
}
})
</script>
<body>
<div id="app">
<select id="city" v-model="selected" multiple>
<option v-for="option in options" v-bind:value="option.text">{{option.value}}</option>
</select>
<br>
<span>Selected is:{{selected}}</span>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
selected: [],
options: [
{value:'beijing',text:'A'},
{value:'shanghai',text:'B'},
{value:'guangzhou',text:'C'}
]
}
})
</script>
7.在Vue2.0中replace: false已经被取消，因为现在组件总会取代被绑定的元素
8.现在Vue2.0中无法直接在非new出来的实例中使用el