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 相关文章推荐
JavaScript获取GridView选择的行内容
Apr 14 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
vue中实现上传文件给后台实例详解
Aug 22 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 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
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
vue-cli3单页构建大型项目方案
2020/04/07 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
Python算法之图的遍历
2017/11/16 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
python word转pdf代码实例
2019/08/16 Python
python yield关键词案例测试
2019/10/15 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
如何在sublime编辑器中安装python
2020/05/20 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
秋季校运会广播稿100字
2014/09/18 职场文书