【 Vue 】基础结构

简介

• 一个用于构建用户界面的渐进式框架
• 与其他单体框架不同，Vue 从一开始就被设计为可逐步采用的。
• 核心库仅专注于视图层，易于获取并与其他库或现有项目集成

MVVM模型

MVVM 视图层分为了三部分：Model , View , ViewModel
核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定

基础结构

const vm = new Vue({
	el:"<绑定需要操作的DOM根元素>",
	data:{
		// 定义变量 存放需要的数据
		name:"zwj"
	},
	// 接收父组件传递的数据 写法一
	props:{
		<父组件传递的数据的名字>:{
			type:xxx,
		}
	},
	// props 写法二
	props:["<父组件传递的数据的名字>"]，
	methods:{
		// 定义方法
		// 使用this.xxx 调用data里面的数据
	},
	/*
		自动调用函数 当函数内部使用的数据发生变化的时候 自动调用相关的函数去实现数据的变化
		计算属性 和data里面的数据差不多
	*/
	computed:{
	    // 内部定义的是一系列的函数
	    // 多个数据影响一个数据变化
	    // 计算属性得到的结果会缓存
	},
	watch:{
		// 监听data数据的变化
		// 一个数据影响多个数据的变化
		name(value){
			// coding
		}
	}
})