Vue.js2.0中的变化小结


Posted in Javascript onOctober 24, 2017

最近自己在学习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中的变化,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
js数组的操作指南
Dec 28 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
浅析vue中的nextTick
Dec 28 Vue.js
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 #Javascript
分享vue.js devtools遇到一系列问题
Oct 24 #Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 #Javascript
Vue基于NUXT的SSR详解
Oct 24 #Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 #Javascript
使用js获取伪元素的content实例
Oct 24 #Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 #Javascript
You might like
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
PHP解决中文乱码
2017/04/28 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
Python二维码生成识别实例详解
2019/07/16 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
学雷锋活动总结范文
2014/04/25 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
安全员岗位职责
2015/02/10 职场文书
学术会议通知
2015/04/15 职场文书
无保留意见审计报告
2015/06/05 职场文书
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android