品牌网站制作公司,公司网站建立教程,百度地图怎么放在网站上,FLASK做wiki网站一、vue2.0移除了$index和$key 虽然说现在很多文章说他们的代码是vue2.0版本的#xff0c;但是有一些仔细一看#xff0c;发现并不全是2.0版本#xff0c;有些语法还是1.0的版本#xff0c;比如这个$index,$key#xff0c;这两个压根就不是2.0的写法#xff0c;2.0早就把…一、vue2.0移除了$index和$key
虽然说现在很多文章说他们的代码是vue2.0版本的但是有一些仔细一看发现并不全是2.0版本有些语法还是1.0的版本比如这个$index,$key这两个压根就不是2.0的写法2.0早就把这两个给删除了我们先来看看之前的列表渲染是怎么写的template
div classhello
ul
li v-foritem 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 classhello
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 classhello
div classv-t v-el:v-t
button clickgetElement测试/button
/div
/div
/template
script
export default {
methods:{
getElement(){
let elementthis.$els.vT
console.log(element)
}
}
}
/script v-el用横杠写法在用$els的时候用驼峰写法我在2.8.2版本的vue环境下是获取不了的 我们再来使用$refs获取元素节点我们先用这种方法试试看 template
div classhello
div classv-t refvt
button clickgetElement测试/button
/div
/div
/template
script
export default {
methods:{
getElement(){
let elementthis.$refs.vt
console.log(element)
}
}
}
/script 这种方法是可以获取到的 接下来我们试试看这种写法 template
div classhello
div classv-t refv-t
button clickgetElement测试/button
/div
/div
/template
script
export default {
methods:{
getElement(){
let elementthis.$refs[v-t]
console.log(element)
}
}
}
/script 也是可以获取得到class为v-t的元素 关于ref注册时间的重要说明: 因为ref本身是作为渲染结果被创建的在初始渲染的时候你不能访问它们 - 它们还不存在$refs 也不是响应式的因此你不应该试图用它在模版中做数据绑定。----引用自vue.js官方文档 三、transition Vue 提供了 transition 的封装组件比如我们现在要实现一种效果点击一个按钮之后缓慢出现一个有背景颜色的div点击div里面的关闭按钮之后div缓慢消失。有一种写法是这样的template
div classhello
button clickshow开启/button
div classbox v-showthis.tf transitionfade
button clickhide关闭/button
/div
/div
/template
script
export default {
data(){
return{
tf:false
}
},
methods:{
show(){
this.tftrue
},
hide(){
this.tffalse
}
}
}
/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 classhello
button clickshow开启/button
transition
div classbox v-showthis.tf
button clickhide关闭/button
/div
/transition
/div
/template
script
export default {
data(){
return{
tf:false
}
},
methods:{
show(){
this.tftrue
},
hide(){
this.tffalse
}
}
}
/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
