Vue 实战 饿了么 (一)-阿里云开发者社区

开发者社区> 开发与运维> 正文

Vue 实战 饿了么 (一)

简介: 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中;假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载。

一、$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日
原文作者:前端喵 

本文来源:开源中国 如需转载请联系原作者





版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章