2021-05-28Vue的学习思维导图

1.vue的基本代码结构

const vm=new Vue({
	el:"#app",//把实例与视图层进行关联
	data：{//this->window},//把实例与数据层进行关联
	methods:{//this->vm},
	props:{
		//可以是数组或者对象，用于接收父组件数据
		//对象可以配置高级选项，如类型检测、自定义验证和设置默认值
	},
	watch:{//this->wm},
	computed:{},
	render(){
		//声明周期钩子函数
	}
})

实例属性和方法

• 访问el属性：vm.$el
• 访问data属性：vm.$data
• 访问data中定义的变量：vm.a,vm.$data.a
• 访问methods中的方法：vm.方法名()
• 访问watch方法：vm.$watch

2.Vue指令

3.Vue组件

4.class和style动态绑定

6.computed计算属性

7.事件总线bus

8.filter过滤器方法