VUE基本内容

vue模板语法

1. 函数只有一个参数的时候（）可以省略;当函数体只有一句话{}可以省略，所以 render: （h） => {h(App)};就变成 render: h => h(App);等价于components: { App },template: '<App/>'
2. 采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
3. 生命周期钩子的 this 上下文指向调用它的 Vue 实例
4. <form v-on:submit.prevent="onSubmit">...</form> 取消默认事件
5. 当某个属性依赖于其他属性的值时，我们可以使用计算属性，计算属性是直接申明式的渲染到view中的，使用缓存
6. get用来获取属性值，同时计算生成新的值；set用来改变传递过来的值，发生改变的时候，同时让数据的内容也发生改变
7. watch处理异步操作
8. 给class绑定一个真实的对象，或者定义在data中的一个变量名
9. v-for可以遍历对象的属性与内容，数组的索引和内容
10. 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。给 Vue 一个key，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素

---

11. 组件的局部注册
12. 子组件里的点击事件，把父组件要执行的事件名传递出去，在父组件里定义要执行事件的具体内容（操作父组件内容），即用于接受子组件事件的方法。按钮上绑定的事件作用是传出事件名给父组件，子组件标签里绑定的是执行的内容。
13. 自定义事件存在的必要性
14. 同级组件相互通信
15. 插槽存在的必要性以及插槽和props的区别，https://blog.csdn.net/qq_35321405/article/details/90696995
    https://blog.csdn.net/willard_cui/article/details/82469114
16. 当同一个子组件想要在不同的父组件里展示不同的状态，一个子组件template由多个插槽组成，分发不同的内容，产生各种形态的组件
17. 没有插槽的情况下在组件标签内些一些内容是不起任何作用的，比如<child-component>你好</child-component>中你好不会被渲染，当在组件中声明了slot元素后，在组件元素内写的内容就会渲染在子组件中。
18. 具名插槽可以在模板上也可以在标签上，https://www.jianshu.com/p/8f7895ae7cb6
19. 2.6插槽新语法，子组件：<slot name='Hah'> 父组件：<template v-slot : (#) Hah > hi judy </template>
20. 有时让插槽内容能够访问子组件中才有的数据是很有用的，但是父级模板里的所有内容都是在父级作用域中编译的；<current-user #default="{ user }"> {{ user.firstName }} </current-user>
21. 插槽可添加默认内容
22. 动态组件 <component v-bind : is='currentComponent'></component> , 可搭配 <keep-alive> 使用

---

24. 组件不允许直接修改属于 store 实例的 state，而应执行 action 来分发 (dispatch) 事件通知 store 去改变，这样能做到实现记录变更 (mutation)
25. Vuex 和单纯的全局对象的不同
26. 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
27. 在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到
28. 如果有些状态严格属于单个组件，最好还是作为组件的局部状态。

---

29. 路由从添加到使用的流程，其他插件也类似。先写路由routes，再在路由js中import路由，use路由，new一个路由并引用routes，最后挂载路由到main.js

import Vue from 'vue'
import Router from 'vue-router'
import movieRouter from './movie'
import cinemaRouter from './cinema'
import mineRouter from './mine'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    movieRouter,
    cinemaRouter,
    mineRouter,
    {
      path: '/*',
      redirect:'/movie'
    }
  ]
})

27. router-link 默认会被渲染成一个 <a> 标签
28. 把routes记做一个数组
29. 动态路径参数 以冒号开头，当匹配到一个路由时，参数值会被设置到 this.$route.params
    如果想匹配任意路径，我们可以使用通配符 (*), 这里的任意路径是指没有匹配到定义过的路由之外的所有路径，注意含有通配符的路由应该放在最后
30. 以 / 开头的嵌套路径会被当作根路径，所以子路由无需再写 /
31. 命名路由相当于直接把：后的动态路由地址参数和name写在一个对象里，

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>