新建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="指向图片路径 "
