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 相关文章推荐
ExtJS的FieldSet的column列布局
Nov 20 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
vue使用openlayers实现移动点动画
Sep 24 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
详解基于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排序算法的复习和总结
2012/02/15 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
php中adodbzip类实例
2014/12/08 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
JS简单计算器实例
2015/01/20 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
深入理解Node内建模块和对象
2019/03/12 Javascript
Pyramid添加Middleware的方法实例
2013/11/27 Python
python fabric使用笔记
2015/05/09 Python
python中的编码知识整理汇总
2016/01/26 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
tornado+celery的简单使用详解
2019/12/21 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
Python代码注释规范代码实例解析
2020/08/14 Python
财务助理岗位职责
2013/11/10 职场文书
企业员工集体活动方案
2014/08/17 职场文书
保险公司演讲稿
2014/09/02 职场文书
营销与策划实训报告
2014/11/05 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
工作自我推荐信范文
2015/03/25 职场文书
物业管理交接协议书
2016/03/24 职场文书
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript