1.vue组件
1.1局部组件的使用
var App = {
tempalte:`
`
};
//2.挂子
1.2父组件向子组件传递数据:通过Prop
1.在子组件自定义特性。props:['自定义的属性1','自定义属性2']
当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性,那么我们就可以像访问data中的值一样
2.要在父组件中导入的子组件内部 绑定自定义的属性
1.3子组件传递数据到父组件
1.给子组件中的某个按钮绑定原声事件,。我们可以调用内建的 this.$emit('自定义的事件名','传递的数据')，来向父级组件触发一个自定义的事件.
2.在父组件中的子组件标签中 要绑定自定义的事件,
上面的例子中，更改字体大小的按钮事件，就使用了 this.$emit1.4全局组件.slot组件
Vue.component('全局组件的名字',{
跟new Vue() 实例化对象中的options是一样，但是要注意：
不管是公共组件还是局部组件 data必须是个函数 函数一定要返回 {}
})
#slot
Vue.component('Vbtn', {
template: ``,
props: ['type']
});
//全局组件使用的时候，不需要components:注入
var Vheader = {
data() {
return {
}
},
template: `
登录
注册
提交
默认的按钮
主要的按钮
成功的按钮
`
};
2.过滤器
###局部过滤器
//1.注册局部过滤器 在组件对象中定义
filters:{
'过滤器的名字':function(value){
}
}
//2.使用过滤器 使用管道符 |
{{price | '过滤器的名字'}}
##### 全局过滤器
// 注册全局的过滤器
//第一个参数是过滤器的名字，第二个参数是执行的操作
Vue.filter('reverse',function(value) {
return value.split('').reverse().join('');
});
//使用跟 局部过滤器一样
{{ price | currentPrice}}
{{msg | reverse}}
3.计算属性
3.1侦听多个属性:计算属性watch
侦听的是单个属性
watch:{
数据属性的名字：function(value){
},
数据属性的名字2：function(value){
}
}
{{ myName}}
3.2侦听多个属性:计算属性 computed
计算属性 :默认只有getter方法
compuetd:{
key:value
计算属性的方法名:funtion(){
return ${this.name}他的年龄是${this.age}
}
}
{{vitaDesc}}
3.3计算属性的setter方法
{{vitaDesc}}
3.4setter的用途
{{alexDesc}}
3.5计算属性之音乐播放器
-
{{item.id}}--歌曲为:{{item.name}}
歌手:{{item.author}}
4.生命周期
4.1生命周期的方法
https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
Document
4.2使用$refs获取DOM元素
// $属性：
// $refs获取组件内的元素
// $parent:获取当前组件的父组件
// $children:获取当前组件的子组件
// $root:获取New Vue的实例化对象
//$el:获取组件对象的DOM元素
Document
4.3使用$nextTick的特殊情况
获取更新之后的dom添加事件的特殊情况
nextTick 是在下次Dom更新循环结束之后执行的延迟回调，在修改数据之后使用$nextTick ，则可以在回调中获取更新之后的DOM
Document
