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.jstree 增加节点的双击事件代码
Jul 27 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
JavaScript对象学习小结
Sep 02 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
7个好用的JavaScript技巧分享(译)
May 07 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
对vuex中store和$store的区别说明
Jul 24 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生成月历代码
2007/06/14 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
js实现旋转木马轮播图效果
2020/01/10 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
Django跨域请求CSRF的方法示例
2018/11/11 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
win10安装python3.6的常见问题
2020/07/01 Python
空气环保标语
2014/06/12 职场文书
防火标语大全
2014/10/06 职场文书
《秋思》教学反思
2016/02/23 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
千万级用户系统SQL调优实战分享
2022/03/03 MySQL
Python使用DFA算法过滤内容敏感词
2022/04/22 Python