组件基础
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：
<div id="components-demo">
<button-counter></button-counter>
</div>
一个组件也拥有data、methods、computed、watch这些属性，但一个组件里，data必须是一个函数，data里的数据必须通过return返回。
一个组件必须只能有一个根元素，所以需要将组件包裹在一个父级的div容器里。
组件的注册
组件的全局注册
Vue.component('my-component-name', {
// ... 选项 ...
})
组件的局部注册
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
},
// ...
}
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
组件模板
//以VUE为后缀名的文件，有如下模板
<template>
<div></div>
</template>
<script>
</script>
<style>
</style>
父子组件传值
父组件向子组件传值，是通过属性来传递的。prop是你可以在组件上注册的一些自定义特性，当一个值传递给一个prop特性的时候，它就变成了那个组件实例上的一个属性。当prop注册之后，就可以把数据作为一个自定义特性传递进来。
//父组件发送数据
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
//子组件接受数据
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
子组件向父组件传值，是通过事件触发的方式来传递的：
1.绑定
methods:{
handleEvent:function(msg){}
}
<son @customEvent="handleEvent"></son>
2.触发
子组件内部：
this.$emit(‘customEvent’,100);
ref是可以让父组件得到子组件中的数据和方法：
1.指定ref属性
<son ref="mySon"></son>
2.根据ref得到子组件实例
this.$refs.mySon
parent可以得到父组件的实例：
this.$parent得到父组件的实例
非父子组件间通信
兄弟组件通信:
1.var bus = new Vue();
2.接收方
bus.$on('eventName',function(msg){})
3.发送方
bus.$emit('eventName',123);
自定义指令
创建和使用
Vue.directive('change',{
bind:function(el,bindings){
//首次调用
},
update:function(el,bindings){
//只要是有数据变化，都会调用
},
unbind:function(){
//解绑
}
})
<any v-change="count"></any>
钩子函数：
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
unbind：只调用一次，指令与元素解绑时调用。
接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。
自定义指令中传递的三个参数：
el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。
过滤器
1.创建
Vue.filter(
'myFilter',
function(myInput){
//myInput是在调用过滤器时，管道前表达式执行的结果
//针对myInput，按照业务需求做处理
//返回
return '处理后的结果'
})
2.使用
<any>{{expression | myFilter}}</any>
在调用过滤器的时候，完成参数的发送和接受
1.发送
<any>{{expression | myFilter(参数1，参数2)}}</any>
2.接受
Vue.filter('myFilter',function(myInput，参数1，参数2){
return '处理后的结果'
})
Vue生命周期
什么是vue的生命周期
指的是实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
生命周期的作用
生命周期中有多个钩子函数，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
总共有八个阶段也就是八个钩子函数
创建前/后, 载入前/后,更新前/后,销毁前/销毁后
页面第一次加载的时候会触发beforeCreate, created, beforeMount, mounted 这几个钩子，DOM 渲染在 mounted 中就完成
每个周期的具体场景
-
beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
-
created
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：
数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 -
beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
-
mounted
el 被新创建的 vm.
el 也在文档内。
-
beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
-
updated
由于数据更改导致的虚拟 DOM，重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
-
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
-
destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
网友评论