# vueproject

**Repository Path**: lyagit/vueproject

## Basic Information

- **Project Name**: vueproject
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-07-31
- **Last Updated**: 2021-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

##Vue课程实践小项目

##使用mint-ui 和 mui 


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


##改造tabbar为router-link

##设置路由高亮 方法：将默认的router-link-active 覆盖

##点击tabbar中的路由连接，展示对应的路由组件


##制作首页轮播图布局



##加载首页轮播图数据
1.获取数据， 使用vue-resource 来获取
2.使用vue-resource 的this.$http.get 获取数据
3.获取到的数据要保存到data 身上
4.使用v-for渲染每个item项


##改造九宫格区域的样式

##改造- 新闻咨询 路由连接

##新闻质询页面制作
1.绘制界面 可以是用mui 中的media-list
2.使用vue-resource获取数据
3.渲染真实数据

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

##实现新闻详情 的页面布局和数据渲染


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

##获取所有的评论数据显示到页面中


##实现点击加载更多评论的功能
1.为加载更多按钮，绑定点击事件，在实践中，请求下一页的数据
2.点击加载更多,让pageIndex++，然后重新调用this.getComments()方法，获取最新一夜的信息
3.为了防止新数据覆盖老数据的情况,我梦在点击加载更多的时候，每当获取到的新数据都凭借到老数据的后面，调用了数组的concat() 方法

##发表评论
1.把文本框做双向数据绑定
2. 未发表按钮绑定一个事件
3.校验评论内容是hi否为空，如果为空，则Toast提示用户评论内容不能为空
4.通过vue-resource 发送一个请求，把评论内容提交给服务器
5.当发表评论ok后，创新刷星列表，以查看最新得评论
    +如果调用getComments方法创新刷新评论得话可能只能得到最后一页得评论，前面几页得评论获取不到
    +拉我i一种思路：当评论成功后在客户端手动拼接一个罪行得对象，让后调用数组得unshift放大把罪行得评论最佳到data 中得 comments得开头