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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
谈谈JS中的!!
Dec 07 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
vue.js实现备忘录demo
Jun 26 Javascript
如何使用原生Js实现随机点名详解
Jan 06 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 中文处理技巧
2010/04/25 PHP
destoon各类调用汇总
2014/06/20 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
即将毕业大学生自荐信
2014/01/24 职场文书
给老婆的婚前保证书
2014/02/01 职场文书
高二政治教学反思
2014/02/01 职场文书
海飞丝广告词
2014/03/20 职场文书
担保书格式及范文
2014/04/01 职场文书
财产公证书样本
2014/04/04 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
Python上下文管理器Content Manager
2021/06/26 Python
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js
Hive HQL支持2种查询语句风格
2022/06/25 数据库