vue应用

记录

最近根据zgnews仿写了一个网站。记录下主要难点

1. 轮播图
2. 组件传参
3. mockjs模拟数据
4. vue-router绑定点击事件@click.native,不加.native的话，事件就没有效果，坑了我好久。

<router-link :to="item.path" :exact="true" :aria-expanded="isExpanded(item) ? 'true' : 'false'"
                     v-if="item.path" @click.native="toggle(index, item)">

1.轮播图

			<el-carousel height="300px">
                <el-carousel-item v-for="(item,index) in lunbo" :key="index">
                  <img :src="item" alt="" style="width:100%;height:100%">
                  <!-- <div>{{index}}</div> -->
                </el-carousel-item>
              </el-carousel>

在这里用了按需导入element.根据文档进行传参，这里的参数主要是一个数组，数组的每一项为一个图片。
拿到后台数据中data的每一项的图片

 this.$http.get("/posts").then(res => {
      let arr=[]
      let new_indexs = res.data.posts;
      let arr_indexs = new_indexs.slice(0,5);
      arr_indexs.forEach(function(item){
        arr.push(item.icon)
      })
      this.lunbo = arr;
      
});

用了slice截取前5个，index从0到4的item.遍历数组每一项，并把每一项的icon放入新数组中，拿到后动态绑定在轮播图中便可。

2.组件

因为对组件没有很熟悉，只是用来封装为模板，后面的可复用性高，还没有绑定事件。
子组件

<template>
    
        <div class="tr" >
            <img :src="array.icon" alt="">
            <span>{{array.author}}</span>
            <span>{{array.title}}</span>
    </div>
</template>
<script>

export default {
    props:{array:Object}
}
</script>

props中的array必须要说明是对象，因为在模板中要渲染array的属性值，若是没有说明是对象，模板中渲染其属性值会报错，说xxx是undefined.
注意：子组件中props属性你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。
父组件，可以在用this.array访问array.

     	<div class="top">
          <my-sideTable v-for="(item,index) in res" :key="index" :array="item"></my-sideTable>
        </div>

3.用mockjs来模拟数据

vue-cli项目中如何使用
在项目中安装mockjs、axios（http请求库）
cnpm install mockjs axios --save
在项目中新建一个mock.js文件，用于定义接口返回的数据
在main.js引入mock.js
mock.js

const Mock = require('mockjs') // 获取mock对象
const Random = Mock.Random // 获取random对象，随机生成各种数据，具体请翻阅文档
const domain = 'http://mockjs.com/api' // 定义默认域名，随便写
const code = 200 // 返回的状态码

// 随机生成文章数据
const postData = req => {
  
  console.log(req) // 请求体，用于获取参数

  let posts = [] // 用于存放文章数据的数组
  
  for (let i = 0; i < 10; i++) {
    let post = {
      title: Random.csentence(10, 25), // 随机生成长度为10-25的标题
      icon: Random.dataImage('250x250', '文章icon'), // 随机生成大小为250x250的图片链接
      author: Random.cname(), // 随机生成名字
      date: Random.date() + ' ' + Random.time() // 随机生成年月日 + 时间
    }

    posts.push(post)
  }
  
  // 返回状态码和文章数据posts
  return {
    code,
    posts
  }
}

// 定义请求链接，类型，还有返回数据
Mock.mock(`${domain}/posts`, 'get', postData);

main.js

import Mock from './mock' // 刚刚手写的mock.js文件
import axios from 'axios' // axios http请求库

axios.defaults.baseURL = 'http://mockjs.com/api' // 设置默认请求的url
Vue.prototype.$http = axios

组件中

this.$http.get("/posts").then(res => {
  console.log(res);
});

请参照https://www.jianshu.com/p/aea89b5e6d33