《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 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/《Vue》笔记/02.组件/90.vue父子组件的生命周期顺序.md。原作者：xugaoyi。许可证：MIT。

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">hel...

非父子组件间传值当组件的嵌套多时，非父子组件间传值就显得复杂，除了使用vuex实现之外，还可以通过Bus（或者叫 总线/发布订阅模式/观察者模式）的方式实现非父子组件间传值。 123456789101112131415161718192021222324252627282930313233343536373839404142<div id="root"> <child1 content="组件1：点我传出值"></child1> <child2 content="组件2"></child2></div>&lt;script type="text/javascript"> Vue.prototype.bus = new Vue() // 每个Vue原型上都会有bus属性,而且指向同一个Vue实例 Vue.component('child1', ...

自定义事件API 在组件标签v-on绑定的事件是自定义事件123456789101112131415161718<div id="root"> <child @click="handleClick"></child> <!--这里click是自定义事件--></div>&lt;script type="text/javascript"> Vue.component('child', { template: '<button>Child</button>', }) var vm = new Vue({ el: '#root' methods: { handleClick() { alert('...

使用组件的细节点解析 DOM 模板时的注意事项1234567891011121314151617<div id="root"> <table> <tbody> <row></row> <row></row> <row></row> </tbody> </table></div>&lt;script type="text/javascript"> Vue.component('row', { template: '<tr><td>this is a row</td></tr>' }) var vm = new Vue({ ...

v-if vs v-showAPI v-if 根据渲染条件决定是否把元素渲染到DOM页面，而v-show不管渲染条件是什么，都会把元素渲染到DOM页面，只是简单的切换CSS的显示隐藏。 如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/《Vue》笔记/01.基础/30.v-if vs v-show.md。原作者：xugaoyi。许可证：MIT。

计算属性 vs 方法 vs 侦听属性API 如果一个功能同时可以使用计算属性(computed)、方法(methods)、侦听属性(watch)来实现的时候推荐使用计算属性。 计算属性 方法 侦听属性 计算属性是基于它们的响应式依赖进行缓存的 每当触发重新渲染时，调用方法将总会再次执行函数 有缓存，但相比计算属性，实现起来要复杂很多。 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/《Vue》笔记/01.基础/20.计算属性 vs 方法 vs 侦听属性.md。原作者：xugaoyi。许可证：MIT。

实例生命周期钩子实例生命周期钩子API 简单理解，生命周期钩子函数就是vue实例在某一个时间点会自动执行的函数。 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364<div id="app">{{msg}}</div>&lt;script src="https://cdn.bootcss.com/vue/2.4.2/vue.js">&lt;/script>&lt;script> var vm = new Vue({ el: '#app', data: { msg: 'Vue的生命周期' }, beforeCreate: function() ...

vuex操作相关123456789101112131415161718192021222324import { mapActions, mapMutations, mapGetters } from 'vuex'computed: { ...mapGetters([ // 获取数据，内部为数组 'searchHistory' // 相当于在data插入searchHistory和获取到的数据 ])},methods: { 某方法(){ this.saveSearchHistory(传入值) }, ...mapActions([ // 提交actions修改数据，内部为数组 因为actions文件已对方法进行了封装所有是数组类型 'saveSearchHistory' // 相当于在methods绑定了事件saveSearchHistory ]), 某方法() { this.setFullScre...

兄弟组件传值子组件1中把值传到父组件,父组件获取值传入子组件2 父组件： 123456789101112131415<子组件1 @方法名x="方法名y"></子组件1><子组件2 :值名称x="值x"></子组件2 >data() { return { 值x: '' }},methods: { 方法名y(值) { this.值x = 值 }} 子组件1： 1this.$emit('方法名x', 值) // 传出值 子组件2： 123456props: { 值名称x: { // 接收父组件传入值 type: String, default: '' }} 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/《Vue》笔...