Vue.js2.0中的变化（持续更新中）

2018-06-24 00:37:31来源：未知阅读 ()

最近自己在学习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已经被取消，因为现在组件总会取代被绑定的元素