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学习笔记(九) js对象 设计模式
Jun 19 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
深入探究node之Transform
Jul 20 Javascript
简单实现jQuery弹窗效果
Oct 30 jQuery
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
解决layUI的页面显示不全的问题
Sep 20 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
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
bootstrap flask登录页面编写实例
2016/11/01 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
浅谈vue首屏加载优化
2018/06/28 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
Python 除法小技巧
2008/09/06 Python
python封装对象实现时间效果
2020/04/23 Python
Python图算法实例分析
2016/08/13 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
python连接mongodb密码认证实例
2018/10/16 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
什么是Python包的循环导入
2020/09/08 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
Linux文件系统类型
2012/09/16 面试题
员工评语大全
2014/01/19 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
运动会稿件100字
2014/09/24 职场文书
中考学习决心书
2015/02/04 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
营运督导岗位职责
2015/04/10 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
PHP基本语法
2021/03/31 PHP
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
nginx rewrite功能使用场景分析
2022/05/30 Servers