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


Posted in Javascript onAugust 28, 2017

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

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

但是在控制台却出错了

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

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

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

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

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

得到的页面效果如下

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

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

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

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

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

这种方法是可以获取到的

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

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

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

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

关于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移除或更改的一些东西(移除index key)

四、结语

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

Javascript 相关文章推荐
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
JS实现简易留言板增删功能
Feb 08 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
使用js获取身份证年龄的示例代码
Dec 11 Javascript
Vue实现省市区三级联动
Dec 27 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 #Javascript
JS实现图片手风琴效果
Apr 17 #Javascript
vue服务端渲染的实例代码
Aug 28 #Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 #jQuery
使用react-router4.0实现重定向和404功能的方法
Aug 28 #Javascript
vue.js路由跳转详解
Aug 28 #Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 #jQuery
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
python logging 日志的级别调整方式
2020/02/21 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
团员学习总结的自我评价范文
2013/10/14 职场文书
医院节能减排方案
2014/06/13 职场文书
学校消防安全责任书
2014/07/23 职场文书
家具商场的活动方案
2014/08/16 职场文书
社区两委对照检查材料
2014/08/23 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
依法行政工作汇报
2014/10/28 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python