你的位置:首页 > 软件开发 > Java > vue2.0移除或更改的一些东西

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

发布时间:2017-08-28 13:00:08
一、vue2.0移除了$index和$key虽然说现在很多文章说他们的代码是vue2.0版本的,但是有一些仔细一看,发现并不全是2.0版本,有些语法还是1.0的版本,比如这个$index,$key,这两个压根就不是2.0的写法,2.0早就把这两个给删除了,我们先来看看之前的列表渲 ...

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

一、vue2.0移除了$index和$key

虽然说现在很多文章说他们的代码是vue2.0版本的,但是有一些仔细一看,发现并不全是2.0版本,有些语法还是1.0的版本,比如这个$index,$key,这两个压根就不是2.0的写法,2.0早就把这两个给删除了,我们先来看看之前的列表渲染是怎么写的
<template> <div > <ul>  <li v-for="item in list">{{$index}}--{{$key}}</li> </ul> </div></template><script>export default { data(){ return{  list:['姓名','性别','年龄','语文','数学','英语','总分'] } }}</script>
这种写法在2.0的环境下虽然可以运行
vue2.0移除或更改的一些东西但是在控制台却出错了vue2.0移除或更改的一些东西$index和$key没有定义,而且在页面上也没有渲染出这两个东西的效果,$index是索引,$key是键值vue2.0移除或更改的一些东西在vue2.0中,这种写法改为了
<template> <div > <ul>  <li v-for="(index,item) in list">{{index}}--{{item}}</li> </ul> </div></template>
得到的页面效果如下vue2.0移除或更改的一些东西当然,这个问题有很多人写博客提到过,我这里就汇总一下

二、$refs和$els

我在vue2.8.2的版本下使用$refs和$els获取元素的时候,出现了一些问题,当然可能不止是2.8.2版本,其他的版本我还没试过,如果有跟我相同的问题的话可以试试看这种方法。我们先来使用$els
<template> <div > <div 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移除或更改的一些东西我们再来使用$refs获取元素节点,我们先用这种方法试试看
<template> <div > <div 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移除或更改的一些东西接下来我们试试看这种写法
<template> <div > <div 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移除或更改的一些东西
关于ref注册时间的重要说明: 因为ref本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模版中做数据绑定。----引用自vue.js官方文档

三、transition

Vue 提供了 transition 的封装组件,比如我们现在要实现一种效果:点击一个按钮之后,缓慢出现一个有背景颜色的div,点击div里面的关闭按钮之后,div缓慢消失。有一种写法是这样的
<template> <div > <button @click="show">开启</button> <div 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 > <button @click="show">开启</button> <transition>  <div 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移除或更改的一些东西

四、结语

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

原标题:vue2.0移除或更改的一些东西

关键词:VUE

VUE
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。