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选择器特辑 详细小结
May 14 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
你或许不知道的一些npm实用技巧
Jul 04 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 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
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
Ajax基础知识详解
2017/02/17 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
用Python实现换行符转换的脚本的教程
2015/04/16 Python
Python实现简单登录验证
2016/04/13 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
2013的个人自我评价
2013/12/26 职场文书
学校招生宣传广告词
2014/03/19 职场文书
宣传普通话标语
2014/06/27 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python