路由懒加载
路由懒加载12345678910111213141516171819202122// 路由同步加载// import Recommend from '@/components/recommend/recommend'// import Singer from '@/components/singer/singer'// import Rank from '@/components/rank/rank'// import Search from '@/components/search/search'// import SingerDetail from '@/components/singer-detail/singer-detail'// import Disc from '@/components/disc/disc'// import TopList from '@/components/top-list/top-list'// import ...
Vuex
VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
Vuex 使用过程演示以vue-cli3新创建出来的项目为例，演示 Vuex 的使用过程。
创建项目:
123vue create vuex-testcd vuex-testnpm run serve
安装vuex:
1npm i vuex -S
进入项目的src/下新建一个文件store/index.js，并写入：
1234567891011121314151617181920// store/index.jsimport Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);const store = new Vuex.Store({ // 容器 （构造函数Store开头大写） state: { // 状态 count: 0, }, mutations: { // 变化（使用mutations提交改变是为了方便追踪变化记录） increment ...
Mixin混入
Mixin混入基础混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
组件选项：指的是组件对象中的 data、created、methods 等等选项。
可通过 this.$options 查看选项
例子：
123456789101112131415161718// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } }}// 定义一个使用混入对象的组件var Component = Vue.extend({ mixins: [myMixin]})var component = n ...
使用animate库
vue中使用Animate.css库自定义过渡类名我们可以通过以下 attribute 来自定义过渡类名：
enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)
他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css结合使用十分有用。
使用Animate.css库1234567<transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show">hello&l ...
transition过渡&动画
transition过渡&动画API
使用需要设置动画的元素或组件要在外边包裹一个<transition>标签，设置自定义的name，vue会根据元素的切换（进入/离开）过程添加相应的css类名，你可以自由地使用css类名来设置css过渡&动画。
过渡的类名在进入/离开的过渡中，会有 6 个 class 切换。
各类名的生命周期
进入
v-enter 只存在于第一帧
v-enter-active 第一帧到最后一帧，结束后移除
v-enter-to 第二帧到最后一帧，结束后移除
离开
v-leave 只存在于第一帧
v-leave-active 第一帧到最后一帧，结束后移除
v-leave-to 第二帧到最后一帧，结束后移除
如果你使用一个没有name的<transition> ，则 v- 是这些类名的默认前缀。如果你使用了name="fade"，那么 v- 前缀会替换为 fade-。
css过渡 demo
See the Pen
vue的过渡动画 by xugaoyi (@xugaoyi)
on ...
vue父子组件的生命周期顺序
vue父子组件的生命周期顺序加载渲染过程1父beforeCreate -> 父created-> 父beforeMount-> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
父组件会先执行到beforeMount，接着会执行子组件钩子到挂载结束，再挂载父组件。
子组件更新过程1父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
父组件更新过程1父beforeUpdate -> 父updated
销毁过程1父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
动态组件与 v-once 指令
动态组件与 v-once 指令动态组件1234567891011121314151617181920212223242526<div id="root"> <component :is="type"></component> <!--其效果如同下面两行被注释的代码--> <!-- <child-one v-if="type === 'child-one'"></child-one> <child-two v-if="type === 'child-two'"></child-two> --> <button @click="handleClick">change</button></div><script type="text/javascript"> Vue. ...
插槽slot
插槽slotAPI
插槽123456789101112131415<div id="root"> <child> <!-- 组件标签 --> <h1>hello</h1> </child></div><script type="text/javascript"> Vue.component('child', { // 子组件 template: '<div><slot></slot></div>' }) var vm = new Vue({ el: '#root' })</script>
上面代码中，组件标签内的h1是要插入子组件内部的元素，子组件内使用slot标签接收父组件插入的h1标签。
默认值123Vue.co ...
父组件调用子组件方法并传入值
父组件调用子组件方法并传入值通过ref引用调用子组件内的方法并传入参数
父组件：
1234567<子组件标签 ref="refName"></子组件标签>methods: { fnX(x) { this.$refs.refName.fnY(x) // 调用子组件方法并传入值 }}
子组件：
123456methods: { fnY(x) { this.x = x } }}
非父子组件传值
非父子组件间传值当组件的嵌套多时，非父子组件间传值就显得复杂，除了使用vuex实现之外，还可以通过Bus（或者叫 总线/发布订阅模式/观察者模式）的方式实现非父子组件间传值。
123456789101112131415161718192021222324252627282930313233343536373839404142<div id="root"> <child1 content="组件1：点我传出值"></child1> <child2 content="组件2"></child2></div><script type="text/javascript"> Vue.prototype.bus = new Vue() // 每个Vue原型上都会有bus属性,而且指向同一个Vue实例 Vue.component('child1', &# ...
