Vue (一) 数据准备

最新推荐文章于 2022-09-22 08:57:51 发布

张张张96

最新推荐文章于 2022-09-22 08:57:51 发布

阅读量371

点赞数

分类专栏： Vue 前端客栈文章标签： vue 饿了么 mount 路由

本文链接：https://blog.csdn.net/girl_0919/article/details/79108085

版权

Vue 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端客栈

6 篇文章 2 订阅

订阅专栏

一、$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')

（4）创建vue 实例

//  创建 vue 实例
    const app=new Vue({
        el:"#app",  //  挂载元素
        router
    })

（5）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里         
      })
   }
}

张张张96

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue (一) 数据准备

一、$mount()手动挂载当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。new Vue({ router, render: h => h(App) }).$mount("#app");``new Vue({ el: '#app', router, render: h
复制链接

扫一扫