vue入门讲解 day01

一、设计模式

1、SPA

			Single Page Application  单页应用程序

• 就是只有一个web页面的应用，所有的操作都在这个页面上完成（容器页面）
• 浏览器一开始会加载相应的HTML、CSS和JavaScript，然后将所有的活动都局限在该Web页面中
• 当用户与应用程序交互时通过JavaScript动态更新页面中的内容

2、MVVM

		Model-View-ViewModel  模型-视图-视图模型

• 模型：指的是构成页面内容的相关数据（前端定义的数据与后端传递接收的数据）
• 视图：指的是呈现给开发都和用户查看的展示数据的页面
• 视图模型：mvvm设计模式的核心思想，它是连接view和mode的桥梁

实现MVVM设计思想的框架：

• 基本上都高度封装了view-model的交互过程，完成对DOM功能的极限封装
• 开发者几乎不用操作DOM就可以完成页面和数据的关联交互
• 开发都只需关心页面的构成和数据的构成，无需花费大量时间关心页面和数据的状态关系
• Vue、Angular、React等目前主流框架就是实现MVVM设计思想的前端框架

二、Vue的基本使用

Vue的页面使用方式：

• 在页面中直接引入Vue核心库的js文件
• 该方式只是为了让开发者在学习Vue语法时可以快速掌握
• 实际上Vue并不适合直接使用页面方式进行语法定义，更推荐使用模块化方式
  使用步骤：
  1、获取Vue核心库的js文件
  通过https://cdn.jsdelivr.net/npm/vue/dist/vue.js 下载
  使用npm下载：npm install vue
  2、在页面中引入Vue

<script src="js/vue.js"></script>
//和正常引入js文件一样，路径一定要对

当页面装载Vue核心库后，会在浏览器window对象中提供一个全局的构造函数Vue

该构造函数是一个js对象构造器，使用时需要通过new关键字进行Vue对象的创建

调试工具：

安装vue-devtools插件，便于在浏览器中调试vue（这个自行百度或者留言，这边就不说了）

全局环境配置

三、基本交互

插值表达式

语法： {{  }}   由两对大括号组成，称为“Mustache”语法
作用：用于在页面标签中插入值，进行数据的绑定显示，且当值发生变化时标签会重新渲染加载，称为响应式特性，即数据状态同步操作
当然这个数据也可以来至后台（这个如果基础薄弱的小伙伴不要操之过急）

指令

具体效果大家可以自己试一下，今天就写到这里了，有点累了