Vue（一）数据准备

发表于

一、$mount()手动挂载

当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。
1
2
3
4
new Vue({
   router,
   render: h => h(App)
 }).$mount("#app");
1
2
3
4
5
new Vue({
  el: '#app',
  router,
  render: h => h(App) 
});
解释： render: x => x(App)
1
2
3
4
5
这里的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 数据
1
2
3
4
5
6
7
8
9
10
const portfinder = require('portfinder')
// 添加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，其后紧跟
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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) 首先定义路由
1
2
3
//  定义路由组件
const goods = { template: '<p>我是对应的goods下面的内容</p>' };
const seller = { template: '<p>我是对应的seller下面的内容</p>' };
(2) 创建路由实例
1
2
3
4
5
6
7
8
// 创建路由实例
var router = new VueRouter({
  routes:[
   //路由重定向即设置默认路由  
   {path:'/',redirect:'/goods',component:goods}, 
   {path:'/goods',component:goods},
   {path:'/seller',component:seller}
});
路由实例方法:
1
2
3
router.push({path:'goods'});  //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个
router.replace({path:'goods'}) //替换路由，不会往历史记录里面添加
// router.go('goods')
(3)创建vue 实例
1
2
3
4
5
//  创建 vue 实例
	const app=new Vue({
		el:"#app",  //  挂载元素
		router
	})
(4)DOM 渲染
1
2
3
4
5
6
7
8
9
10
11
<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>

（main.js）引入路由组件

(1) 引入路由文件
1
2
3
import goods from './components/goods/goods'
import ratings from './components/ratings/ratings'
import seller from './components/seller/seller'
(2) 创建路由实例 定义路由组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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实例并挂载
1
2
3
4
5
6
7
8
new Vue({
  el:"#app",
  router,
  template: '<App/>',
  components: {
    App
  }
})

四、axios 请求数据

(1) 安装 axios
1
npm install axios
(2) 引入axios组件
1
import axios from 'axios'
(3) axios 请求数据（在此之前创建一个接受数据的对象sellerobj）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default {
 //  获取数据 准备  返回一个对象，后台获取数据后 赋予 该对象
   data (){
   	 return {
   	 	 sellerobj:{}
   	 }
   },
   created (){ //  创建之前 请求数据
   	 axios.get('static/data.json').then((result) => {
   	  	 console.log(result) //  控制台检查  数据存储在  result.data 里  
   	  	this.sellerobj = result.data.seller //  将数据存到sellerobj里  	 	
   	  })
   }
}

Yes!

后续更新…