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 相关文章推荐
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
基于jquery实现五星好评
Nov 18 jQuery
Vue开发环境跨域访问问题
Jan 22 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
使用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之第五天
2006/10/09 PHP
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
理解javascript正则表达式
2016/03/08 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
angular 服务随记小结
2019/05/06 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
python 构造三维全零数组的方法
2018/11/12 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
如何更优雅地写python代码
2019/07/02 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
python中def是做什么的
2020/06/10 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
副科级后备干部考察材料
2014/05/15 职场文书
实习单位证明范例
2014/11/17 职场文书
宇宙与人观后感
2015/06/05 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android