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 相关文章推荐
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
JS中表单的使用小结
Jan 11 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 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
3种平台下安装php4经验点滴
2006/10/09 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
JQuery实现定时刷新功能代码
2017/05/09 jQuery
解决vue点击控制单个样式的问题
2018/09/05 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
python 默认参数问题的陷阱
2016/02/29 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
keras:model.compile损失函数的用法
2020/07/01 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
土木工程师岗位职责
2013/11/24 职场文书
校园活动宣传方案
2014/03/28 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
暑期培训心得体会
2014/09/02 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
学校教学工作总结2015
2015/05/19 职场文书