vue笔记(1)

最近的项目用了vue2.0,备忘一些关键用法。这是第一篇,需求为展示一堆带有各自内容的卡牌,鼠标在卡牌上悬停时展示文字细节,点击时切换vue-router,所有数据在初始化时通过数组获取。本篇主要内容为v-for实现卡牌渲染,包括图片、文字绑定,针对特定卡片进行css特效选择等等。

效果展示

cards

需求切分

  1. 数据格式为json,在data中输出

    1
    2
    3
    4
    5
    6
    caseList:[{
    "link":"/taxi",
    "text":"Taxi tickets recognization --- quickly find out date, distance, price and so on. ",
    "title":"CV",
    "img":"../assets/taxi-icon.png",
    }]
  2. 使用v-for实现数组元素的循环渲染卡牌

    1
    2
    3
    4
    5
    6
    <ul>
    <li v-for="(item,index) in caseList" :key="index">
    <div><img :src=item.img alt="">{{item.text}}</div>
    <div class="des">{{item.title}}</div>
    </li>
    </ul>

    这个时候遇到一个问题,浏览器中图片并没有加载出来。
    我首先检查了一下相对路径没有问题,然后想到当把图片硬编码在html中时,webpack打包会用loader打包图片,这样图片的位置就改变了,所以需要在加载图片数据时加入require,这样图片就能展示出来了。
    修改如下:

    1
    "img":require("../assets/taxi-icon.png")
  3. 点击卡牌跳转页面
    使用router来实现,router中也可以直接修改tag属性

    1
    <router-link :to=item.link></router-link>
  4. 鼠标悬停在卡牌上方时出现特效
    这里将mouseentermouseleave配合使用,通过改变DOM元素class的方式实现效果。

    1
    2
    3
    4
    5
     <li @mouseenter="enterCase" 
    @mouseleave="leaveCase"
    v-for="(item,index) in caseList">

    <div v-bind:class="[isHoverCase ? 'img-change' : 'img-wrap' ]">
    </li>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    data () {
    return {
    isHoverCase:false
    }
    },
    methods () {
    enterCase() {
    this.isHoverCase = true;
    },
    leaveCase() {
    this.isHoverCase = false;
    }
    }

    这时候出现了新的问题,当鼠标悬停在一张卡牌上时,所有的卡牌出现了相同的特效。
    思考了一下,这里我把isHoverCase设置成了所有卡牌都能访问的变量,当其中一个改变时,自然所有卡牌的class都改变了。
    查询资料后了解到设置index可以解决这个问题,于是给每一张卡牌添加了isHoverCase:false,在元素方法中添加@mouseleave="leaveCase(index)",元素class修改为v-bind:class="[item.isHoverCase ? 'img-change' : 'img-wrap' ]",完美解决。

完整代码

template写法如下:

1
2
3
4
5
6
<ul>
<li @mouseenter="enterCase(index)" @mouseleave="leaveCase(index)" v-for="(item,index) in caseList" :key="index"><router-link :to=item.link>
<div v-bind:class="[item.isHoverCase ? 'img-change' : 'img-wrap' ]"><img :src=item.img alt="">{{item.text}}</div>
<div class="des">{{item.title}}</div></router-link>
</li>
</ul>

javascrip写法t如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
export default {
data () {
return {
caseList:[{
link:'/taxi',
text:'Taxi tickets recognization --- quickly find out date, distance, price and so on. ',
title:'CV',
img:require('../assets/taxi-icon.png'),
isHoverCase:false
},{
link:'/translate',
text:'Chinese-English translation --- use our dictionary to translate your sentences.',
title:'NLP',
img:require('../assets/translate-icon.png'),
isHoverCase:false
}],
}
},
methods: {
enterCase(index) {
this.caseList[index].isHoverCase = true;
},
leaveCase(index) {
this.caseList[index].isHoverCase = false;
}
}
}

debug遇到问题

在适配手机样式时出现了一个小问题,我需要将手机链接电脑后用ip进行访问,但是当我将vue-cli起的服务127.0.0.1:8080改成本机ip:8080时,出现网页无法访问的情况。
网页无法访问
查询资料后发现,需要在build/webpack.dev.conf.js中间修改host,将host:127.0.0.1修改为host:0.0.0.0,重启服务,通过ip可以正常访问。