天天看點
傳回

Vue 實戰 餓了麼 （一）

一、$mount()手動挂載

當Vue執行個體沒有el屬性時，則該執行個體尚沒有挂載到某個dom中；假如需要延遲挂載，可以在之後手動調用vm.$mount()方法來挂載。 
new Vue({
   router,
   render: h => h(App)
 }).$mount("#app");
`
`new Vue({
  el: '#app',
  router,
  render: h => h(App) 
});
解釋： render: x => x(App) 
這裡的render: x =>x(App)是es6的寫法
     轉換過來就是：暫且可了解為是渲染App元件
     render:(function(x){
          return x(App);
      });

二、mock資料

如果後端接口尚未開發完成，前端開發一般使用mock資料。
注意：新版的vue-cli 自動搭建的build 檔案裡沒有dev-server.js 和 dev-client.js ，是以我們要在webpack.dev.conf.js 裡配置
配置如下：
（1）複制data.json 到該項目下
（2）找到bulid目錄下 webpack.dev.conf.js 找到 const portfinder = require('portfinder')，在其下添加mock 資料 
// 添加mock 資料
const express = require('express')
const app = express()
var appData = require('../data.json')//加載本地資料檔案
var seller=appData.seller;
var goods=appData.goods;
var ratings=appData.ratings;
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
（3）接着找到 devServer 裡的 watchOptions，其後緊跟 
watchOptions: {
      poll: config.dev.poll,
    },
    before(app) {
      app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
        })//接口傳回json資料，上面配置的資料appData就指派給data請求後調用
      }),
      app.get('/api/goods', (req, res) => {
        res.json({
          errno: 0,
          data: goods
        })
      }),
      app.get('/api/ratings', (req, res) => {
        res.json({
          errno: 0,
          data: ratings
        })
      })
    }
（4）設定儲存後 npm run dev 運作 通路 http://localhost:8080/api/seller  就可接收到 該路由對應的json 資料

三、關于路由 vue-router

* 直接定義路由

（1）首先定義路由 
//  定義路由元件
	const goods = { template: '<p>我是對應的goods下面的内容</p>' };
	const seller = { template: '<p>我是對應的seller下面的内容</p>' };
（2）建立路由執行個體 
// 建立路由執行個體
	var router = new VueRouter({
          routes:[
            //  路由重定向即設定預設路由  
            {path:'/',redirect:'/goods',component:goods}, 
            {path:'/goods',component:goods},
            {path:'/seller',component:seller}
          ]
      });
路由執行個體方法: 
router.push({path:'goods'});  //直接添加一個路由,表現切換路由，本質往曆史記錄裡面添加一個
router.replace({path:'goods'}) //替換路由，不會往曆史記錄裡面添加
// router.go('goods')
（3）建立vue 執行個體 
//  建立 vue 執行個體
	const app=new Vue({
		el:"#app",  //  挂載元素
		router
	})
（4）DOM 渲染 
<body>
 <div id="app">
  <div class="nav">
   <router-link to='/goods'>good</router-link>
   <router-link to='/seller'>seller</router-link>
  </div>
  <div class="content">
   <router-view></router-view>
  </div>
 </div>
</body>
注意： 
檢視效果時，發現動态的給目前路由 添加le一個router-link-active的類名,是以如果需要設定目前路由樣式（比如：高亮）就可以直接在style裡設定了

* （main.js）引入路由元件

（1）引入路由檔案 
import goods from './components/goods/goods'
import ratings from './components/ratings/ratings'
import seller from './components/seller/seller'
（2）建立路由執行個體 定義路由元件 
const router = new VueRouter({
  routes: [{
    path: '/',
    component: goods
  },{
    path: '/goods',
    component: goods
  }, {
    path: '/ratings',
    component: ratings
  }, {
    path: '/seller',
    component: seller
  }]，
  linkActiveClass: 'active' //  将 router-link-active  改為 active（友善樣式操作）
})
（3）建立vue執行個體并挂載 
new Vue({
  el:"#app",
  router,
  template: '<App/>',
  components: {
    App
  }
})

四、axios 請求資料

（1）安裝 axios 
npm install axios
（2）引入axios元件 
import axios from 'axios'
（3）axios 請求資料（在此之前建立一個接受資料的對sellerobj） 
export default {
 //  擷取資料 準備  傳回一個對象，背景擷取資料後 賦予 該對象
   data (){
   	 return {
   	 	 sellerobj:{}
   	 }
   },
   created (){ //  建立之前 請求資料
   	 axios.get('static/data.json').then((result) => {
   	  	 console.log(result) //  控制台檢查  資料存儲在  result.data 裡  
   	  	this.sellerobj = result.data.seller //  将資料存到sellerobj裡  	 	
   	  })
   }
}

原文釋出時間為：2018年01月19日

原文作者：

前端喵

本文來源：

開源中國

如需轉載請聯系原作者

javascript api 資料格式 json 前端開發 存儲 javascript前端開發css javascript資料存儲 javascript結束 javascript不能css java調用存儲過程資料
上一篇: javascript變量對象 函數調用棧 作用域 閉包等細解！
下一篇: Docker CE 最新動态，Stable 版将迎來更長釋出和維護周期

繼續閱讀