Vue.js2.0中的变化小结

 更新时间:2017年10月24日 11:40:51   作者:星马豪  
最近小编在学习vue.js ,发现里面有好多好玩的东东,今天小编给大家分享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的使用。

总结

以上所述是小编给大家介绍的Vue.js2.0中的变化,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Vue Mixins混入介绍与使用

    Vue Mixins混入介绍与使用

    如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度,针对这种情况官方提供了Mixins特性,这时使用Vue mixins混入有很大好处,下面就介绍下Vue mixins混入使用方法,需要的朋友参考下吧
    2023-02-02
  • Vue收集表单数据和过滤器总结

    Vue收集表单数据和过滤器总结

    这篇文章主要介绍了Vue收集表单数据和过滤器的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05
  • vue3-pinia-ts项目中的使用示例详解

    vue3-pinia-ts项目中的使用示例详解

    这篇文章主要介绍了vue3-pinia-ts项目中的使用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • 基于Vue的商品主图放大镜方案详解

    基于Vue的商品主图放大镜方案详解

    这篇文章主要介绍了基于 Vue 的商品主图放大镜方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 使用Vue3+ts 开发ProTable源码教程示例

    使用Vue3+ts 开发ProTable源码教程示例

    这篇文章主要为大家介绍了使用Vue3+ts 开发ProTable源码示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue中Element UI组件库使用方法详解

    Vue中Element UI组件库使用方法详解

    ElementUI是Vue的UI框架,提供了丰富的组件,方便快速开发页面,本文详细介绍了ElementUI的安装、使用方法以及常见组件的说明,包括基础组件、布局组件、选择框组件、输入框组件、下拉框组件等,需要的朋友可以参考下
    2024-11-11
  • 解决vue 局部过滤器获取不到this的问题

    解决vue 局部过滤器获取不到this的问题

    这篇文章主要介绍了解决vue 局部过滤器获取不到this的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • Vue中数组与对象修改触发页面更新的机制与原理解析

    Vue中数组与对象修改触发页面更新的机制与原理解析

    这篇文章主要介绍了Vue中关于数组与对象修改触发页面更新的机制与原理简析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • vue中data改变后让视图同步更新的方法

    vue中data改变后让视图同步更新的方法

    这篇文章主要给大家介绍了关于vue中data改变后让视图同步更新的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • Vue中component标签解决项目组件化操作

    Vue中component标签解决项目组件化操作

    这篇文章主要介绍了Vue中component标签解决项目组件化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09

最新评论