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

四、结语

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

vue2.0移除或更改的一些东西的更多相关文章

  1. vue2.0父子组件以及非父子组件通信传参详解

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  2. Vuex2.0+Vue2.0构建备忘录应用实践

    一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...

  3. vue2.0+koa2+mongodb实现注册登录

    前言 前段时间和公司一个由技术转产品的同事探讨他的职业道路,对我说了一句深以为然的话: "不要把自己禁锢在某一个领域,技术到产品的转变,首先就是思维上的转变.你一直做前端,数据的交互你只知道 ...

  4. vue2.0做移动端开发用到的相关插件和经验总结1.0

    最近在用vue2.0做微信公众号相关的前端开发,经过这次开发实践,现将项目中用到的相关比较实用的插件及遇到的相关问题进行整理,希望和大家共同交流...... cssrem:一个CSS值转REM的VSC ...

  5. 【数据售卖平台】—— Vue2.0入门学习项目爬坑

    前言:这个项目是我从零学习Vue2.0时用于练习基础知识的入门项目,包含了Vue2.0几乎所有项目都会用到的基础功能,是新手用来练手的好项目,这里温故知新对功能点做一个总结.github地址:http ...

  6. Vue2.0 基础入门

    前言:" 今生遇汝,何其幸哉:于我蒙昧之时遇到你,于我大雾初透之时爱上你,于我大智初醒之时沉沦你. " 官网: 介绍 - Vue.js (vuejs.org) 指令与修饰符 创建实 ...

  7. 项目vue2.0仿外卖APP(六)

    goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...

  8. 饿了么基于Vue2.0的通用组件开发之路(分享会记录)

    Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...

  9. vue2.0有哪些变化

    vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码 之前: <template> <h3>vue-router+vue-loader</h3 ...

随机推荐

  1. js根据子目录数目显示父级目录

    需求:<ul>中<li>数量为0,则不显示<ul>以及<b>:<div>中<ul>数量为0,则不显示<div> 1. ...

  2. Java使用TCP聊天程序

    前面使用了UDP进行通信的聊天程序 现在做一个用TCP进行通信的聊天程序 原理: ServerSocket Socket 1.开一个线程监听端口,准备接收消息 2.不断接受消息发送到目的端口 P.S. ...

  3. svn自动更新网站代码

    运行环境说明:svn的执行目录: /usr/bin/svnsvn版本库目录: /usr/local/nginx/html/svnrepos/coinhello (其中svnrepos是我各个项目版本库 ...

  4. Java & COM

  5. ASP.NET 中对大文件上传的简单处理

    在 ASP.NET 开发的过程中,文件上传往往使用自带的 FileUpload 控件,可是用过的人都知道,这个控件的局限性十分大,最大的问题就在于上传大文件时让开发者尤为的头疼,而且,上传时无法方便的 ...

  6. ERP设计之系统基础管理(BS)-日志模块设计(转载)

    原文地址:8.ERP设计之系统基础管理(BS)-日志模块设计作者:ShareERP 日志模块基本要素包括: 用户会话.登录.注销.模块加载/卸载.数据操作(增/删/改/审/弃/关等等).数据恢复.日志 ...

  7. linux下的动态链接库管理

    LD_LIBRARY_PATH Linux环境变量名,该环境变量主要用于指定查找共享库(动态链接库)时除了默认路径之外的其他路径.(该路径在默认路径之前查找) 移植程序时的经常碰到需要使用一些特定的动 ...

  8. gamemakerstudio:room_speed和image_speed

    room_speed是游戏步数,每秒多少步(步事件)image_speed是动画帧率room_speed变则整个游戏变慢image_speed变只是该object动画变慢 除了游戏全局加速减速,一般不 ...

  9. Thread类的sleep()方法和对象的wait()方法都可以让线程暂停执行,它们有什么区别? 线程的sleep()方法和yield()方法有什么区别?

    Thread类的sleep()方法和对象的wait()方法都可以让线程暂停执行,它们有什么区别? sleep()方法(休眠)是线程类(Thread)的静态方法,调用此方法会让当前线程暂停执行指定的时间 ...

  10. SQL Server ->> CLR存储过程枚举目录文件并返回结果集

    因工作需要写了个CLR存储过程枚举目录文件并返回结果集 using System; using System.IO; using System.Collections.Generic; using S ...