vue.js_Day1

一、初识Vue.js

1.Vue.js简介

1.1 概念：vue.js是目前最流行的前端MVVM框架。vue.js是一套构建用户界面的渐进式的自底向上增量开发MVVM框架，vue的核心只关注视图层，不仅容易上手，还便于与第三方库或既有项目整合。通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

1.1.1 对于Vue是一套渐进式框架的理解：每个框架都会有自己的一些特点，会对开发者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。可以在原有大系统的上面，把一两个组件改用vue实现，也可以整个用vue全家桶开发，不会做职责之外的事

1.1.2 对于vue自底向上增量开发的设计的理解 ：先写一个基础的页面，把基础的东西写好，再逐一去添加功能和效果，由简单到繁琐的这么一个过程。

1.2.作者：尤雨溪（华人），前Google员工。

1.3 vue.js的优点：

1.轻量级：17kb ，性能好。

2.高效率

3.上手快

4.简单易学

5.文档全面而简洁：HTML模板 +Vue实例 + JSON数据

6.视图与数据分离 ，无需操作DOM

7.社区：大量的中文资料和开源案例，社区活跃。

1.4 vue.js 目的

1.4.1 Vue.js的产生核心是为了解决如下三个问题：

1. 解决数据绑定问题。
2. vue.js主要的目的是为了开发大型单页面应用。
3. 支持组件化，也就是可以把页面封装成为若干个组件，把组件进行拼装，这样是让页面的复用性达到最高。

1.4.2 vue.js的核心思想

• 数据驱动：
• 组件化：

2. MVC框架：

2.1什么是框架？

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

2.2框架的优势

• 使用框架提升开发效率（虽然使用框架要遵循框架的语法但是使用框架可以大大提高对于业务逻辑的操作）

2.3MVC - 表示软件可分成三部分

• 模型（Model）数据的存储和处理，再传递给视图层响应或者展示。
• 视图（View）前端的数据展示
• 控制器（Controller）对数据的接收和触发事件的接收和传递。

2.4 为什么要使用MVC？

• MVC是一种专注业务逻辑，而非显示的设计思想
• MVC中没有DOM操作
• 将数据独立出来，方便管理
• 业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。

2.5 MVC 思想

• 数据与视图分离（MVC一种将数据层与视图层进行分离的设计思想）

使用MVC的思想的方式完成数据绑定会方便很多，因为MVC更关注业务数据，不关注页面实现的表象（独立数据，不用操作DOM）

3.MVVM思想

3.1MVVM思想：意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之V层数据进行修改时，VM层会监测到变化，并且通知M层进行相应的修改。

3.1MVVM分为三个部分

1. M（Model 模型层）：主要负责业务数据相关；
2. V（View 视图层）：负责视图相关，细分下来就是html+css层；
3. VM（ViewModel 视图模型）：V与M连接的桥梁，也可以看作为控制器MVC的C层。负责监听M或者V的修改，是实现MVVM双向绑定的要点；因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理；
   

4.MVP思想

4.1概念：MVP的全称为Model-View-Presenter，Model提供数据，View负责显示，Presenter表示器，负责逻辑的处理。

4.2MVP与MVC的一个重大区别：MVP与MVC最不同的一点是M与V是不直接关联的也是就Model与View不存在直接关系，这两者之间间隔着的是Presenter层，其负责调控View与Model之间的间接交互。

二、Vue.js起步

1.Vue.js 基本的写法

1.1 第一步 创建View视图

• 应用程序的界面将显示在这里

1.2 第二步 创建 vm

• 控制器也就是 Vue.js 的实例

1.3 第三步 创建 model数据

• data 为 Vue.js 实例的固定属性，存储数据

1.4 第四步 使用数据

• 将 data 中变量 message 放在 #app内的双花括号内
• 修改 data 中的 message，会同步显示在页面中

1.5 模板组成：一片 html 代码 + 数据 + 控制器

2、Vue声明式渲染与数据驱动

2.1命令式渲染：命令程序去做什么，程序就会跟着你的命令去一步一步执行。

2.2声明式渲染：只需要告诉程序我们想要什么效果，其他的交给程序来做。

2.3 Vue声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM，也就是将模板中的文本数据写进DOM中

2.4Vue数据驱动

通过控制数据的变化来显示vue的数据驱动是视图的内容随着数据的改变而改变

2.5Vue渲染方式

• 表达式概念：使用双大括号来包裹 js 代码构成表达式
• 表达式语法：使用双花括号语法

{{表达式}}：双大括号语法，也叫模板语法

• 将双大括号中的数据替换成对应属性值进行响应式的展示

模板语法的基本用法

模板语法中可以写入：数字、字符串、计算

mvc设计思想，是为了使页面和数据进行很好的分离；如果在表达式中写入过多的逻辑代码，那么违背了最初的设计思想；也就使代码看起来很复杂，难以维护

表达式的基本用法

表达式中可以写入：JSON数据、数组、结合刚开始使用原始方法完成的demo使用vue完成演示数组数据和JSON数据。

注意：避免在双括号中使用复杂表达式

常见问题：如何区分插值中的内容是表达式还是普通文本？

Vue.js 会通过是否带引号区分两者

三、Vue.js指令

1、Vue.js 指令的概念：指令是带有v-前缀的特殊属性

2、Vue.js 指令的用途：它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML属性（attribute）。（给元素添加特殊功能）

3、Vue.js 指令的书写规范

• 书写位置：任意 HTML 元素的开始标签内
• 注意：一个开始标签内可写入多个指令，多个指令间使用空格分隔

4、常见指令

4.1、v-model指令

1. 作用：主要是用于表单上数据的双向绑定，将用户的输入同步到视图上。
2. 语法：v-model = 变量

• 注：v-model 指令必须绑定在表单元素上

双向绑定：Vue框架核心的功能就是双向的数据绑定。 双向是指：HTML标签数据绑定到 Vue对象，另外反方向数据也是绑定的。

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

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

数据劫持：当我们访问或设置对象的属性的时候，都会触发Object.defineProperty()函数来拦截（劫持），然后在返回(get)或设置(set)对象的属性的值。并且当数据发生改变的时候做出反应。

发布者-订阅者模式：其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。

4.2、v-show 指令

1. 作用：控制切换一个元素的显示和隐藏
2. 语法：v-show = 表达式

• 根据表达式结果的真假，确定是否显示当前元素。
• true表示显示该元素；false(默认)表示隐藏该元素
• 元素一直存在只是被动态设置了display：none

4.3、v-on 指令

1. 作用：为 HTML 元素绑定事件监听
2. 语法：v-on：事件名称=‘函数名称()’
3. 简写语法：@事件名称=‘函数名称()’

• 注：函数定义在 methods 配置项中

4.4、v-for 指令

1. 作用：遍历 data 中的数据，并在页面进行数据展示
2. 语法：v-for=‘(item, index) in arr’

• item表示每次遍历得到的元素。
• index表示item的索引，可选参数。

4.5、v-bind 指令

1. 作用：绑定HTML元素的属性。
2. 语法：v-bind:属性名 = ‘表达式’/
3. 语法简写 ：属性名=‘表达式’

• 绑定一个属性：

  <img v-bind:src='myUrl' />
  

• 绑定多个属性(不能使用简写)：

  <img v-bind='src:myUrl, title: msg}' />
  
  

4.6、v-if 指令

1. 作用：判断是否加载固定的内容
2. 语法：v-if = 表达式

• 根据表达式结果的真假，确定是否显示当前元素
• true表示加载该元素；false表示不加载该元素
• 元素的显示和隐藏 是对Dom元素进行添加和删除

v-show与v-if的区别：1.v-if有更高的切换消耗（安全性高），v-if是让元素直接从页面中移除；2.v-show有更高的初始化的渲染消耗（对安全性无要求选择），v-show是让元素的display属性为none进行隐藏。

4.6、v-else 指令

1. 作用：必须配合v-if使用否则无效。当v-if条件不成立的时候执行。

4.7、v-else-if 指令

1. 作用：当有一项成立时执行。

4.8、v-text指令

1. 作用：操作网页元素中的纯文本内容。{{}}是他的另外一种写法

v-text与{{}}区别：v-text与{{}}等价，{{}}叫模板插值，v-text叫指令；有一点区别就是，在渲染的数据比较多的时候，可能会把大括号显示出来，俗称屏幕闪动。

解决闪烁：1.使用v-text渲染数据；2.使用{{}}语法渲染数据，但是同时使用v-cloak指令（用来保持在元素上直到关联实例结束时候进行编译）。

4.9、v-cloak指令

1. 作用：用来保持在元素上直到关联实例结束时候进行编译。
2. 位置：v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以
   
   

4.10、v-html 指令

1. 作用：双大括号会将数据解释为纯文本，而非 HTML 元素。为了输出真正的 HTML元素 ，需要使用 v-html 指令。

2. 语法：

   <p v-html="text"></p>
   

4-11、v-once 指令

1. 当数据改变时，插值处的内容不会更新(会影响到该节点上的所有属性)

2. 语法：

   <p v-once>{{text}}</p>
   
   

4.10、v-html 指令

1. 作用：双大括号会将数据解释为纯文本，而非 HTML 元素。为了输出真正的 HTML元素 ，需要使用 v-html 指令。

2. 语法：

   <p v-html="text"></p>
   

4-11、v-once 指令

1. 当数据改变时，插值处的内容不会更新(会影响到该节点上的所有属性)

2. 语法：

   <p v-once>{{text}}</p>