Vue(一) 简单认识Vue

-----    后面所学习的是Vue3    -----

一.简介

1.1渐进式框架

简单地说，渐进式的概念是分层设计，每层可选，不同层可以灵活接入其他方案架构模式。

举个例子，我们要买一台电脑，店家给我们提供了一个IBM。

官方可能会提供windows作为可选，我们也可以在电脑上安装我们自己喜欢的Ubuntu。

装完系统后，官方可能还提供了一系列的“装机必备”，浏览器、编辑器、播放器等等，我们可以选择使用，也可以不用，然后在应用市场选择我们喜欢的软件安装。

在这个例子里面，官方提供的产品分为电脑裸机/操作系统/软件这3层，每层都是可选的，可以接入其他的产品。这就是一个渐进式的产品。

渐进式的最大好处就是灵活，可以根据不同场景做定制。

1.2 M V VM模式

学习Vue之前 MVC模式

Model 模型数据（service） → View 视图（jsp） → Controller 控制器

动态加载数据：

jsp/html：a.从controller直接跳转到视图页面，携带数据（必须通过controller访问视图页面）

​ b.在jsp/html使用ajax异步通讯（必须操作大量得dom节点）

1.controller报错，页面500

2.controller不报错，list，name属性不存在，页面500

3.不同的view，需要的数据是一致的，需要写不同的controller跳转到不同的页面

学习Vue之后 M V VM

Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为

抽象化，让我们将视图 UI 和业务逻辑分开。其中的 ViewModel 是一种创新。

• Model：数据data

• View：视图，视图template，比如HTML

• ViewModel：VUE的实例，new VUE()，Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML

  的body元素，也可以是指定了id的某个元素。

下图不仅概括了MVVM模式（Model-View-ViewModel），还描述了在Vue.js中ViewModel是如何和View以及

Model进行交互的

ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML

的body元素，也可以是指定了id的某个元素。

当创建了ViewModel后，双向绑定是如何达成的呢？

首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。

从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改

Model中的数据；

从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

View可以通过事件绑定的方式影响 Model，Model可以通过数据绑定的形式影响到View，ViewModel是把 Model和 View连起来的连接器

1.3 Vue 渐进式

Vue是一款用于构建用户界面的渐进式 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，和angular.js，react.js一起并成为前端三大框架。可以帮助我们高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue是当下很火的一个JavaScript MVVM库，Vue是数据驱动的，无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

vue提供了现代Web开发中常见的高级功能：

• 解耦视图与数据

• 可复用的组件

• 前端路由

• 状态管理

• 虚拟DOM（Virtual DOM）

渐进式 

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。

• declarative rendering（声明式渲染）

• component system（组件系统）

• client-side routing（前端路由）

• state management（状态管理）

• build system（构建系统）

根据你的需求场景，你可以用不同的方式使用 Vue：

• 无需构建步骤，渐进式增强静态的 HTML：可以使用vue的声明式渲染，通过new Vue()，传入模板、挂载点和数据渲染一块视图，但不用其他的功能

• 在任何页面中作为 Web Components 嵌入：可以使用jquery设计自己的组件，也可以使用vue设计组件

• 单页应用 (SPA)：

• 全栈 / 服务端渲染 (SSR)：可以使用前端路由，或者不用vue-router，或者自己实现自己的router

• Jamstack / 静态站点生成 (SSG)：状态管理你可以使用redux，当然使用vuex也可以很方便地接入

• 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面：可以自己使用webpack或者其他构建工具搭建你的项目，也可以选择使用vue-cli

1.4 Vue版本

vue版本	vue-router版本	vuex版本
2.9.6	3.0.1	未知
3.11.0	3.5.1	3.6.2
4.4.6	3.2.0	3.4.0
4.5.0	vue2项目对应的vue-router版本号是4.0.0-0；vue3项目对应的vue-router版本号是3.2.0	vue2项目vuex的版本号是4.0.0-0；vue3项目vuex的版本号是3.4.0

区别

• vue2采用的是面向对象编程，vue3采用函数式编程

• vue3提高可维护能力，开放更多底层功能

• vue2和vue3双向数据绑定原理发生了改变

• vue2和vue3定义数据变量和方法的改变

• vue2和vue3生命周期钩子函数的不同

• vue3中新加入了TypeScript和PWA的支持

 二. Vue安装

1.Node.js

使用Vue需要下载Node.js文件 后面会进行使用

2.Vue 

Vue有两种使用方式 一种是下载到本地使用 一种是从官网找到访问连接进行使用

因为考虑到网络可能有时候并不太好 所以后面所有的使用的全是本地下载好的

1.下载到本地使用

在 Vue.js 的官网上直接下载 vue.min.js 并用<script>标签引入。

2.使用CDN方法

链接 快速上手 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/guide/quick-start.html

三. 创建第一个Vue项目 

可用的开发工具比较多 如: 这里我使用的是 Hbuilder X

Hbuilderx

Idea

Webstorm

Vscode 

 1.创建项目

 2. 引入Vue文件---->我这边使用的是本地下载好的

       Ok Vue的精髓已经学习完毕

 

3.创建Vue实例

Vue3 中的应用是通过使用 createApp 函数来创建一个新的 应用实例，传递给 createApp 的选项用于配置根组件。  

 3.1: 将Vue文件进入进来

3.2: 创建实例 

3.3: 挂载应用 mount

应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：

应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。

.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意，不同于其他资源注册方法，它的返回值是根组件实例而非应用实例。

3.4: 创建Data选项

data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。

--- 必须是JSON格式 ---

 3.5方法methods

可以在组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象。

四. 模版语法

上面的代码写完运行是没任何效果的 下面学习取值 将写好的东西取出来

简介

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。

如果你对虚拟 DOM 的概念比较熟悉，并且偏好直接使用 JavaScript，你也可以结合可选的 JSX 支持直接手写渲染函数而不采用模板。

1. 文本插值

数据绑定最常见的形式就是使用 {{起的名字}}（双大括号）的文本插值：

{{...}} 标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{{...}} 标签内容也会更新。

如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。

2. 使用 JavaScript 表达式

Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：

 

这些表达式都会被作为 JavaScript ，以当前组件实例为作用域解析执行。

在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：

• 在文本插值中 (双大括号)

• 在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

 

3. 调用函数

 可以使用插值表达式直接调用函数

 五. 指令

简介

指令是带有 v- 前缀的特殊属性。Vue 提供了许多内置指令，如 v-bind 、 v-html、 v-for、v-on 和 v-slot)。一个指令的任务是在其表达式的值变化时响应式地更新 DOM。

指令写在标签内部，由 v- 作为前缀，表明它们是一些由 Vue 提供的特殊属性，对于部分单标签不可用。

==替换==

5.1 v-html

v-html：原始 HTML

双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 [v-html 指令：

注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。

 

a标签的内容将会被替换为 rawHtml 属性的值，插值为纯 HTML——数据绑定将会被忽略。

注意，你不能使用 v-html 来拼接组合模板，因为 Vue 不是一个基于字符串的模板引擎。在使用 Vue 时，应当使用组件作为 UI 重用和组合的基本单元。

5.2 v-bind: 属性绑定

 简单来说就是动态绑定 .class 和 .id

两种绑定方式 一种比较麻烦 一种简写

5.3 v-if    v-else-if   v-else

根据表达式的值的来有条件地渲染元素。

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高

如果表达式成立，创建当前节点。不成立，当前节点在页面源码中

5.4 v-show

控制节点的显示隐藏，表达式成立时，显示当前节点，表达式不成立，隐藏当前节点，通过控制display="none",

当前节点一定存在。

 

 

v-if 和 v-show 区别

V-if  

条件成立会显示  条件不成立

不显示 元素移除

好处: 保护信息

坏处:加载比较慢

 

v-show

实现的效果和v-if 差不多

但是v-show 把元素隐藏（display:none） 并没有移除

 5.5 v-for 循环