1. 基础语法
1. v-for
2. @click 方法不加括号
3. mustache 语法
4. v-once 只渲染一次
5. v-html 解析 html
6. v-text
7. v-pre 不渲染它及其子元素
8. v-cloak 防止浏览器显示未编译的 mustache
9. v-bind 动态绑定属性
语法糖：
9.1 动态绑定 class
- 对象语法
- 数组语法
9.2 动态绑定 style
10. 计算属性
11. v-on 注意传参问题
12. v-if、v-else-if、v-else
13. v-show
例如根据登录角色权限不同而渲染不同页面，就使用 v-if。
14. v-model 双向绑定
2. 组件化开发
1. 过程：创建 - 注册 - 使用
1. 创建与注册全局或局部组件
2. 模板分离写法
2. 全局组件与局部组件
区别在于注册方式。
3. 父子组件问题
注意：下面这个例子中，vue 实例中不能直接使用子组件标签来引入子组件，因为子组件并没有在 vue 实例中注册，只注册进了父组件。子组件在注册进父组件时，就已经编译完成作为父组件的一部分了。
4. 组件的 data 域问题
注意：组件无法直接访问 vue 实例中的 data，因为组件也相当于一个 vue 实例，有自己的 data 域。并且 data 必须是一个函数，因为组件可能被多个地方引用，造成并发错误。
5. 父子组件通信
1. 父传子 props
2. 子传父 event
6. 插槽 Slot
1. 匿名插槽
如果传递了内容，<slot>中的内容将被 全部替换，否则显示插槽定义时默认的内容。
2. 命名插槽
3. 编译作用域
4. 作用域插槽
即在 Slot 上绑定一些数据，供给父组件直接使用。作用：子组件提供数据，父组件负责控制展示样式的时候可以使用。
3. 模块化开发
1. 一些导入导出写法
2. webpack
3. Vue-Cli
4. vue-router
本质：将路径和组件映射起来，路径的改变就是组件的切换。
4.1 入门
4.1.1 两种模式
4.1.2 使用步骤
4.1.3 跳转时执行 JS 代码
4.2 动态路由、懒加载
4.2.1 动态路由
传参：
<router-link :to="{path: '/applicant/companyDetail/' + item.id}"></router-link>4.2.2 懒加载
4.3 路由嵌套
注意：
children[ ]内部的组件，path 不要带/，否则 url 会映射到根路径。- 在组件内部使用
router-view标签。
4.4 参数传递
4.4.1 传递参数
4.4.2 获取参数
$route 对象：封装了当前路由状态的信息。
4.5 导航守卫
作用：用来监听路由状态的切换。
如，在路由切换后，更改页面 title。
如果是 afterEach() 方法，不需要调用 next()。
4.6 keep-alive
5. Vuex
作用：响应式的状态管理，方便在多个组件间共享数据。
- State
就是要共享的属性。
- Getters
可以理解为计算属性。
- Mutations
更新时使用提交 Mutations 的方式。
- 携带参数：
- 两种提交风格
- 响应规则
- Actions
- Module
6. axios
6.1 Promise
作用：ES6 中异步编程的一种解决方案，是 CommonJS 为异步编程设计得统一接口。
6.2 axios
注意回调。
1. 两种封装方式
方式一：传入回调方法，在封装体内部回调。
import axios from 'axios'
//传入回调方法
export function request(config, success, failure) {
//创建axios实例
const instance = axios.create({
baseURL: 'xxx',
method: "get",
timeout: 5000
})
//发送请求
instance(config)
.then(res => {
success(res);
})
.catch(err => {
failure(err);
})
}
//---调用---
request({
config: {},
success: function(res){},
failure: function(err){}
})方式二：直接 return，因为 axios 返回的就是一个 promise。
import axios from 'axios'
//可以给默认的axios实例设置default值
//注意只会在默认的axios实例生效
axios.defaults.baseURL = xxx;
axios.defaults.timeout = xxx;
var baseUrl = 'http://localhost/nqa';
export function get(config) {
const get = axios.create({
baseURL: this.baseURL,
method: "get",
timeout: 5000,
})
return get(config);
}
export function post(config) {
const post = axios.create({
baseURL: this.baseURL,
method: "post",
headers: {'Content-Type': 'application/json'},
timeout: 5000
})
return post(config);
}
//---调用---
import * as req from 'network/request'
req.get({
url: "/xxx"
}).then(res => {
doSth...
}).catch(err => {
doSth...
});
req.post({
url: '/xxx',
data: {
key: value
},
headers: {
//eg...
'Authorization': myToken,
}
}).then(res => {
if (res.data.flag) {
doSth...
} else {
doSth...
}
}).catch(err => {
doSth...
});