0.Vue知识学习整理-1_2020-03-17

一.Vue开发知识体系：

1.MVVM-数据驱动视图
2.Vm-Vue实例提供的ViewModel指令系统new Vue({data(){return{数据源}},template:"",components:{},methods:{}});
3.组件化开发：Vue实例、入口组件、子组件、全局组件、通用全局组件
4.1组件传值-->父传子，props:["变量名"]：
<父组件  data(){return{父组件值}}, template:'<子组件名 :PropsSet = "this.父组件值" />'<子组件  data(){return{子组件值}}, props:["PropsSet"]，template:'<input :value = "this.PropsSet" />'
4.2组件传值-->子传父，this.$emit('自定义事件event',子组件数据childData)，
挂载<子组件名 @自定义事件event="父组件方法"/>，自定义事件event(子组件数据childData){this.父组件值=childData}：<父组件  data(){return{父组件值}}, template:'<子组件名 :PropsSet = "this.父组件值" />'<子组件  data(){return{子组件值}}, props:["PropsSet"]，template:'<input :value = "this.PropsSet" />'
5.插槽-slot，匿名插槽，具名插槽

二.Vue知识整理：
4.组件通信

Vue.component('组件name',{...});//声明一个全局组件
//父传子
Vue.compontent('child',{ props:['变量name']});//子组件用props定义变量
Vue.compontent('parent',{
data(){return {父属性:'父值'}}，//定义父属性值
template:'<child : 变量name=this.父属性/>'//挂载props定义变量
});

//子传父

Vue.compontent('child',{//子组件
data(){return {子属性:'子值'}}，//定义父属性值
template:'<div @click="childFunc"></div>',
methods:{
childfFunc(){
this.$emit('elent',this.子属性);
}
}
});
Vue.compontent('parent',{//父组件
template:'<child @ elent ="parentFun" />',
methods:{
parentFun(子属性){
this. parentName=子属性;
}
},
data(){
return{
parentName="父值"
}
}
});

3.组件化开发

new Vue({...});//实例化一个对象
var 组件名={...};//实例化一个组件
components:{组件name};//挂载组件
template:'组件name'//使用组件

2.指令v-on:事件、v-bind:、V-model、等提供一套解决方案

1.Vue的原理
MVVM的原理，数据驱动视图，V->view，M->Model，VM->监听数据，驱动渲染View.
ViewModel是vue.js的核心，他是一个Vue实例，可以挂载到Html元素上，通过el:"#id"，作用于某个元素。
![image.png](https://img.haomeiwen.com/i1319108/a8723b1d09c5755b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)