- 获取数据，如何获取数据呢，使用 vue-resource
- 使用 vue-resource 的 this.$http.get 获取数据
- 获取到的数据，要保存到 data 身上
- 使用 循环渲染每个 item 项
- 绘制界面，使用 MUI 中的 media-list.html
- 使用 vue-resource 获取数据
- 渲染真实数据
- 把列表中的每一项改造为 router-link，同时在专跳时应该提供唯一的Id标识符
- 创建新闻详情的组件页面 NewsInfo.vue
- 在 路由模块中，将 新闻详情的 路由地址 和 组件页面对应起来
- 先创建一个 单独的 comment.vue 组件模版
- 在需要的使用 comment 组件的页面中，先动手导入 comment 组件
- 在父组件中，使用 components 属性，将刚才导入的comment组件，注册为自己的 子组件
- 将注册子组件时候的，注册名称，以标签形式，在页面中 引用即可
- getComments
- 为加载更多按钮，绑定点击事件，在事件中，请求下一页数据
- 点击加载更多，让 pageIndex++ ，重新调用 this.getComments()方法，重新获取一页的数据
- 为了防止 新数据 覆盖老数据的情况，每当我们 点击更多的时候，获取到的新数据应该拼接在老数据之后
- 把文本框做双向数据绑定
- 为发表按钮绑定一个事件
- 校验评论内容是否为空，如果为空则提示用户：评论内容不能为空
- 通过 vue-resource 发送一个请求，把评论内容提交给服务器
- 当发表评论成功后，重新刷新列表，以查看最新的评论
- 如果调用 getComments 方法，重新刷新列表的话，可能只能得到最后一页的评论，前几页的评论获取不到
- 换一种思路：当评论成功后，在客户端，手动拼接一个 最新的评论对象，然后调用数组的unshift方法， 把最新的额评论追加到 data 中 comments 的开头，这样就能完美实现刷新评论列表的需求
- 制作 顶部滑动条
- 制作 底部图片列表
- 需要借助 MUI 中的 tab-top-webview-main.html
- 需要把 slider 区域的 mui-fullscrean 类去掉
- 滑动条无法正常的滑动，通过检查官方文档，发现这是一个js组件，需要被初始化一下
- 导入 mui.js
- 调用官方提供的 方式 初始化
初始化scroll控件：
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});
- 我们在初始化 滑动条 的时候，导入的 mui.js，但是控制台报错
Uncaught TypeError: 'caller', 'callee', and 'arguments' properties
may not be accessed on strict mode functions or the arguments objects for calls to them
- 思考：可能是 mui.js 中，调用了 caller、callee、arguments 东西，但是 webpack 打包好的 bundle.js 中， 默认是启用严格模式，所以两者冲突了
- 解决方案：1. 把 mui.js 中非严格模式的代码改掉，但是不合实际，2. webpack 打包时，把严格模式禁用掉
- 当滑动条 调试 ok后，发现，tabbar 无法正常工作了，这时候需要把每个tabbar按钮样式中的'mui-tab-item'重新改下名字
- 图片加载需要使用懒加载技术，可以使用 Mint-UI 提供的现成的 'lazy-load'
- 根据'lazy-load'的使用文档，尝试使用
- 渲染图片列表数据
- 在改造 li 成 router-link 的时候，需要使用 tag 属性，指定要渲染出哪种元素
- 使用插件 vue-preview 这个缩略图插件
- 获取到所有图片列表，然后使用 v-for 指令渲染数据
- 注意：img标签上的class不能去掉
- 注意：每个 图片数据对象中，必须有 w 和 h 属性
- 要保证自己手机可以正常运行
- 要保证 手机 和 开发项目的电脑 处于同一个wifi环境中（即同一个局域网中）
- 打开自己 项目中 package.json 文件，在 dev 脚本，添加一个 -- host 指令，把当前电脑的wifi IP地址，设置为 --host的指令值
- 查看电脑的ip