# Vue

**Repository Path**: hou_yuan_zhen/Vue

## Basic Information

- **Project Name**: Vue
- **Description**: 我的vue
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-09-20
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


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

##改造 tabber 为 router-link

##设置路由高亮

##点击 tabber 中的路由链接，展示对应的路由组件
  1.创建路由组件
  2.在router.js中导入对应的路由组件
  
##制作首页轮播图布局

##加载首页轮播图数据
 1.获取数据，如何获取呢（使用 vue-resource）  
 2.使用vue-resource 的this.$http.get获取数据
 3.获取到的数据要保存到 data身上
 4.使用v-for 循环渲染，每个item项
 
 ##改造九宫格区域的样式
 
 ##改造 新闻咨询路由链接
 
 ## 新闻咨询 页面制作
 1.绘制界面，使用MUI中的media-list.html
 2.使用vue-resource获取数据
 3.渲染真实数据
 
 ##实现新闻资讯列表的点击跳转到新闻详情功能
 1.把列表中的每一项改造为 router-link ,同时跳转的时候应该提供一个唯一的id标识符
 2.创建新闻详情的组件页面，Newsinfo.vue
 3.在路由模块中，将新闻详情的路由地址和组件页面对应起来
 
 
 ##实现 新闻详情的页面布局
 
 ##单独封装一个comment.vue 评论子组件
 1.先创建一个单独的comment.vue组件模板
 2.在需要使用 comment 组件的页面中，先手动导入comment组件
 +import comment from './subcomments/comment.vue'
 3.在父组件中使用，'components'属性，将刚才到导入 comment组件，注册为自己的子组件
 4.将注册子组件时候的，注册名称，以标签的形式，在页面中引用起来
 
 
 ## 获取所有的评论数据显示到页面中
 
 ##实现点击加载更多评论功能
 1.为加载更多按钮，绑定点击事件，在事件中，请求下一页数据
 2.点击加载更多，让pageindex++,然后重新调用this.getComments()方法重新获取最新一页的数据
 3.为了防止新数据 覆盖老数据的情况，我们在点击加载更多的时候，每当获取到新数据，应该让老数据调用数组的concat方法，
 拼接上新数组
 
 ##发表评论
 1.把文本框做双向数据绑定
 2.为发表按钮绑定一个数据
 3.校验评论内容是否为空，如果为空就提示，用户评论内容不能为空
 4.通过v-resource 发送一个请求，把评论的内容提交给服务器
 5.当发表评论ok后，重新刷新列表，以查看最新的评论
   +如果调用getComments方法重新刷新评论列表的话，可能只能得到最后一页的评论，前几页的评论获取不到
   +换一种思路：当评论成功后，在客户端，手动拼接一个 最新的评论对象，然后 调用数组的unshift那个方法
   把最新的评论追加到data中newscommentslist数组的开始处；这样就能完美实现刷新
 
 
 ##改造图片分享链接 为路由链接并显示组件的页面
 1.在Homecontainer.vue中修改图文项的a链接为router-link to="/home/photolist"
 2.创建一个PhotoList.vue组件
 3.在router.js中引入PhotoList.vue组件，并设置路由
 
 ##绘制图片列表组件的列表结构并写样式
 1.顶部的滑动条制作
 2.制作底部的图片列表
 
 ##制作顶部互动条的坑们;
 1.需要借助于MUI中的 tab-top-webview-main.html
 2.需要把 slider区域的mui-fullscreen类去掉
 
 ##滑动条无法正常的触发滑动。通过检查官方文档，发现这是js组件，需要被初始化一下：
 +1.导入mui,js
 +2.调用官方提供的方式是初始化
 mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});

 4.我们在初始化滑动条的时候，导入mui.js ，但是控制台报错：
 mui.js:3493 Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
    at Function.Class.extend (mui.js:3493)
    at eval (mui.js:3710)
    at eval (mui.js:4636)
    at Object.gRey (bundle.js:3880)
    at __webpack_require__ (bundle.js:727)
    at fn (bundle.js:101)
    at eval (PhotoList.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options:7)
    at Object.xGM2 (bundle.js:4862)
    at __webpack_require__ (bundle.js:727)
    at fn (bundle.js:101)
    +经过我们合理的推测，可能是mui.js中用到了‘caller’ ,'callee',and 
    'arguments'东西，但是webpack打包好的 bundle.js中默认启用严格模式，
    所以这两者冲突了。
    解决方案：
    1.把mui.js中的非严格模式的代码改掉，但是不现实
    2.把webpack打包时候的严格模式禁用掉。
    使用第二种方式：
       +1.cnpm install babel-plugin-transform-remove-strict-mode  -D
       +2.1. 如果使用的是 .babelrc (Recommended)
                 .babelrc 文件添加配置
                  {
                   "plugins": ["transform-remove-strict-mode"]
                    }
     3.刚进入 图片分享页面的时候，滑动条无法正常工作，经过我们分析，如果要初始化滑动条，
     必须等dom元素加载完毕，所以我们把初始化滑动条的代码，搬到了mounted生命周期函数中
  ##解决Tabber的切换问题   
  修改css文件中所有的mui-tab-item为mui-tab-item-hou,
  注意：看自己引入的是什么css文件
  获取所有的分类，并渲染分类列表：
  ##制作图片列表区域
  1.图片列表使用懒加载技术，我们可以使用Mint-UI 提供的现成的组件，'lazy-load'
  2.根据lazy-load的使用文档，尝试使用
  3.渲染图片列表数据
  
 ##实现了图片列表的懒加载改造 和样式美化

 ##实现了 点击图片跳转到 图片详情页面
 1.改造li为router-link的时候注意，用tag指定渲染为"li"标签。
 2.创建photoinfo.vue,实现路由链接等
 
 ##实现 详情页面的布局和美化，同时获取数据和渲染页面
 
 ##实现图片详情的缩略图
 1.使用插件vue-preview这个缩略图插件
 2.获取到所有的图片列表，然后使用渲染数据
 3.注意：每个图片必须要有width,height属性
 
 ##绘制 商品列表 页面基本结构并美化
 
 
 ##尝试在手机上进行项目的预览和测试
 
 ##分析：为什么 商品评论中的轮播图那么丑
 1.首页的图片，它的宽和高，都是使用了100%的宽度
 2.商品详情的页面中，轮播图的图片，如果也使用宽高100%，页面不好看
 3.商品详情希望是自适应宽高
 4.而首页希望是100%宽高