注：change事件是在input失去焦点时触发，即用于单选、多选框和选择框，而input事件是在value值变化时触发，但脚本改变value值时不会触发，即用于text和textarea
修饰符.number：输入值转为数值
修饰符.trim：过滤收尾空白字符
12. Prop
使用v-bind="obj"会将对象的每个属性都作为一个独立的prop传入进去，所以接受时也需要逐个属性接收。
<test v-bind="obj"></test>
props虽然是单向数据流，但对于引用类型，子组件还是可以改变父组件的状态。
props会在组件实例创建之前进行验证，所以实例的属性再default或validator中是不可用的。
13. 自定义事件
自定义事件需要注意事件名为小写或-分隔，因为$emit('BaseEvent')虽然事件名不会变，但在html中该事件名会被转化为小写，不会监听到。
14. slot
具名插槽
<base-layout> <template v-slot:header> <h1>Here might be a page title</h1> </template> <!-- 默认插槽也可不用加上template和v-slot --> <template v-slot:default> <p>A paragraph for the main content.</p> <p>And another one.</p> </template> <template v-slot:footer> <p>Here's some contact info</p> </template> </base-layout>
作用域插槽
<!-- current-user组件 --> <span> <slot :user="user"> {{ user.lastName }} </slot> </span> <!-- 父级组件通过自定义名称访问子级作用域 --> <current-user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> </current-user> <!-- 支持缩写和解构 --> <current-user> <template #default="{ user = { firstName: Gust } }"> {{ user.firstName }} </template> </current-user>
15. 组件通信
vuex/eventBus
prop/$emit
$children/$parent
provide/inject
$refs
// 父或祖先级 provide: function () { return { getMap: this.getMap } } // 后代级 inject: ['getMap']
16. scope
scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域，编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover
17. 路由
区分：this.$router指路由器，this.$route指当前路由
通配符：捕获所有路由或 404 Not found路由
// 含通配符的路由都要放在最后，因为优先级由定义顺序决定 { // 会匹配所有路径 path: '*' } { // 会匹配以 `/user-` 开头的任意路径 path: '/user-*' }
当使用一个通配符时，$route.params内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分：
// 给出一个路由 { path: '/user-*' } this.$router.push('/user-admin') this.$route.params.pathMatch // 'admin' // 给出一个路由 { path: '*' } this.$router.push('/non-existing') this.$route.params.pathMatch // '/non-existing'
点击 <router-link :to="..."> 等同于调用 router.push(...)方法，因为<router-link>会在内部调用该方法，进而在history栈添加一个新的记录
使用了push时，如果提供的path不完整，则params会被忽略，需要提供路由的 name 或手写完整的带有参数的 path：
const userId = '123' router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123 // 这里的 params 不生效 router.push({ path: '/user', params: { userId }}) // -> /user
router.push/router.replace/router.go 效仿于 window.history.pushState/window.history.replaceState/window.history.go
命名视图：router-view可设置名字，如果router-view没有设置名字，那么默认为 default
<router-view></router-view> <router-view></router-view> <router-view></router-view> const router = new VueRouter({ routes: [ { path: 'https://www.jb51.net/', components: { default: Foo, a: Bar, b: Baz } } ] })
路由使用props：可将路由参数设置为组件属性
const User = { props: ['id'], template: '<div>User {{ id }}</div>' } // 通过布尔值设置 const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true }, // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项： { path: '/user/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ] }) // 通过函数设置query // URL /search?q=vue 会将 {name: 'vue'} 作为属性传递给 SearchUser 组件 const router = new VueRouter({ routes: [ { path: '/search', component: SearchUser, props: (route) => ({ name: route.query.q }) } ] })
beforeRouteEnter：可使用beforeRouteEnter来提前获取接口数据，同时需要在next后才能访问到实例：
beforeRouteEnter(to, from, next) { axios('/text.json').then(res => { next(vm => { vm.datas = res }) }) }