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 相关文章推荐
js身份证验证超强脚本
Oct 26 Javascript
js中格式化日期时间型数据函数代码
Nov 08 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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
虫族 ZERG 概述
2020/03/14 星际争霸
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
php字符串操作常见问题小结
2016/10/11 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
angular多语言配置详解
2019/05/16 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
python 判断一个进程是否存在
2009/04/09 Python
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
《难忘的泼水节》教学反思
2014/02/27 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
2014年度考核工作总结
2014/12/24 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
浅谈Redis的几个过期策略
2021/05/27 Redis
Python的这些库,你知道多少?
2021/06/09 Python
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android