一、$mount()手动挂载
当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中;假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载。
1 | new Vue({ |
1 | new Vue({ |
解释: render: x => x(App)
1 | 这里的render: x =>x(App)是es6的写法 |
二、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 | const portfinder = require('portfinder') |
(3)接着找到 devServer 里的 watchOptions,其后紧跟
1 | watchOptions: { |
(4)设置保存后 npm run dev 运行 访问http://localhost:8080/api/seller 就可接收到 该路由对应的json 数据
三、关于路由 vue-router
* 直接定义路由
(1) 首先定义路由
1 | // 定义路由组件 |
(2) 创建路由实例
1 | // 创建路由实例 |
路由实例方法:
1 | router.push({path:'goods'}); //直接添加一个路由,表现切换路由,本质往历史记录里面添加一个 |
(3)创建vue 实例
1 | // 创建 vue 实例 |
(4)DOM 渲染
1 | <body> |
注意:查看效果时,发现动态的给当前路由 添加le一个router-link-active的类名,所以如果需要设置当前路由样式(比如:高亮)就可以直接在style里设置了
(main.js)引入路由组件
(1) 引入路由文件
1 | import goods from './components/goods/goods' |
(2) 创建路由实例 定义路由组件
1 | const router = new VueRouter({ |
(3) 创建vue实例并挂载
1 | new Vue({ |
四、axios 请求数据
(1) 安装 axios
1 | npm install axios |
(2) 引入axios组件
1 | import axios from 'axios' |
(3) axios 请求数据(在此之前创建一个接受数据的对象sellerobj)
1 | export default { |