Vue (一) 数据准备

约定不等于承诺〃 2022-06-01 04:17 232阅读 0赞

#### 一、$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][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里 
          })
       }
    }

[http_localhost_8080_api_seller]: http://localhost:8080/api/seller