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按需引入element Transfer 穿梭框

    vue按需引入element Transfer 穿梭框

    这篇文章主要介绍了vue按需引入element Transfer 穿梭框的相关资料,需要的朋友可以参考下
    2017-09-09
  • VUE表达式{{}}中如何拼接字符

    VUE表达式{{}}中如何拼接字符

    这篇文章主要介绍了VUE表达式{{}}中如何拼接字符问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • VUE3页面div如何点击改变样式

    VUE3页面div如何点击改变样式

    这篇文章主要介绍了VUE3页面div如何点击改变样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue3中实现拖拽排序代码示例(vue-draggable-next的使用)

    vue3中实现拖拽排序代码示例(vue-draggable-next的使用)

    在Vue3中使用拖拽功能时应选用vue-draggable-next插件,传统的draggable插件不兼容Vue3,可能导致TypeError错误,安装后,需在项目中引入并使用,具体步骤包括安装插件、引入使用、查看效果和相关说明,需要的朋友可以参考下
    2024-09-09
  • Avue自定义formslot调用rules自定义规则方式

    Avue自定义formslot调用rules自定义规则方式

    在Avue框架中,使用formslot自定义表格列时可能会遇到无法调用Avue的自定义校验规则的问题,这通常发生在尝试通过formslot自定义设置列的场景中,解决这一问题的一个有效方法是将自定义列与Avue的校验规则通过特定方式连接起来
    2024-10-10
  • Vue自定义铃声提示音组件的实现

    Vue自定义铃声提示音组件的实现

    这篇文章主要介绍了Vue中自定义一个铃声提示音组件的实现以及使用方法,文中的示例代码讲解详细,对我们学习Vue有一定帮助,需要的可以参考一下
    2022-01-01
  • 如何构建一个Vue插件并生成npm包

    如何构建一个Vue插件并生成npm包

    这篇文章主要介绍了如何构建一个Vue插件并生成npm包,帮助大家更好的理解和使用vue,方便以后的开发,感兴趣的朋友可以了解下
    2020-10-10
  • vue的路由动画切换页面无法读取meta值的bug记录

    vue的路由动画切换页面无法读取meta值的bug记录

    这篇文章主要介绍了vue的路由动画切换页面无法读取meta值的bug记录,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue中实现打印功能的几种方法示例

    vue中实现打印功能的几种方法示例

    这篇文章主要给大家介绍了关于vue中实现打印功能的几种方法,打印功能在实际开发中非常常见,通常我们需要将网页中的某一部分或整个网页打印出来,需要的朋友可以参考下
    2023-09-09
  • Electron+vite+vuetify项目搭建的流程和方法

    Electron+vite+vuetify项目搭建的流程和方法

    最近想用Electron来进行跨平台的桌面应用开发,同时想用vuetify作为组件,于是想搭建一个这样的开发环境,这里分享下Electron+vite+vuetify项目搭建的流程和方法,感兴趣的朋友一起看看吧
    2024-06-06

最新评论