vue2.0移除或更改的一些东西(移除index key)


Posted in Javascript onAugust 28, 2017

一、vue2.0移除了$index和$key

虽然说现在很多文章说他们的代码是vue2.0版本的,但是有一些仔细一看,发现并不全是2.0版本,有些语法还是1.0的版本,比如这个$index,$key,这两个压根就不是2.0的写法,2.0早就把这两个给删除了,我们先来看看之前的列表渲染是怎么写的

<template>
 <div class="hello">
 <ul>
  <li v-for="item in list">{{$index}}--{{$key}}</li>
 </ul>
 </div>
</template>
<script>
export default {
 data(){
 return{
  list:['姓名','性别','年龄','语文','数学','英语','总分']
 }
 }
}
</script>

这种写法在2.0的环境下虽然可以运行

vue2.0移除或更改的一些东西(移除index key)

但是在控制台却出错了

vue2.0移除或更改的一些东西(移除index key)

$index和$key没有定义,而且在页面上也没有渲染出这两个东西的效果,$index是索引,$key是键值

vue2.0移除或更改的一些东西(移除index key)

在vue2.0中,这种写法改为了

<template>
 <div class="hello">
 <ul>
  <li v-for="(index,item) in list">{{index}}--{{item}}</li>
 </ul>
 </div>
</template>

得到的页面效果如下

vue2.0移除或更改的一些东西(移除index key)

当然,这个问题有很多人写博客提到过,我这里就汇总一下

二、$refs和$els

我在vue2.8.2的版本下使用$refs和$els获取元素的时候,出现了一些问题,当然可能不止是2.8.2版本,其他的版本我还没试过,如果有跟我相同的问题的话可以试试看这种方法。我们先来使用$els

<template>
 <div class="hello">
 <div class="v-t" v-el:v-t>
  <button @click="getElement">测试</button>
 </div>
 </div>
</template>
<script>
export default {
 methods:{
 getElement(){
  let element=this.$els.vT
  console.log(element)
 }
 }
}
</script>

v-el用横杠写法,在用$els的时候用驼峰写法,我在2.8.2版本的vue环境下是获取不了的

vue2.0移除或更改的一些东西(移除index key)

我们再来使用$refs获取元素节点,我们先用这种方法试试看

<template>
 <div class="hello">
 <div class="v-t" ref="vt">
  <button @click="getElement">测试</button>
 </div>
 </div>
</template>
<script>
export default {
 methods:{
 getElement(){
  let element=this.$refs.vt
  console.log(element)
 }
 }
}
</script>

这种方法是可以获取到的

vue2.0移除或更改的一些东西(移除index key)

接下来我们试试看这种写法

<template>
 <div class="hello">
 <div class="v-t" ref="v-t">
  <button @click="getElement">测试</button>
 </div>
 </div>
</template>
<script>
export default {
 methods:{
 getElement(){
  let element=this.$refs['v-t']
  console.log(element)
 }
 }
}
</script>

也是可以获取得到class为v-t的元素

vue2.0移除或更改的一些东西(移除index key)

关于ref注册时间的重要说明: 因为ref本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模版中做数据绑定。----引用自vue.js官方文档

三、transition

Vue 提供了 transition 的封装组件,比如我们现在要实现一种效果:点击一个按钮之后,缓慢出现一个有背景颜色的div,点击div里面的关闭按钮之后,div缓慢消失。有一种写法是这样的

<template>
 <div class="hello">
 <button @click="show">开启</button>
 <div class="box" v-show="this.tf" transition="fade">
  <button @click="hide">关闭</button>
 </div>
 </div>
</template>
<script>
export default {
 data(){
 return{
  tf:false
 } 
 },
 methods:{
 show(){
  this.tf=true
 },
 hide(){
  this.tf=false
 }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.box{
 width:177px;
 height:177px;
 transition:all 0.5s
}
.fade-transition{
 opacity:1;
 background:rgba(7,17,27,0.8);
}
.fade-enter,.fade-leave{
 opacity:0;
 background:rgba(7,17,27,0);
}
</style>

这种写法在有些版本运行是有效果的,但是在2.8.0版本下却没有效果,点击开启按钮之后只出现一个关闭按钮,现在我们更改一下写法

<template>
 <div class="hello">
 <button @click="show">开启</button>
 <transition>
  <div class="box" v-show="this.tf">
  <button @click="hide">关闭</button>
  </div>
 </transition>
 </div>
</template>
<script>
export default {
 data(){
 return{
  tf:false
 } 
 },
 methods:{
 show(){
  this.tf=true
 },
 hide(){
  this.tf=false
 }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.box{
 width:177px;
 height:177px;
 background:rgba(7,17,27,0.8);
}
.v-enter-active,.v-leave-active{
 transition: opacity 0.5s
} 
.v-enter,.v-leave-to{
 opacity: 0
}
</style>

这种写法就有效果了,这是根据官方文档写的,实现之后效果是这样的

vue2.0移除或更改的一些东西(移除index key)

四、结语

这是我最近学习遇到的一些小问题,有时候看视频,别人写的代码照着敲,我们敲完之后可能都还运行不了,这时候有可能是版本问题,框架更新了,语法不一样了等等。现在一些框架更新太快了,对我们这些码农来说确实挺考验的。

Javascript 相关文章推荐
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
javascript 用原型继承来实现对象系统
Mar 22 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
微信小程序icon组件使用详解
Jan 31 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
vue实现路由切换改变title功能
May 28 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 #Javascript
JS实现图片手风琴效果
Apr 17 #Javascript
vue服务端渲染的实例代码
Aug 28 #Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 #jQuery
使用react-router4.0实现重定向和404功能的方法
Aug 28 #Javascript
vue.js路由跳转详解
Aug 28 #Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 #jQuery
You might like
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
JS画线(实例代码)
2013/11/20 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
Python使用爬虫猜密码
2016/02/19 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
python实现邮件循环自动发件功能
2020/09/11 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
Wallis官网:英国女装零售商
2020/01/21 全球购物
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
逻辑链路控制协议
2016/10/01 面试题
事业单位请假制度
2014/01/13 职场文书
优质服务口号
2014/06/11 职场文书
环保志愿者活动方案
2014/08/14 职场文书
古诗之感恩老师
2019/10/24 职场文书