一文了解vue基本概念

vue export跟export default的区别

相同点:

1. vue export跟export default均可用于导出常量，函数，文件，模块等等
2. 都可使用import导入

不同点:

1. 同一个文件export可以有多个， export default只能有一个
2. 通过export方式导出，在导入时要加{}, export default则不需要。
3. 使用export default为模块指定默认导出，导入时只需要知道文件名即可，但是使用export必须知道导出的变量或函数，导入时变量名要一致。

export方式
//a.js == export
export function log(sth){
  return sth;
}

//b.js  == import
import {log} from './a.js'

export default方式
//a.js == export default
export default const str="abc"

//b.js == import default
import str from './a.js'

Vue生命周期

这是vue官网提供的一个图

Vue实例常用属性

属性	值的类型	描述
data	Object/Function/void	传入的data数据
props	{ [key: string]: PropOptions }	props传入的数据
el	string/Element	传入的el字符串
template	string	传入的模板字符串
render	(h: () => VNode) => VNode	传入的render函数
beforeCreate	Function	钩子函数，具体见vue生命周期
created	Function	钩子函数，具体见vue生命周期
beforeMount	Function	钩子函数，具体见vue生命周期
mounted	Function	钩子函数，具体见vue生命周期
beforeUpdate	Function	钩子函数，具体见vue生命周期
updated	Function	钩子函数，具体见vue生命周期
activated	Function	钩子函数，具体见vue生命周期
deactivated	Function	钩子函数，具体见vue生命周期
beforeDestroy	Function	钩子函数，具体见vue生命周期
destroyed	Function	钩子函数，具体见vue生命周期

vue import路径中的@

有时候我们可以vue的import中会有@，如下示例

import Gauge from '@/components/Echarts/Gauge'

通过查vue.config.js，我们可以知道里面有下面的代码，所以@代表/src这个目录

 configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src'),
        '@crud': resolve('src/components/Crud')
      }
    }
  },

vue整体流程

网上盗个图

vue全家桶

vue-router（http://router.vuejs.org）
vuex（http://vuex.vuejs.org）
vue-resource（https://github.com/pagekit/vue-resource）
vue-cli：构建工具
sass样式

vue资源链接

http://vue.awesometiny.com/
https://www.jianshu.com/c/299425ee3a28