时长:3h
顺一遍vue基础1的知识点:
我写的一个简单的笔记
1vue的基本使用:数据驱动视图 {{插值}}
2vue的指令系统:v-if与v-show;v-on绑定事件、v-bind绑定标签上的属性、v-for = "item,index) in menuLists .自定义指令。
3vue的双向数据绑定:v-model只用用于UI控件,是v-bind 和 v-on的结合。
4局部组件的创建:声子、挂子、用子(子组件)。组件化(可复用)。
01-vue的局部组件的使用
//全局组件
Vue.component('Vbtn',{
template:'button'
})
//局部组件
var Vheader ={
data(){
return{}
},
template:'i am header. ',
methods:{}
}
//声子
var App ={
template:'我是入口组件 <',
components:{Vheader}
};
new Vue({
el:'#app',
data(){
return{}
},
components:{
App
},
template:' '
})
父子之间的组件传值、平行之间的组件传值。
02-通过prop往子组件通信prop
//全局组件。
//第一个参数是组件的名字,第一个参数是options
//1.prent 2.child
Vue.component('Child',{
template:'i am a child component.
',
props:['childData'],
methods:{changeValue(val){
//自定义的事件一定通过$emit
//在函数中$emit(自定义的事件名,消息)
this.$emit('childHandler',val)
}}
});
//父===》子
//1.先给父组件中绑定自定义的属性
//2.在子组件中使用props接收父组件传递的数据
//3.可以在子组件中任意使用
//子==》父
//1.在父组件绑定自定义的事件
//2.在子组件中触发原生的事件 在函数中使用$emit触发自定义的childHandler
Vue.component('Parent',{
data(){
return{msg:'i am a date of father component.'}
},
template:'i am a father component.
',
methods:{childHander(val){console.log(val);}};
});
//1声子
var App={
template:' '
};
new Vue({
el:'#app',
data(){
}
})
03-通过事件向父组件发送消息$emit
04-全局组件的使用slot
插槽,是内置的全局组件slot 作为承载分发内容的出口。
使用elementUI的按钮。通过Chrome的element来找元素,复制样式。来用插槽的方式封装组件。
05-具名插槽
var App={
template:'
<div><ul><myli><h2 slot ='two'>我是第一个坑</h2><h3 slot='three'>我是第二个坑</h3></myli></ul></div>
}
06-过滤器
为页面的数据进行添油加醋的功能,有两种,局部过滤器和全部过滤器。filters:{key:value}
做反转,
//全局过滤器
//1声明过滤器;2{{数据|过滤器的名字}}
Vue.filter('myReverse',function(value,arg){return arg+""+value.split('').reverse().join('');});
var App={
data(){
return{
price:0,
msg:'hello filter'
}
},
template:'/>
<h3>{{price|myCurrentcy}}</h3>
<h4>{{msg|myReverse('哈哈哈')}}</h4>
</div>',
filters:{
//1声明过滤器
myCurrentcy:function(value){return "¥"+valur}
}
}
监听watch
07-watch
监听date中的属性。
new Vue({
el:'#app',
data(){
return{msg:''}
},
watch:{
msg:function(newV,oldV){
console.log(newV,oldV);
if(newV==='tusir'){console.log('tusir来了');}
}
}
});
计算属性computed
08-计算属性
computed:{
//计算属性默认只要getter
getCurrentSongStc:function(){
return this.musicData[0].songSrc
}
},
methods:{
clickHandler(item){}
}
生命周期
created mounted updated destryed
beforeCreate:function(){
//组件创建之前
console.log(this.msg);//undefine
},
created:function(){
//组件创建之后
console.log(this.msg);
//使用该组件,就会调用created方法。
//在created这个方法中可以操作后端的数据,数据驱动视图。
//应用:发送ajax请求
},
beforeMount:function(){
//挂载数据到DOM之前会调用
console.log(document.getElementById('app'));
},
mounted:function(){
//挂载数据到DOM之后会调用Vue作用之后的DOM 操作DOM
console.log(document.getElementById('app'));
},
beforUpdata:function(){
//在更新DOM之前 调用该钩子 应用:可以获取原始的DOM
},
updated:function(){
//更新DOM之后调用该钩子 应用:可以获取最新的DOM
}
beforDestroy:function(){
console.log('beforDestroy');
},
destroyed:function(){
console.log('destroyed');
},
activated:function(){
console.log('组件被激活了');
},
deactivated:function(){
console.log('组件被停用了');
}
ajax请求
$.ajax({
url:''
methods:'get',
success:(data)=>{
this.data =data;
}
})
vue组件通信一(父子组件)
//1props和$emit
//父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$emit触发事件来做到的。
//在下面的例子中,有父组件App和子组件Child。
//1父组件传递了message数据给子组件,并且通过v-on绑定了一个getChildData事件来监听子组件的触发事件;
//2子组件通过props得到相关的message数据,最后通过this.$emit触发了getChildData事件。
vue组件通信二(多层组件)
/*$attrs和$listeners
第一种方式处理父子组件之间的数据传输有一个问题:如果父组件A下面有子组件B,子组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办?
如果采用第一种方法,我们必须让组件A通过prop传递消息给组件B,组件B再通过prop传递消息给组件C;
要是组件A和组件C之间有更多的组件,那采用这种方式就很复杂了。vue2.4开始提供了$attrs和$listeners来解决这个问题,能够让组件A之间传递消息给组件C。
*/
methods:{
cClickHandler(){
alert(1);
this.$emit('getCData','我是C的数据')
}
}
Vue.component('A',{
data(){return{}},
props:['message'],
template:'
<div>
<B v-bind="$attrs"v-on'$listeners'></B>
</div>',
})
vue组件通信三(平行组件)
/*
上面两种方式处理的都是父子组件之间的数据传递,而如果两个组件不是父子关系呢?这种情况下可以使用中央事件总线的方式。新建一个vue事件bus对象,然后通过bus.$emit触发事件,bus.$on监听触发的事件。
*/
//中央事件组件
Vue.component('brother1',{
data(){return{
msg:"hello brother1",
brother2Msg:''
}},
template:'<div><p>我是老二</p>
<p>老大传递过来的数据:{{brother2Msg}}</p>
</div>',
mounted(){
//绑定全局事件globalEvent事件
bus.$on('globalEvent',(val)=>{
this.brother2Msg = val;
})
}
});
vue组件通信四父往子多层通信
/*
父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据,只要在父组件的生命周期内,子组件都可以调用。
*/
Vue.component('Child',{
data(){return{msg:''}},
template:'我是孩子{{msg}}',
inject:['for'],
created(){
this.msg=this.for;
}
});
Vue.component('Father',{
data(){}
})
Vue组件通信五子往父多层通信
Vue.component('Child',{
props:{value:String,//v-model会自动传递一个字段为value的prop属性},
data(){return{mymessage:this.value}},
methods:{
changeValue(){
this.$parent.message=this.mymessage;
//通过如此调用可以改变父组件的值
}
},
template:'
<div>
<input type='text'v-model='value'@change='changeValue'/>
</div>',
});
Vue.component('Parent',{
template:'<div><p>我是父组件</p>
<button @click="changeChildValue">test</button>
<Child></Child></div>',
methods:{
changeChildValue(){
this.$children[0].mymessage='hello';
}
},
data(){return(message:'hello')}
})
总结
vuex用得少
vuex
中央空调;store商店;
processON画流程图。
总结
这一部分还是收获不少的,对组件以及组件通信的认识更全面了。也熟悉了在官网学习的方法了。