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 相关文章推荐
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
javascript实现文件拖拽事件
Mar 29 Javascript
javascript实现滚动条效果
Mar 24 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
Php注入点构造代码
2008/06/14 PHP
php 什么是PEAR?(第二篇)
2009/03/19 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
python 读入多行数据的实例
2018/04/19 Python
python如何生成各种随机分布图
2018/08/27 Python
python tkinter界面居中显示的方法
2018/10/11 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
Python解析多帧dicom数据详解
2020/01/13 Python
Tensorflow 多线程设置方式
2020/02/06 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
jupyter 添加不同内核的操作
2021/02/06 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
应用电子专业学生的自我评价
2013/10/16 职场文书
党的作风建设心得体会
2014/10/22 职场文书
nginx搭建NFS网络文件系统
2022/04/14 Servers
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers