vue基础

新建vue实例

new Vue({
  el: '#app',
  router,
  template: '<App/>'
  components:{ App }
})

el: '#app'可以换成new Vue().$mount("#app")

  template: '<App/>'
  components:{ App }
可以替换成render
  render: h => h(App)相当于
  render: function(h){
    return h(App);
  }
返回值h对app渲染

其实template底层也会调用render方法

组件是可以复用的，组件和页面最好分开
页面放在views中
组件放到components中
assets里面放css和图片
static也是放静态资源，assets里面更贴近组件资源，
assets打包会打包到一起，页面中用大的图片会放到static中
import引用组件可以通过相对路径
@在配置里面整成src目录下了

面包削

slot插槽，会根据名字进行匹配,相应的插入内容
比如这是一个navBread组件，

<slot name="bread"></slot>
<slot name="b"></slot>

引入navBread组件

<nav-bread>
  <span slot="Goods">Goods</span>
<span slot="b">test</span>
</nav-bread>

列表数据渲染实现

• 模拟mock数据，就是自己写的假数据,新建good.json
  比如：
  实际上不可以写注释在里面

{
  "status": "0",//状态码，成功
  "msg": "",
  "result": [
    {
      "id":"0",
      "name": "name1",
      "price":2222,
      "img":"1.jpg"//用相对路径
    }
  ]
}

• 内置了express框架，借助express加载mock数据
  webpack.dev.conf.js

var router = express.Router();
var goodsData = require('./../mock/goods.json')
router.get("goods",function(req,res,next){
  res.json(goodsData)//直接输出json
}
app.use(router)

• 前端获取数据：
  data不允许组件之间状态共享，所以data必须是个函数reutrn一个对象，不会导致数据窜用

import axios from 'axios'
data(){
  return {
    goodsList: []
  }
}
methods: {
  getGoodsList(){
    axios.get("/goods").then((result)=>{
      var res = result.data
      this.goodsList = res.result
    })
  }
}

实现图片懒加载

当一屏图片太多的时候适用
全部选中

data(){
  return {
  priceChected: 'all'
  }
}

:class="{'cur':priceChected==='all'}" @click="priceChected='all'"
判断当前选中的是哪一项
v-for="(price,index) in priceFilter"
@click="priceChected=index" :class="{'cur':priceChecked===index}"

• 懒加载插件vue-lazyload
npm i vue-lazyload --save

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
  loading: "static/"//路径
})

img v-lazy="指向图片路径  "