vue的基础

（一）vue.js介绍

1.vue是什么？

• 前端男神尤雨溪
• 构建用户界面的渐进式框架，采用自底向上，增量开发的设计。
• Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
• Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架。

2.vue的核心理念

• 核心理念：数据驱动视图，组件化开发

（二）2.为什么学习流行框架

• 轻量级框架:只关注视图层，是一个构建数据的视图集合
• 简单易学:国人开发，中文文档，不存在语言障碍，易于理解和学习·
• 视图、数据、结构分离:使数据的更改更为简单
• 不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作·
• 虚拟DOM:不再使用原生的dom操作节点，极大解放dom操作。
• 运行速度更快：相比较与react而言，vue存在很大的优势

（三）框架和库的区别

3.1 框架

• 是一套完整的解决方案;对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。

3.2.库

• 提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

（四）MVC和MVVM ***

4.1 MVC

• MVC 是一种设计模式，表示“Model-View-Controller”，是后端的分层开发概念。
• v-view：视图层，用来展示数据，发送请求
• c-controller:调度层用来接收数据，响应数据
• m-model:模型层，用来处理数据，和数据库做交互。

4.2 MVVM

• MVVM 表示“Model-View-ViewModel”，是前端视图层的概念，主要关注于视图层分离。

• v-view:视图层，用来展示数据
• vm-view-model:视图模型层，用来链接view和model,承上启下的作用

• m-model模型层，对数据进行逻辑的处理。

4.3MVC和MVVM的区别

（五）vue.js的代码结构

1. 引入vue.js
2. 书写视图层
3. 实例化Vue(）

（六）展示数据的方法

• 差值表达式份{{}} ，可以做一些简单的运算.
• v-text：类似于js中innerText，将覆盖元素中所有现有的内容
• v-html：类似于js中innerHTML，内容按普通 HTML 插入
• 富文本：字符串，有标签等符号
• v-html和v-text的异同:

• • 相同点:都会覆盖原来的元素
  • 不同点: v-html能解析富文本，v-text不能.

（七）写页面的基本步骤

1、搭建静态

2、分析数据（活数据死数据)

3、逻辑处理

（八）v-bind、v-on

8.1 v-bind

• 元素属性的绑定
• 写法：v-bind:属性 简写： :属性

8.2 v-on

• 事件的绑定
• 写法：v-on：事件类型 简写：@事件类型

（九）事件修饰符

在事件处理程序中调用 event.preventDefault() 或event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为v-on提供了事件修饰符。

9.1 .stop

• 阻止冒泡：阻止事件向外传播
• 冒泡：从里往外

9.2 .capture

• 添加捕获模式
• 捕获：从外往里
• 先捕获后冒泡

9.3 .self

• 只有作用于本身的时候才会触发回调

9.4 .once

• 事件只会触发一次

9.5 .prevent

• 阻止默认事件

（十）v-model ：数据双向绑定

• 绑定表单控件 input
• input 简单运算 + - * /

• 原理***：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

（十一）vue中样式的使用

11.1 使用class样式 .class

• 数组
• 对象
• 数组的内置对象
• 三目表达式***

11.2 使用内联样式 .style

• 数组
• 对象
• 函数的返回值***

（十二）v-for和key属性

12.1遍历数组

12.2遍历对象

12.3遍历数字

12.4 key属性

• 只能是数字或者字符串
• 必须是唯一值（不可重复）
• 作用：提高重排效率，就地复用 （diff算法）
• v-for和key 不可分割

（十三）v-if 和v-show（显示隐藏元素）

v-if 和v-show的异同

• 相同点：都是显示隐藏元素
• 不同点：

• • v-if 是通过删除DOM元素进行隐藏

• • v-show是通过display：none进行元素的隐藏

• 应用场景不同：

• • v-if：修改一次或少次的切换
  • v-show：频繁的切换显示与隐藏

• v-else 、v-else-if