VUE的简单介绍

1.简介

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

Vue的官方网站是: https://cn.vuejs.org/

Vue.js 特点

• 简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。

• 数据驱动: 自动追踪依赖的模板表达式和计算属性。

• 组件化： 用解耦、可复用的组件来构造界面。

• 轻量：~33.46KB min+gzip，无依赖。

• 快速:精确有效的异步批量 DOM 更新。

• 模块友好: 通过 NPM 或 Bower 安装，无缝融入你的工作流

2.vue.js的入门

 插值表达式

如果我们希望把数据显示到模板（template）中，使用最多的语法是 “Mustache”语法 (双大括号) 的文本插值。

{{}}标签也接收表达式形式的值,表达式可由JavaScript表达式或过滤器构成.过滤器可以没有,可以多个.

表达式是各种数值,变量,运算符的综合体,也可以是JavaScript的一些函数,代码如下:

但是{{}}不能包含if/else等复杂的表达式,比如下列表达式是错误的

MVVM模型

MVVM是软件架构设计模式，用于构建用户界面应用。其由Model、View和ViewModel组成，实现数据模型与界面的分离，提升代码解耦性、可测试性和可维护性。MVVM支持双向数据绑定、事件驱动和命令绑定，简化视图与模型的交互。

Vue虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑.

M: 模型(Model),数据模型，负责存储应用程序的数据。它独立于视图（View）和视图模型（ViewModel），可以在不同的视图间共享。对应data中的数据,

V: 视图(View): 模板 用户界面，负责数据的展示。通常使用HTML、CSS和JavaScript（或特定框架的模板语言）来实现。

VM:视图模型(ViewModel):是View和Model之间的桥梁。它负责处理View和Model之间的交互，比如将Model的数据转换为View可以展示的格式，或者将用户在View上的操作转换为Model的数据更新。

VUE的常见指令

Vue.js指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。它扩展了HTML标签的功能.

Vue指令的作用是通过v-属性名,实现对DOM的响应式加载

 v-bind

v-bind指令用于绑定属性 可以简写成:双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：

绑定属性我们使用v-bind：

• 缩写：:

• 预期：any (with argument) | Object (without argument)

• 参数：attrOrProp (optional)

• 修饰符：

• .camel - 将 kebab-case attribute 名转换为 camelCase。

• 用法：动态地绑定

• v-text

  v-text指令: 更新元素的 textContent,注意v-text对于内容是包含HTML标签的,不会进行HTML解析,只是作为普通字符串.

• v-html

  v-html: 数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML ，你需要使用 v-html 指令

  效果显示:

• v-if

  v-if 指令 条件渲染,可以根据表达式的值在DOM中生成或移除一个元素,如果v-if表达式为true,那么对应元素的一个克隆将被重新插入DOM中,否则从DOM移除

  如果想切换多个元素,则可以使用<template>元素当作包装元素,在<template>元素上使用v-if, 就可以进行多个元素的切换

  v-else 指令: 表示 v-if 的“else 块”：

  v-else-if，顾名思义，充当 v-if 的“else-if 块”。可以链式地使用多次

  注意:

  v-else,v-else-if必须紧跟在v-if或者v-else-if元素的后面

• v-show

• 指令: 根据表达式的值来显示或隐藏HTML元素,当v-show表达式的值为false时,元素将被隐藏,查看DOM时,会发现元素上多了一个行内样式style=”display:none”.

• v-if与v-show的比较:

  1. 首先，在用法上的区别：

  • v-show是不支持template；

  • v-show不可以和v-else一起使用；

  1. 其次，本质的区别：

  • v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display属性来进行切换；

  • v-if当条件为false时，其对应的原生压根不会被渲染到DOM中；

  1. 开发中如何进行选择呢？

  • 如果我们的元素需要在显示和隐藏之间频繁的切换，那么使用v-show；

  • 如果不会频繁的发生切换，那么使用v-if；

   v-for

  v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，也就是循环指令.其中 items 是源数据的数组，而 item 是迭代项的别名对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。每个 v-for 作用域都可以访问到父级作用域：

• <li v-for="item in items">
    <span v-for="childItem in item.children">
      {{ item.message }} {{ childItem }}
    </span>
  </li>

  你也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法：

  <div v-for="item of items"></div>

  v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。

  <span v-for="n in 10">{{ n }}</span>

  v-for中通过key管理状态

  Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

  为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key

  <div v-for="item in items" :key="item.id">
  <!-- 内容 -->
  </div>

  推荐:在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能。

  key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key，一个或多个 attribute，或一个组件 prop 到表达式。

v-model

表单提交是开发中非常常见的功能，也是和用户交互的重要手段：

• 比如用户在登录、注册时需要提交账号密码；

• 比如用户在检索、创建、更新信息时，需要提交一些数据；

这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成：v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定；

它会根据控件类型自动选取正确的方法来更新元素；尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；

v-on

可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="methodName" 或 @click="handler"。