Vue学习笔记
- 组件
- 子父组件通信
- 子父组件：单向数据流
- 非父子组件间的通信
- 路由
- router的使用
- 路由嵌套，参数传递，路由结合动画
- 参数传递
- 路由实例的方法
- 路由结合动画
- 单文件组件
- VUE文件
- vue-loader
- webpack
- 示例步骤
- 1. 创建项目，结构如下
- 2. 编写App.vue组件
- 3. 安装相关模板
- 4. 编写main.js
- 5. 编写webpack.config.js
- 6. 编写.babelrc文件
- 7. 编写package.json配置
- 8. 运行测试
- vue-cli脚手架
- 步骤
- 模块化开发
- 1. vue-router模块化
- 1.1 编辑main.js
- 1.2 编辑App.vue
- 1.3 创建router.config.js
- 1.4 引入以及创建router实例
- 2. axios模块化开发
- Elment UI
- 1. 简介
- 2. 安装element ui
- 3. 使用element ui
- 4. 配置webpack.config.js
- 5. element ui的样式和组件
- 6. 使用less
- 自定义插件
- Vuex
- 基本用法
- 创建store.js文件
- 编辑store.js文件
- 编译App.vue
- 分模块组织Vuex
组件
子父组件通信
1、子组件只能在父组件里使用
2、默认情况下，子组件不能直接访问父组件数据，每个组件的作用域都是独立的
3、子组件通过props属性来获取父组件传递的数据
4、props属性可以为Array，也可以使用对象，在对象中定义对数据的类型校验、数据校验、默认值等
5、 使用$emit(事件名，数据)子组件向父组件传递数据
子父组件：单向数据流
子组件不能直接修改父组件的数据，无法直接修改。
解决的方式：
1、如果子组件想把它作为局部数据来使用，可以将数据存在自己的变量中，不影响父组件数据
2、如果子组件想要修改数据并需要同步到父组件：
a.使用.sync修饰符(1.0支持，2.0不支持，2.3支持)，使用this.$emit(‘update:变量名’, newValue)来显式触发时间来更新数据并同步到父组件；
b.将父组件中的数据包装成对象，然后在子组件之中可以修改这个对象
非父子组件间的通信
通过一个空的Vue实例来作为中央事件总线（事件总线），用它来触发时间和监听事件
通过事件总线的$emit和$on来分别触发事件和监听事件来发送和获取数据
注意在$on事件中使用箭头函数来避免this的问题
路由
router的使用
- 定义组件
- 配置路由
- 创建路由实例
- 创建根实例并将路由挂载到Vue实例上
路由模式：hash和history
linkActiveClass样式自定义
redirect重定向路由
路由嵌套，参数传递，路由结合动画
参数传递
$route.query获取查询参数 /user/login?username=aa&passwd=bb
$route.params获取路径参数 /user/login/aa/bb
路由实例的方法
router.push() 添加路由，与router-link功能相同
router.replace() 替换路由，并且不产生历史记录
路由结合动画
单文件组件
VUE文件
由三部分组成，.vue结尾的文件，包含、