Vue学习笔记

 Vue.js

作者: 尤雨溪

[官网](https://cn.vuejs.org/)

渐进式 JavaScript 框架。

易学易用，性能出色，适用场景丰富的 Web 前端框架。

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面(UI)的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

一、 MVVM

- M - Model，模型，数据

- V - View，视图，UI

- VM - ViewModel，视图模型

MVVM 是一种设计模式（软件架构方式），它通过分离数据与视图，将数据与视图分离，使得数据与视图之间存在一种依赖关系，当数据发生变化时，视图会自动更新。其典型特征: 数据双向绑定(数据驱动视图)。

Vue 是一个 MVVM 框架。

二、 安装

2.1下载独立的js文件到本地

- [开发版](https://cdn.bootcdn.net/ajax/libs/vue/3.4.38/vue.global.js)

- [生产版](https://cdn.bootcdn.net/ajax/libs/vue/3.4.38/vue.global.min.js)

2.2 CDN 引入

在html页面中使用 `<script src="CDN资源地址"></script>`，这种方式需要依赖于网络连接

2.3 npm 安装

利用 `npm install` 的方式安装 vue.js 的使用

三、 Vue框架使用

3.1 声明式渲染

Vue 基于标准 HTML 拓展了一套**模板语法**，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。如:

  <div id="app">

    <h2>购物车</h2>

    <ul>

      <li>编号</li>

      <li>标题</li>

      <li>价格</li>

      <li>数量</li>

      <li>小计</li>

      <li>操作</li>

    </ul>

    <ul v-for="goods in cart">

      <li>{{goods.id}}</li>

      <li>{{goods.title}}</li>

      <li>{{goods.price}}</li>

      <li><button>-</button>{{goods.amount}}<button>+</button></li>

      <li>{{ goods.price * goods.amount }}</li>

      <li><button v-on:click="removeFromCart(goods.id)">删除</button></li>

    </ul>

    <div>

      合计: {{ cart.reduce((res, curr) => (res + curr.price * curr.amount), 0).toFixed(2) }}

    </div>



    <hr>



    <h2>推荐商品</h2>

    <ul>

      <li>编号</li>

      <li>标题</li>

      <li>价格</li>

      <li>操作</li>

    </ul>

    <ul v-for="prod in recommends">

      <li>{{ prod.id }}</li>

      <li>{{ prod.title }}</li>

      <li>{{ prod.price }}</li>

      <li><button v-on:click="addToCart(prod)">加入购物车</button></li>

    </ul>

  </div>

3.2 响应性(响应式渲染)

响应式渲染指的是 Vue 会监视到状态数据的变化，当状态数据发生变化时自动重新渲染 UI 结构。

Vue 会自动跟踪 JavaScript 状态(数据)并在其发生变化时响应式地更新 DOM。

四、 API 风格

两种 API 风格: Options API 和 Composition API

选项式 API（Options API）：在进行代码编写时，以固定的配置选项的方式进行 Vue 功能配置。

组合式 API（Composition API）：在代码编写时，以函数的形式进行 Vue 功能配置。

五、 创建一个应用实例

每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例：

const app = Vue.createApp({})

将传入 `createApp()` 的参数对象称作 "根组件"

应用实例必须在调用了 .mount() 方法后才会渲染出来:

app.mount('#app')

应用根组件的内容将会被渲染在容器元素里面。

.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。

六、 模板语法

Vue 使用一种基于 HTML 的模板语法。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

6.1 文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

<div id="app">

  <h2>标题: {{ 3 + 2 - 5 }}</h2>

</div>

注意:

- 双花括号内部所书写的是 "JS 表达式"，不能是定义变量、if-else、while、do-while、for 等语句。

- 双花括号会对 html 字符串文本进行转义，避免 XSS(跨站脚本攻击) 攻击。

6.2 原始 html

要把 html 文本解析为 html 标签，而不是纯文本，可以使用 `v-html` 指令:

<div>输入框: <span v-html="html"></span></div>

注意:

- 仅在内容可信时进行 html 渲染，绝不要对用户输入的html进行渲染。

6.3 属性绑定

不能在属性绑定时使用 `{{}}` 语法，而是需要使用 `v-bind` 指令:

<h2 v-bind:title="message">标题: {{ message }}</h2>

`v-bind` 后添加 `:`，在 `:` 冒号后添加需要绑定的属性名。

6.4 指令

指令 (Directive) 是带有 `v-` 前缀的特殊属性，用于绑定 Vue 特定的功能。

- 指令名称，即 `v-` 之后的那个单词

- 指令参数，即 `v-xxx` 之后的冒号后面的内容

- 指令修饰符，即 `v-xxx.yyy` 点后面的内容，如 `v-on:click.once` 中的 `once`

- 指令值，即 `v-xxx="zzz"` 中的 `zzz`，指令值也是一个 JS 表达式


6.4.1 指令列表

文本处理相关:

- v-text: 渲染纯文本，但 `{{}}` 的使用更加灵活

- v-html: 渲染 html

- v-bind: 绑定属性，可以简写为 `:`

事件处理相关:

- v-on: 绑定事件，可以简写为 `@`

条件渲染相关:

- v-if:

- v-else:

- v-else-if:

- v-show:

列表渲染相关:

- v-for:

表单双向绑定相关:

- v-model:

七、 事件处理

利用 `v-on` 指令，在标签中直接绑定事件

指令值:

- 一个简洁的 JS 表达式，用于处理比较简单的业务

- 一个函数(写在选项的 `methods` 字段中)，用于处理复杂的业务

  - 无需额外传递参数，则直接使用函数名称引用到事件函数即可

  - 如果需要额外传递参数，则使用函数名加括号显式传参即可

在使用函数名称引用事件函数时，函数中的第一个参数为事件对象 event。如果显式加括号调用了函数，则函数参数以实际传递为准，这时如果还需要事件 event 对象，可以固定传递 `$event`

八、 列表渲染

v-for 指令

语法:

<!-- 遍历迭代数组 -->

<li v-for="(hobby, index) of hobbies">{{hobby}} -- 下标: {{ index }}</li>

<!-- 遍历迭代对象 -->

<li v-for="(val, key) of stu">{{ val }} -- 属性名: {{ key }}</li>

<!-- 遍历固定次数 -->

<li v-for="n of 5">固定第{{ n }}次</li>

使用的 `of` 也可以替换为使用 `in`，最终输出结果是一样的。

[待办事项列表示例](http://todolist.com.cn/)