项目地址:(studyVueOne)github
1. export 和 export default
区别: export与export default均可用于导出常量、函数、文件、模块等
1. 在一个文件或模块中,export、import可以有多个,export default仅有一个
2. 通过export方式导出,在导入时要加{ },export default则不需要
3. export能直接导出变量表达式,export default不行。
export function Func () { }
import { Func } from 'func'
export default function Func () { }
import Func from 'func'
2. 路由的控制:vue-router
vue-router是Vue.js官方的路由插件,适合用于构建单页面应用,路由用于设定访问路径,并将路径和组件映射起来。
下载:
npm install vue-router --save
配置:在main.js文件中导入并使用:
import VueRouter from 'vue-router' //导入组件
Vue.use(VueRouter); //使用组件
设置主页面 和子页面detail 及其子页面:routes:[{...},{...}]
let router = new VueRouter({
mode:'history',
routes: [
{
path: '/', //主页面及其组件
component: IndexPage
},
{
path:'/detail', //子页面
component:Detail,
redirect:'/detail/count', //直接访问detail页面时重定向到count页面
children:[ //detail的子页面及使用的组件
{
path: 'analysis', // /detail/analysis
component: DetailAnalysis
},
{
path: 'count',
component: DetailCount // /detail/count
}
]
]
})
最终路由需要注入到实例中。
3. vue2.0快速搭建一个测试的api接口(json-server、express),模拟后台数据处理
安装插件:
npm install vue-resource --save
在main.js中引入
import VueResource from 'vue-resource'
Vue.use( VueResource )
之后就可以在任意组件中使用:
this.$http.get( ).then( (res) => {} , (err) => { })
然后有两种方法实现对数据的获取,模拟后台和数据的处理。
第一种:json-server,适合 get请求:
安装:
cnpm install json-server --save
配置:找到build/webpack.dev.conf.js,文末添加如下代码:
//实例化jsonServer
const jsonServer = require ('json-server')
const apiServer = jsonServer.create()
const apirouter = jsonServer.router('db.json') //数据关联,db.json和index.html同级
const middlewares = jsonServer.defaults()
apiServer.use(middlewares)
apiServer.use('/api',apirouter) //数据使用的路径
apiServer.listen(3000, () => { //监听端口
console.log('JSON Server is running')
})
接着设置config/index.js中proxyTable:(浏览器有同源策略,8080端口是文件端口,而这边监听的是3000端口)
proxyTable: {
'/api':'http://localhost:3000/'
},
这样: 当在浏览器地址栏输入:http://localhost:8080/api 就等同于http://localhost:3000端口了。
并且需要在根目录下创建db.json文件用于获取数据。
第二种:通用方法express,支持get和post请求
同样, 配置:找到build/webpack.dev.conf.js,文末添加如下代码:
var express = require('express')
var apiServer = express()
var bodyParser = require('body-parser')
apiServer.use(bodyParser.urlencoded({ extended: true }))
apiServer.use(bodyParser.json())
var apiRouter = express.Router()
var fs = require('fs')
apiRouter.route('/api') //接口路径
.all(function (req, res) {
fs.readFile('./db.json', 'utf8', function (err, data) { //读取接口文件
if (err) throw err
var data = JSON.parse(data)
if (data[req.params.apiName]) {
res.json(data[req.params.apiName])
}
else {
res.send('no such api name')
}
})
})
apiServer.use('/api', apiRouter);
apiServer.listen(3000, function (err) {
if (err) {
console.log(err)
return
}
console.log('Listening at http://localhost:' + 3000 + '\n')
})
接着设置config/index.js中的proxyTable:
proxyTable: {
'/api':'http://localhost:3000/'
},
并且设置db.json数据。
4. <keep-alive>
是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。