Vue.js2.0中的变化(持续更新中)

最近自己在学习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"&gt;&lt;/script&gt;
</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

本文由金沙官网线上发布于Web前端,转载请注明出处:Vue.js2.0中的变化(持续更新中)

您可能还会对下面的文章感兴趣: