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 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
使用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
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
vue按需加载实例详解
2019/09/06 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
10条PHP编程习惯
2014/05/26 面试题
幼儿园大班新学期寄语
2014/01/18 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
nginx搭建NFS网络文件系统
2022/04/14 Servers