Vue学习之六(全局导入包,图片懒加载,导入第三方jq模块,路由,渲染的项目中应用)

全局第三方包的导入方式

• 1.jq全局new webpack.ProvidePlugin({$:"jquery",jQuery:"jquery","window.jQuery":"jquery"})
• 2.axios发送请求的全局axios.defaults.baseURL="" Vue.prototype.$axios=axios
• 3.common.js文件中export default{axioHost:”“}, import axios from ‘common.js’

商品列表渲染

• 1.axios发送请求
• 2.v-for渲染

实现图片懒加载 vue-lazyload

• 安装
• import xx from ‘vue-lazyload’
• Vue.use(‘xx’,{require:’./xxx/xxx’})
• src替换成v-lazy

商品详情(template,style scoped,script=>export default{})

商品列表跳转到商品详情中

• 从商品列表点击通过router-link取触发
  <router-link :to="'/site/goodsinfo'+subitem.artID"> <router-link>
• man.js中设置路由规则 import goodsInfo {parth:'/site/goodsinfo:goodsID',component:..}

显示商品基本信息

• data(){ return {goodsInfo:{}}}
• getGoodsInfo(){res={this.goodsInfo=res.data.message},err=>console.log(err)}

商品图片,放大功能(jq22搜索商品详情)

• style scnoped=>@import “xx.css”
• script=> import “xx.js”
• 静态结构 html data=>goodsCount
• 初始化 写在update生命周期钩子中

点击商品推荐切换

• watch来监控$route,会自动执行回调函数在回调函数中发送网络请求

商品介绍与商品评论

• 动态切换商品介绍和商品评论

  • 显示内容切换 v-show="isShowContent=!isShowContent" v-show利用display:none原理
  • 类名 :class="{selected:isShowContent}"

  经常出现对象点内容undefined处理方案

//content is no defined; 
//在外面的盒子添加v-if="goodsInfo.goodsinfo" 先判断是否为真
// undefined.content肯定报错,因为axios请求是异步的没有先后顺序;
<div v-if="goodsInfo.goodsinfo" v-show='isShowContent' class="tab-content entry" style="display: block;">
        <div v-html="goodsInfo.goodsinfo.content"></div>
</div> 

• 使用iview 的图钉组件,滚动固定切换栏

  • 安装iview
  • 安装包 babel-plugin-import 按需加载
  • 创建 .babelrc文件
  • 按需导入 import { Affix } from "iview"; ;
    export default{components:{Affix}}
  • 内容包在…标签内

• 用element-ui实现分页组件

  • data中页码pageIndex:1,pageSize:5
  • html在element中找到分页组件
  • methods中添加点击事件handleSizeChange,handleCurrentChange
  • 绑定pageIndex和pageSize

<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageIndex"
:page-sizes="[1, 2, 5, 10]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="goodsComment.totalcount">
</el-pagination>

• 提交评论
  
  • 获取评论内容
    v-model,ref属性(子组件引用)
    ref="commentRef"和this.$refs.commentRef.value
  • 点击事件 发送提交请求
  • 评论成功后 发挥json数据
    清空输入的内容,提示用户输入成功,重新加载第一页数据
    发起请求时要输入内容非空判断
    this.commenttxt.trim().length == 0,用element-ui提示框

今日所安装的包

• 第一次安装:
  包：vue-lazyload
  应用场景:实现购物商城图片分类功能的图片懒加载
  安装方式:cnpm install vue-lazyload –save/-S

• 第二次安装:
  包:iview
  应用场景:使用图钉效果的时候
  安装方式：cnpm install iview –save/-S

• 第三次安装:
  包:babel-plugin-import
  应用场景:按需导入我们的iview组件
  安装方式：cnpm install babel-plugin-import –save/-S