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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
Java中Timer的用法详解
Oct 21 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
React.js组件实现拖拽排序组件功能过程解析
Apr 27 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 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中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
jquery.validate使用详解
2016/06/02 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
使用python解析xml成对应的html示例分享
2014/04/02 Python
Python合并多个装饰器小技巧
2015/04/28 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
高中语文教学反思
2014/01/16 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
学习型班组申报材料
2014/05/31 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
同学毕业留言寄语
2015/02/27 职场文书
转正申请报告格式
2015/05/15 职场文书
职工宿舍管理制度
2015/08/05 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
mysql主从复制的实现步骤
2021/10/24 MySQL
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL