vue基础

VUE 基础

框架和库的区别

库(Library)，代表：jQuery

• 库是一系列函数的集合，在使用库的基础上，想要完成什么样的功能就调用库中提供的某个方法
• 库起到了一个辅助的作用，在使用库的时候，开发人员起主导作用

框架(Framework)，代表：Vue

• 框架是一套完整的解决方案，框架中制定了一套规则，使用框架的时候，只需要按照规则把代码放到合适的地方，框架会在合适的时机主动调用开发人员的代码
• 开发过程中 框架起主导作用

本质区别：控制反转(you call libs, frameworks call you)

MVC & MVVM

MVC

1. MVC是一种软件架构模式（设计模式）
2. M：Model数据模型（专门用来操作数据，数据的C[增]R[删]U[改]D[查]）
3. V：View视图（对于前端来说就是页面）
4. C：Controller 控制器 （视图和数据模型沟通的桥梁，用于处理业务逻辑）

MVVM

1. M：Model数据层
2. V：View 视图层
3. VM：ViewModel 视图模型
4. 核心：M <=> VM <=> V

区别

• MVC 将应用程序划为三个部分，实现职责分离，但需要频繁操作DOM
  • 比如ajax请求、增删改查、设置样式和动画
• MVVM通过双向数据绑定让数据自动的双向同步，操作DOM时想到的不是获取元素而是数据
• 数据驱动视图，数据是核心的思想

Vue基本使用

1. 安装： npm i vue
2. 导入：<script src="./node_modules//vue/dist/vue.js"></script>
3. 实例：

const vm = new Vue({
	//指定vue管理的边界
	el: '#app',
	//提供视图中需要的数据，视图中可以直接使用data中的数据
	data: {
		msg: 'xxx'
	}
})

插值表达式 {{}}

1. {{}} Mustache 小胡子语法 插值表达式
2. 作用：使用{{}}从data中获取数据，并展示在模板中
3. 说明：{{}}中只能出现 js 表达式
4. {{}}语法不能作用在HTML元素的属性上