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

 更新时间:2017年08月28日 14:18:44   作者:fyk曩昔  
这篇文章主要介绍了vue2.0移除或更改的一些东西,vue2.0 移除了index和key,具体内容详情大家参考下本文

一、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的环境下虽然可以运行

但是在控制台却出错了

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

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

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

得到的页面效果如下

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

二、$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环境下是获取不了的

我们再来使用$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>

这种方法是可以获取到的

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

<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的元素

关于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>

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

四、结语

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

相关文章

  • Antd下拉选择,自动匹配功能的实现

    Antd下拉选择,自动匹配功能的实现

    这篇文章主要介绍了Antd下拉选择,自动匹配功能的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue-devtools的安装与使用教程

    vue-devtools的安装与使用教程

    vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率,这篇文章主要介绍了vue-devtools的安装与使用教程,需要的朋友可以参考下
    2023-03-03
  • vue :style设置背景图片方式backgroundImage

    vue :style设置背景图片方式backgroundImage

    这篇文章主要介绍了vue :style设置背景图片方式backgroundImage,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue中瀑布流布局与图片加载优化的实现

    Vue中瀑布流布局与图片加载优化的实现

    本文主要介绍了Vue中瀑布流布局与图片加载优化的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • vue 行为验证码之滑动验证AJ-Captcha使用详解

    vue 行为验证码之滑动验证AJ-Captcha使用详解

    这篇文章主要介绍了vue 行为验证码之滑动验证AJ-Captcha使用详解,AJ-Captcha不需要npm安装,只需要将组件 verifition复制到所使用的components目录下,本文给大家详细讲解,需要的朋友可以参考下
    2023-05-05
  • vue 3 中watch 和watchEffect 的新用法

    vue 3 中watch 和watchEffect 的新用法

    本篇文章主要通过 Options API 和 Composition API 对比 watch 的使用方法,让大家快速掌握 vue3 中 watch 新用法,需要的朋友可以参考一下哦,希望对大家有所帮助
    2021-11-11
  • Vue数据驱动模拟实现1

    Vue数据驱动模拟实现1

    这篇文章主要介绍了Vue数据驱动模拟实现的相关资料,允许采用简洁的模板语法声明式的将数据渲染进DOM,且数据与DOM绑定在一起,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • vue 强制组件重新渲染(重置)的两种方案

    vue 强制组件重新渲染(重置)的两种方案

    今天小编就为大家分享一篇vue 强制组件重新渲染(重置)的两种方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue.js设计与实现无限递归学习总结

    Vue.js设计与实现无限递归学习总结

    这篇文章主要为大家介绍了Vue.js设计与实现无限递归学习总结,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • vue 退出登录 清除localStorage的问题

    vue 退出登录 清除localStorage的问题

    这篇文章主要介绍了vue 退出登录 清除localStorage的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12

最新评论