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 相关文章推荐
基于jQuery的实现简单的分页控件
Oct 10 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
详解基于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
用cookies来跟踪识别用户
2006/10/09 PHP
php下使用strpos需要注意 === 运算符
2010/07/17 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
php微信支付接口开发程序
2016/08/02 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
jQuery bind事件使用详解
2011/05/05 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
python执行精确的小数计算方法
2019/01/21 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Python实现汇率转换操作
2020/05/03 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
Delphi CS笔试题
2014/01/04 面试题
经理秘书找工作求职信
2013/12/19 职场文书
研发工程师岗位职责
2014/04/28 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
使用springMVC所需要的pom配置
2021/09/15 Java/Android
JavaScript实现两个数组的交集
2022/03/25 Javascript