新建vue實(shí)例
new Vue({
el: '#app',
router,
template: '<App/>'
components:{ App }
})
el: '#app'可以換成new Vue().$mount("#app")
template: '<App/>'
components:{ App }
可以替換成render
render: h => h(App)相當(dāng)于
render: function(h){
return h(App);
}
返回值h對(duì)app渲染
其實(shí)template底層也會(huì)調(diào)用render方法
組件是可以復(fù)用的楷怒，組件和頁(yè)面最好分開(kāi)
頁(yè)面放在views中
組件放到components中
assets里面放css和圖片
static也是放靜態(tài)資源仅乓，assets里面更貼近組件資源，
assets打包會(huì)打包到一起轩缤，頁(yè)面中用大的圖片會(huì)放到static中
import引用組件可以通過(guò)相對(duì)路徑
@在配置里面整成src目錄下了
面包削
slot插槽，會(huì)根據(jù)名字進(jìn)行匹配,相應(yīng)的插入內(nèi)容
比如這是一個(gè)navBread組件斤讥，
<slot name="bread"></slot>
<slot name="b"></slot>
引入navBread組件
<nav-bread>
<span slot="Goods">Goods</span>
<span slot="b">test</span>
</nav-bread>
列表數(shù)據(jù)渲染實(shí)現(xiàn)
- 模擬mock數(shù)據(jù)退个，就是自己寫(xiě)的假數(shù)據(jù),新建good.json
比如：
實(shí)際上不可以寫(xiě)注釋在里面
{
"status": "0",//狀態(tài)碼，成功
"msg": "",
"result": [
{
"id":"0",
"name": "name1",
"price":2222,
"img":"1.jpg"http://用相對(duì)路徑
}
]
}
- 內(nèi)置了express框架化借，借助express加載mock數(shù)據(jù)
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)
- 前端獲取數(shù)據(jù)：
data不允許組件之間狀態(tài)共享潜慎，所以data必須是個(gè)函數(shù)reutrn一個(gè)對(duì)象，不會(huì)導(dǎo)致數(shù)據(jù)竄用
import axios from 'axios'
data(){
return {
goodsList: []
}
}
methods: {
getGoodsList(){
axios.get("/goods").then((result)=>{
var res = result.data
this.goodsList = res.result
})
}
}
實(shí)現(xiàn)圖片懶加載
當(dāng)一屏圖片太多的時(shí)候適用
全部選中
data(){
return {
priceChected: 'all'
}
}
:class="{'cur':priceChected==='all'}" @click="priceChected='all'"
判斷當(dāng)前選中的是哪一項(xiàng)
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/"http://路徑
})
img v-lazy="指向圖片路徑 "
