# VueStudy

**Repository Path**: weisuying/VueStudy

## Basic Information

- **Project Name**: VueStudy
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-06-10
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 这是一个 Vue的项目

## 创始时间 2020-6-10

### 编写人：小航
#### nice

## 用传统方式（命令行）把修改过后的代码上传到码云？？
1. git add .
2. git commit -m "提交信息"
3. git push

## 制作首页App组件
1. 完成 Header 区域，使用的是 Mint-UI 中的 Header 组件
2. 制作底部的 Tabbar 区域 使用的是 MUI 的 Tabbar.html
 + 在制作 购物车 小图标的时候 操作多一些：
 + 先把 扩展图标的 css 样式 拷贝到 项目中
 + 拷贝 扩展字体库 ttf 文件 到项目中
 + 为 购物车 小图标添加样式
3. 要在 中间区域放置一个 router-view 来展示路由匹配到的组件

## 改造t abbar为 router-link

## 设置路由高亮

## 点击tabbar中的路由链接,展示对应的路由组件

## 加载首页轮播图数据
1. 获取数据 使用 vue-resource

## 实现新闻资讯列表点击跳转到新闻详情
1. 把列表中的每一项改造为 router-link，同时,在跳转的时候应该提供唯一的Id标识符
2. 创建新闻详情的组件页面 NewsInfo.vue
3. 在路由模块中,将新闻详情的路由地址和组件页面对应起来

## 单独封装个comment . vue评论子组件
1. 先创建一个单独的comment .vue 组件模板
2. 在需要使用comment 组件的页面中,先手动导入comment 组件
 + `import comment from` ， `./comment.vue` 
3. 在父组件中,使用 `components` 属性,将刚才导入`comment`组件，注册为自己的子组件
4. 将注册子组件时候的,注册名称，以标签形式,在页面中引用即可

## 发表评论
1. 把文本框做双向绑定数据
2. 为发表按钮绑定一个事件
3. 判断评论内容是否为空 如果为空 则Toast提示用户 评论内容不能为空
4. 通过 vue-resource 发送一个请求 把评论内容提交给 服务器
5. 当发表评论ok后 重新刷新列表 以查看最新的评论


### 制作图片列表区域
1. 图片列表需要使用懒加载技术,我们可以使用 Mint-UI 提供的现成的组件`1azy-load`
2. 根据l`azy-load`的使用文档 ,尝试使用
3. 渲染图片列表数据