vue2.0移除或更改的一些东西

一、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>
这种写法就有效果了,这是根据官方文档写的,实现之后效果是这样的

四、结语

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



更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362816.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VGG16等keras预训练权重文件的下载及本地存放

VGG16等keras预训练权重文件的下载&#xff1a; https://github.com/fchollet/deep-learning-models/releases/ .h5文件本地存放目录&#xff1a; Linux下是放在“~/.keras/models/”中 Win下则放在Python的“settings/.keras/models/”中 在anaconda on win中默认是&#xff1…

Java Keystore教程

目录 1.简介 2. SSL及其工作方式 3.私钥 4.公开证书 5.根证书 6.证书颁发机构 7.证书链 8.使用Java keytool的密钥库 9.密钥库命令 10.在Apache Tomcat上使用密钥库和自签名证书配置SSL 1.简介 我们谁没有去ebay&#xff0c;亚马逊买东西或他的个人银行帐户来检查。 您是否认为…

spring AOP源码分析(一)

spring AOP源码分析&#xff08;一&#xff09; 对于springAOP的源码分析&#xff0c;我打算分三部分来讲解&#xff1a;1.配置文件的解析&#xff0c;解析为BeanDefination和其他信息然后注册到BeanFactory中&#xff1b;2.为目标对象配置增强行为以及代理对象的生成&#xff…

异或前缀和,组合数学——cf1054D

/* 每个异或前缀和sum[i]只有两个值 区间异或和不为0&#xff0c;即两个不相等的前缀和 sum[i]的两个前缀和只要标记一个就可以了&#xff0c;为了去重只用map保存最小的那个来计数 最后统计相同的前缀和时&#xff0c;为了使相同的最小&#xff0c;每个map的值要平分 */ #inc…

elementUI之switch应用的坑

前言&#xff1a; 因为项目中用到了饿了么出品的element-ui这一套ui框架&#xff0c;所以很多地方都踩在了坑里&#xff0c;前面碰到了一些&#xff0c;今天着重聊一下switch这个组件。 首先switch接受Boolean类型的数据&#xff0c;莫非是true和false。 对switch进行赋值&a…

C# 反射机制(转)

1、 什么是反射2、 命名空间与装配件的关系3、 运行期得到类型信息有什么用4、 如何使用反射获取类型5、 如何根据类型来动态创建对象6、 如何获取方法以及动态调用方法7、 动态创建委托 1、什么是反射 Reflection&#xff0c;中文翻译为反射。 这是.Net中获取运…

《软件工程导论》课后习题解答

来源&#xff1a;https://blog.csdn.net/Rong_Toa/article/details/80771976 第一章 软件工程概论 1&#xff0e;什么是软件危机&#xff1f; 软件危机是指在计算机软件的开发和维护过程中所遇到的一系列严重问题。这些问题表现在以下几个方面&#xff1a; (1)用户对开发出的软…

attr和prop的区别以及在企业开发中应该如何抉择

attr和prop有很多相同的地方&#xff0c;比如都可以操作标签的属性节点&#xff0c;而且获取的时候都只可以获取到相同节点的第一个&#xff0c;例如这样&#xff1a; $(span).attr(class);和$(span).prop(class);都只能返回第一个span的class 同理做属性的修改和添加,删除也都…

从n个数里面找最大的两个数理论最少需要比较

答案是&#xff1a;nlogn-2 过程是这样的&#xff1a;甲乙比甲胜出&#xff0c;丙丁比丙胜出&#xff0c;最后甲丙比较&#xff0c;甲胜出。。。容易得出找出最大数为n-1次。现在开始找出第二大的数字&#xff1a;明显&#xff0c;第二大的数字&#xff0c;一定和甲进行过比较。…

Java抽象– ULTIMATE教程(PDF下载)

编者注 &#xff1a;在本文中&#xff0c;我们提供了Java教程中的全面抽象。 抽象发生在类级别的设计中&#xff0c;目的是隐藏实现API /设计/系统提供的功能的方式的实现复杂性&#xff0c;从某种意义上讲简化了访问底层实现的“接口”。 此过程可以在越来越“更高”的抽象层次…

Entity Data Model (EDM) 深入分析, Part 3

EntityClient 实体框架&#xff08;Entity Framework&#xff09;在ADO.NET 3.5 提供程序的基础上引入新的 ADO.NET 提供程序 EntityClient。Entity-Client 看上去与之前使用的 ADO.NET 提供程序非常类似&#xff0c;它将提供第一个抽象&#xff0c;可允许开发人员使用标准的 C…

用递归方式判断字符串是否是回文

题目要求&#xff1a;使用递归方式判断某个字串是否是回文&#xff08; palindrome &#xff09;回文”是指正着读、反着读都一样的句子。比如“我是谁是我” 设计思想&#xff1a;首先能实现可输出任意字符串&#xff0c;然后定义返回值数据类型&#xff0c;判断递归结束条件的…

Vue.js 相关知识(动画)

1. 简介 Vue 在插入、更新或移除 DOM 时&#xff0c;提供多种不同方式的过渡效果&#xff0c;并提供 transition 组件来实现动画效果&#xff08;用 transition 组件将需执行过渡效果的元素包裹&#xff09; 语法&#xff1a;<transition name””>元素或组件&#xff…

三个水桶等分8升水的问题

目录 智力题目答案问题分析程序代码&#xff08;PHP&#xff09;运行结果小结推荐阅读智力题目 有三个容积分别为3升、5升、8升的水桶&#xff0c;其中容积为8升的水桶中装满了水&#xff0c;容积为3升和容积为5升的水桶都是空的。三个水桶都没有刻度&#xff0c;现在需要将大水…

Maven Git发布

在开始这篇文章之前&#xff0c;我需要指出我在去年才开始认真地与Git合作 。 不幸的是&#xff0c;我从事的许多项目仍在使用SVN或CVS&#xff0c;但现在我终于开始使用Git了 。 在过去的几年中&#xff0c;我使用Maven Release Plugin完成了许多软件发行。 我仍然记得我花了…

sqlserver 多表更新

sqlserver 多表更新 update bi_user_organization set bi_user_organization.bi_organization_id b.id frombi_user_organization a, bi_organization_structure b where a.teamb.name 转载于:https://www.cnblogs.com/handsome1013/p/11594075.html

ASP.net Table 控件

功能&#xff1a;在Web页中创建通用表。 属性&#xff1a; 1、CellPadding属性&#xff1a;用于设置表中单元格的边框和内容之间的距离&#xff08;以像素为单位&#xff09;。默认为-1&#xff08;未设置&#xff09;。 2、CellSpacing属性&#xff1a;用于设置表中单元格之间…

JS 判断是否是手机端并跳转操作

JS 判断运行当前脚本的应用程序是否为手机端或者一些其他信息&#xff0c;在我的工作中遇到的不是十分频繁&#xff0c;被我的同事一问就给问住了&#xff0c;所以把之前找到的一些知识点整理出来&#xff0c;供大家参考&#xff0c;若哪里不对欢迎指出&#xff0c;我会及时的更…

使用拦截器分析Java EE应用程序的性能下降/提高

在开发具有某些性能要求的Java EE应用程序时&#xff0c;必须在每个发行版之前验证是否满足这些要求。 您可能会想到&#xff0c;哈德森的一项工作每天晚上在某些特定的硬件平台上执行一系列测试测量。 您可以检查已实现的时间并将它们与给定的要求进行比较。 如果测量值与要求…

子组件上下结构布局自适应父组件宽度高度

1、父级页面 <template><div><div class"parentDiv"><!-- gys-org-navigator 在这里是全局注册组件 --><gys-org-navigator ref"orgNavigator" :org-tree"orgTree" :org-id"orgId" :org-type"orgType…