一、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>

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

四、结语

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

# vue  # 2.0  # 移除  # index  # key  # 浅谈Vue2.0中v-for迭代语法的变化(key、index)  # 详解为什么Vue中不要用index作为key(diff算法)  # vue中使用v-for时为什么不能用index作为key  # Vue 中为什么不推荐用index 做 key属性值  # Vue中为什么不推荐用index做key详解  # 在vue中为什么不能用index作为key  # 这两个  # 试试看  # 我在  # 是这样  # 这种方法  # 先来  # 这是  # 他们的  # 文档  # 注册时间  # 但是在  # 我还  # 是有  # 有可能  # 就有  # 是怎么  # 还不  # 很多人  # 有一种  # 其他的 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 独立制作一个网站多少钱,建立网站需要花多少钱？  JS经典正则表达式笔试题汇总  如何用PHP快速搭建高效网站？分步指南  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  Laravel控制器是什么_Laravel MVC架构中Controller的作用与实践  Laravel中DTO是什么概念_在Laravel项目中使用数据传输对象(DTO)  SQL查询语句优化的实用方法总结  Laravel请求验证怎么写_Laravel Validator自定义表单验证规则教程  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  海南网站制作公司有哪些,海口网是哪家的？  在线制作视频网站免费,都有哪些好的动漫网站？  JS中页面与页面之间超链接跳转中文乱码问题的解决办法  java ZXing生成二维码及条码实例分享  Laravel如何实现用户角色和权限系统_Laravel角色权限管理机制  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  如何在企业微信快速生成手机电脑官网？  公司门户网站制作流程,华为官网怎么做？  青岛网站建设如何选择本地服务器？  Android中AutoCompleteTextView自动提示  PHP 实现电台节目表的智能时间匹配与今日/明日轮播逻辑  如何有效防御Web建站篡改攻击？  javascript中的try catch异常捕获机制用法分析  浅析上传头像示例及其注意事项  中山网站推广排名,中山信息港登录入口？  ,网页ppt怎么弄成自己的ppt？  Laravel路由Route怎么设置_Laravel基础路由定义与参数传递规则【详解】  如何快速选择适合个人网站的云服务器配置？  如何挑选高效建站主机与优质域名？  ChatGPT回答中断怎么办 引导AI继续输出完整内容的方法  百度输入法全感官ai怎么关 百度输入法全感官皮肤关闭  HTML5打空格有哪些误区_新手常犯的空格使用错误【技巧】  Gemini手机端怎么发图片_Gemini手机端发图方法【步骤】  微信小程序 wx.uploadFile无法上传解决办法  头像制作网站在线观看,除了站酷，还有哪些比较好的设计网站？  Laravel如何使用Vite进行前端资源打包？（配置示例）  jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】  宙斯浏览器文件分类查看教程 快速筛选视频文档与图片方法  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲  Laravel API资源(Resource)怎么用_格式化Laravel API响应的最佳实践  Python文件异常处理策略_健壮性说明【指导】  Laravel中间件如何使用_Laravel自定义中间件实现权限控制  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  Win11怎么查看显卡温度 Win11任务管理器查看GPU温度【技巧】  深圳网站制作的公司有哪些,dido官方网站？  如何在建站宝盒中设置产品搜索功能？  Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  如何确保FTP站点访问权限与数据传输安全？  Laravel如何记录自定义日志？（Log频道配置）