vue了解

一：初始vue.js

1·1：vue简介

vue是一种构建用户界面的渐进式的自底向上增量开发的MVVM框架

渐进式：可以在原有的系统的基础上，将一两个功能模块或者整个用vue全家桶开发，【不做职责之外的事情】

自底向上增量开发：先实现简单基础的页面。将基础的东西写好，在去添加功能和交互的效果，又简单到复杂的一个过程

1·2：vue的目的

• 解决数据的绑定问题
• 开发大型单页面的应用
• 支持组件化，将组件进行拼装，让页面的复用性达到最高

1·3：vue的核心思想

数据驱动：vue中是通过数据来推动着页面的展示 数据改变页面自动发生改变

组件化：

声明式渲染

二：框架

2·1：框架是什么

​ 封装与业务无关的重复代码，形成框架

优点：提高开发效率

缺点：重新掌握一套语法

2·2：MVC框架（了解）

• Model：模型，数据的存储和处理，在传递给相应的视图层去展示

• View：视图，前端的数据展示

• Controller：控制层，对数据的接收和触发事件的接收和传递、

2.3:MVC框架的使用价值

• MVC 是一种专注业务逻辑，而非显示的设计思想

• MVC 中没有DOM操作

• 将数据独立出来，便于管理

• 将业务逻辑，数据与界面显示分离的方法组织代码，在改进界面或者用户交互的同时，不需要重新编写业务逻辑

2·4：MVVM框架：

• M（Model，模型层 ）：负责业务数据相关
• V（View，视图层）：负责视图相关，细分下来就是html+css层
• VM（ViewModel）：M与V的桥梁，负责监听M或者修改V，是双向绑定的要点

因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

三：vue的使用

• 下载：项目下面使用npm init -y

• 下载vue包，npm install --save vue 简写：npm I -S vue

• 引入

• 第一步：创建view视图 【应用程序的界面将显示在这里】

• 第二步：创建vm【控制器也就是 Vue.js 的实例】

• 第三步：创建model数据【data为 Vue.js 实例的固定属性，存储数据】

• 第四步：使用数据【将 data 中变量 放在 双花括号内，修改data中的值，会同步到页面上】

3·2：数据的渲染方式

3·2.1：命令式渲染：

​ 命令程序去做什么，程序就会跟着你的命令去一步一步执行

3.2.2：声明式渲染：

​ 只需要告诉程序我们想要什么效果，其他的交给程序来做

3·3：模板语法：{{}}

3·3·1：模板语法中可以写

• 数字
• 字符串
• 计算:表达式中可以写

3·3·2：表达式:通过计算得到结果的公式

• json数据
• 数组

3·3·3：注意常见问题

• 避免在双括号中使用复杂表达式
• 如何区分插值中的内容是表达式还是普通文本？
  Vue.js 会通过是否带引号区分两者

四：vue的指令

属性：扩展html标签的功能的

指令：带有v-前缀的特殊属性，作用于html元素，指令与特定的元素进行绑定时，会为其添加一些特殊的行为

4·1：指令的书写规范

任意 HTML 元素的开始标签内

一个开始标签内可写入多个指令，多个指令间使用空格分隔

4·2：双向绑定：

HTML标签数据 绑定到 Vue对象，另外反方向数据也是绑定的

双向绑定的原理：

数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的

数据劫持:当我们访问或设置对象的属性的时候
Vue 利用Object.defineProperty（）创建一个observe 来劫持监听所有的属性，把这些属性全部转为 getter 和 setter。

Vue 中每个组件实例都会对应一个 watcher 实例，它会在组件渲染的过程中把使用过的数据属性通过 getter 收集为依赖。

之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

双向绑定的优点

4·3：常见的指令

4·3·1：v-model

作用：表单元素的数据双向绑定

语法：v-model=变量

v-model指令来实现双向数据绑定 把视图数据与模型数据相互绑定

4·3·2：v-show

作用：控制一个元素的显示和隐藏

语法：v-show=变量

根据的表达式结果的真假，确定当前的元素是否显示

true表示显示，false表示隐藏

【注意】：元素一直存在，只是被动态的设置了display：none

视图数据与模型数据相互绑定

4·3·2：v-show

作用：控制一个元素的显示和隐藏

语法：v-show=变量

根据的表达式结果的真假，确定当前的元素是否显示

true表示显示，false表示隐藏

【注意】：元素一直存在，只是被动态的设置了display：none