Vue.js基础知识点总结

时间 2020-10-18

标签 css html 前端 vue 算法 npm 数组浏览器缓存服务器栏目 JavaScript 繁體版

原文原文链接

Vue基础

邂逅Vuejs

1.认识Vuejs

Vue是一个渐进式框架, 什么是渐进式的呢?css
- 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建
- 渐进式意味着你能够将Vue做为你应用的一部分嵌入其中，带来更丰富的交互体验。
Vue有不少特色和Web开发中常见的高级功能html
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM

2.Vue初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--一、导入Vue的包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
    <!--这个div区域就是MVVM中的 View-->
    <div id="app">
        {{message}}
    </div>
</body>
<script>
    // 二、建立一个Vue的实例
    var app = new Vue({
        el: '#app', //用于挂载要管理的元素
        data: {// 定义数据
            message: '学习Vue.js'
        }
    });
</script>
</html>

3.Vue中的MVVM

View层前端
- 视图层
- 前端开发中, 一般就是DOM层
- 主要的做用是给用户展现各类信息
Model层vue
- 数据层
- 数据多是咱们固定的死数据, 更多的是来自咱们的服务器, 从网络上请求下来的数据
VueModel层算法
- 视图模型层
- 视图模型层是View和Model沟通的桥梁
- 一方面它实现了 Data binding, 也就是数据绑定, 将Model的改变实时的反应到了View中
- 另外一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，能够监听到，并在须要的状况下改变对应的Data。

4.Vue实例传入的options

目前掌握

属性名	类型	做用
`el`	<font color='blue'>类型: string \	HTMLElement</font>	决定Vue实例会管理哪个DOM
`data`	<font color='blue'>类型: Object \	Function (组件当中data必须是一个函数)</font>	Vue实例对应的数据对象
`methods`	<font color='blue'>类型: { [key: string]: Function }</font>	定义属于Vue的一些方法, 能够再其余地方调用, 也能够在指令中使用

5.Vue生命周期

插值指令

1.Mustache

插值表达式 {{}}

数据绑定最多见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。例如：npm
Message: {{ msg }}
Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值。数组

不管什么时候，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会自动更新。浏览器

语法	`{{}}`JavaScript 表达式支持
普通表达式	{{ number + 1 }}
三元表达式	{{ ok ? 'YES' : 'NO' }}
三元表达式	{{ name == 'smyhvae' ? 'true' : 'false' }}
调用方法	{{ message.split('').reverse().join('') }}

2.v-once

该指令后面不须要跟任何表达
该指令表示元素只渲染一次，不会随着数据的改变而改变。

<h2 v-once>{{message}}</h2>

3.v-html

解析数据中的html代码，渲染到页面中

<h2 v-html="url"></h2>

4.v-text

v-text做用和Mustache比较类似：都是用于将数据显示在界面中, 不一样的是 v-text 是写在属性中
v-text一般状况下，接收一个string类型

<h2 v-text="text"></h2>

5.v-pre

v-pre用于跳过这个元素和它子元素的编译过程，用于显示本来的Mustache语法。

<h2 v-pre>{{message}}</h2>

6.v-cloak

在某些状况下，咱们浏览器可能会直接显然出未编译的Mustache标签。
v-cloak指令和CSS 规则一块儿用的时候，可以解决插值表达式闪烁的问题（即：能够隐藏未编译的标签直到实例准备完毕）

<!-- 在vue解析以前, div中有一个属性v-cloak
在vue解析以后, div中没有一个属性v-cloak -->
<div id="app" v-cloak>
  <h2>{{message}}</h2>
</div>

总结

Mustache: {{}}语法, 能够写变量/逻辑表达式/计算值...
v-once : 元素只渲染一次，不会随着数据的改变而改变。
v-html="" : 解析数据中的html代码，渲染到页面中
v-text="msg": 写在属性当中, 将数据显示在界面中
v-pre: 原文输出, 显示本来的Mustache语法
v-cloak : 通常配合CSS规则一块儿使用, 够解决插值表达式闪烁的问题

v-bind绑定属性

1.v-bind介绍

前面咱们学习的指令主要做用是将值插入到咱们模板的内容当中。
可是，除了内容须要动态来决定外，某些属性们也但愿动态来绑定。
做用：能够给html元素或者组件动态地绑定一个或多个特性，例如动态绑定style和class缓存
- 好比动态绑定a元素的href属性
- 好比动态绑定img元素的src属性
这个时候，咱们可使用v-bind指令：服务器
- 做用：动态绑定属性
- 缩写： :
- 预期：any (with argument) | Object (without argument)
- 参数：attrOrProp (optional)

2.v-bind绑定class

绑定class有两种方式

对象语法

数组语法

对象语法
- 对象语法的含义是:class后面跟的是一个对象。

<!-- 用法一：直接经过{}绑定一个类 -->
<h2 :class="{'active': isActive}">Hello World</h2>

    <!-- 用法二：也能够经过判断，传入多个值 -->
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

    <!-- 用法三：和普通的类同时存在，并不冲突 -->
<!--注：若是isActive和isLine都为true，那么会有title/active/line三个类-->
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

    <!-- 用法四：若是过于复杂，能够放在一个methods或者computed中 -->
    <!--注：classes是一个计算属性 -->
<h2 class="title" :class="classes">Hello World</h2>

数组语法
- 数组语法的含义是:class后面跟的是一个数组。

<!-- 1. ['active','news'] 当字符串使用 -->
<h2 class="title" :class="['active','news']">{{message}}</h2>
    <!-- [active, new] 当变量使用 -->
<h2 class="title" :class="[active,news]">{{message}}</h2>
    <!-- 3. 函数返回值使用 -->
<h2 class="title" :class="getClasses()">{{message}}</h2>

3.v-bind绑定style

咱们能够利用v-bind:style来绑定一些CSS内联样式
绑定class有两种方式
- 对象语法
- 数组语法
对象语法
- style后面跟的是一个对象类型
- 对象的key是css属性名
- 对象的value是具体赋的值, 能够来自data中的属性

:style="{color: currentColor, fontSize: fontSize + 'px'}"

数组语法
- style后面跟的是一个数组类型, 多个值以 , 分隔

<div v-bind:style="[baseStyles, fontColor]"></div>
/* js */
baseStyle: {background: 'lime'},
fontSize: {fontSize: '80px'}

computed计算属性

1.基本概念

计算属性出现的目的是解决模板中放入过多的逻辑会让模板太重且难以维护的问题
计算属性是基于它们的响应式依赖进行缓存的
在某些状况，咱们可能须要对数据进行一些转化后再显示，或者须要将多个数据结合起来进行显示
- 好比咱们有firstName和lastName两个变量，咱们须要显示完整的名称。
- 可是若是多个地方都须要显示完整的名称，咱们就须要写多个{{firstName}} {{lastName}}

将上面代码转换成计算属性

/* html */ 
<h2>{{fullNmae}}</h2>

/* js */
computed: {
    fullNmae: function () {
      return this.firstNmae + ' ' + this.lastNmae;
    }
  }

2.计算属性的setter和getter

每一个计算属性都包含一个getter和一个setter
- 在上面的例子中，咱们只是使用getter来读取。
- 在某些状况下，你也能够提供一个setter方法（不经常使用）。
- 在须要写setter的时候，代码以下：

3.计算属性的缓存

methods和computed区别
- methods里面的数据无论发没发生变化, 只要调用了都会执行函数(有的时候数据没发生变化咱们不但愿调用函数)
- computed计算属性会进行缓存, 若是数据没发生变化,函数只会被调用一次(数据发生变化才会调用函数)
总结:
- methods无论数据发没发生变化都会调用函数
- computed只有在依赖数据发生变化时才回调函数

事件监听指令

在前端开发中，咱们须要常常和用户交互
- 这个时候咱们就必须监听用户的发生时间，好比点击, 拖拽事件等等
v-on 介绍
- 做用: 绑定事件监听器
- 缩写: @

1.v-on参数

当methods中定义方法, 以供@click调用时, 须要注意参数问题
状况一: 若是该方法不须要额外参数, 方法后()能够省略
- 没有传入参数, 接收形参时默认会将原生事件event参数传递进去
状况二: 若是须要同时传入某个参数, 同时须要event时, 能够经过$event传入事件

2.v-on修饰符

v-on 提供了不少事件修饰符来辅助实现一些功能。事件修饰符有以下

修饰符	做用
.stop	阻止冒泡。本质是调用 event.stopPropagation()
.prevent	阻止默认事件行为本质是调用 event.preventDefault()
.{keyCode \	keyAlias }	当事件是从特定键触发时才触发回调
.once	事件只触发一次

条件渲染指令

1.vi-f与v-else-if与v-else

Vue的条件指令能够根据表达式的值在DOM中渲染或销毁元素或组件

<h2 v-if="score>=90">优秀</h2>
    <h2 v-else-if="score>=80">良好</h2>
    <h2 v-else-if="score>=60">及格</h2>
    <h2 v-else>不及格</h2>

逻辑较多不建议在模板中使用v-if-else-if

2.复用元素渲染问题

一个问题: 涉及到了Vue底层, 虚拟DOM virtual DOM
点击切换表单后,input的value值并无被清空,为何?

引出：当实现点击按钮切换input表单时, 咱们输入上的value, 点击按钮切换表单时会发现value值还存在, 可是input元素确实切换了, 这是由于什么呢?

<span v-if="isUser">
      <label for="user">用户名</label>
      <input type="text" placeholder="用户名" id="user" key="user">
</span>
<span v-else>
      <label for="email">邮箱</label>
      <input type="text" placeholder="邮箱" id="email" key="email">
</span>
<button @click="isUser=!isUser">切换类型</button>
<script> 
const app = new Vue({
  el: '#app',
  data: {
     isUser: true
  }
})
</script>

缘由:
- 1.这是由于Vue在进行DOM渲染时, 出于性能考虑, 会尽量服复用已经存在的元素, 而不是建立新的元素
- 2.上面的案例中, Vue内部会进行对比发现两部分都类似只会替换属性, 不会给你建立全新的元素
- 3.上面 if 的 input再也不使用, 直接做为 else 的 input来使用
解决方案
- 1.若是咱们不但愿 Vue出现相似重复利用的问题, 能够给对应的 input 添加 key
- 2.而且保证要们须要的key不一样, 这样 vue就会建立一个全新 input元素

3.v-show

v-show的用法和v-if很是类似,也用于决定一个元素是否渲染

v-if 和 v-show对比
- v-if 当条件为false时,压根不会有对应的元素在DOM中
- v-show 当条件为false时, 仅仅是将元素的 display 属性设置 none 而已
开发中如何选择呢?
- 当须要在显示与隐藏之间切换很频繁时,使用v-show
- 当只有一次切换时,经过使用v-if

<h2 v-show="isShow">{{message}}</h2>

循环遍历指令

1.v-for遍历数组

做用：根据数组中的元素遍历指定模板内容生成内容。
语法: v-for="(item, index) in items"

<ul>
    <!-- item: 是每一项元素    index: 下标/索引 -->
    <li v-for="(item, index) in name">
      {{index+1}}.{{item}}
    </li>
 </ul>

2.v-for遍历对象

做用: 遍历对象
语法: v-for="(value, key, index) in items"

<ul>
    <!-- value:属性值  key:属性名  index:下标/索引 -->
    <li v-for="(value, key, index) in info">
      {{index+1}}.{{value}}
    </li>
 </ul>

3.Vue中Key属性

官方推荐咱们在使用v-for时,给对应的元素或组件添加上一个:key属性。
为何须要这个key属性呢(了解) ?
- 这个其实和Vue的虚拟DOM的Diff算法有关系。
当某一层有不少相同的节点时，也就是列表节点时，咱们但愿插入一个新的节点
- 咱们但愿能够在B和C之间加一个F，Diff算法默认执行起来是这样的。
- 即把C更新成F，D更新成C，E更新成D，最后再插入E，是否是很没有效率？
因此咱们须要使用key来给每一个节点作一个惟一标识
- Diff算法就能够正确的识别此节点
- 找到正确的位置区插入新的节点
key的做用主要是为了高效的更新虚拟DOM

使用 v-for更新已渲染的元素列表时,默认用就地复用策略; 若是列表数据修改的时候, 它会根据key值去判断某个值是否修改, 若是修改, 则从新渲染这一项, 不然复用以前的元素; 咱们在使用的使用常常会使用 index(即数组的下标)来做为 key,但其实这是不推荐的一种使用方法;

4.数组响应式方法

由于Vue是响应式的, 因此当数据发生变化时, Vue会自动检测数据变化, 视图会对应的更新
Vue中包含了一组观察数组编译的方法, 使它们改变数组也会触发更新视图
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()

5.Vue.set修改响应式数据

Vue.set(vm.items, indexOftem, newValue)
vm.$set(vm.items ,indexOften,newValue)
- 参数1: 要修改的数组/对象
- 参数2: 要设置的索引/添加的属性名
- 参数3: 设置的值

6.v-if 和 v-for

当它们处于同一节点， v-for 的优先级比 v-if 更高，这意味着
v-if 将分别重复运行于每一个v-for循环中。

避免 v-if 和 v-for用在一块儿

缘由
- 若是使用了 if 判断, 每次渲染在Vue内部都会遍历整个列表, 不论判断条件是否发生了变化
使用计算属性的好处
- 1.过滤后的列表只会在users数组发生相关变化时才被从新运算,过滤更高效。
- 2.使用v-for="user in activeusers"以后,咱们在渲染
- 3.的时候只遍历活跃用户,渲染更高效。
- 4.解耦渲染层的逻辑,可维护性(对逻辑的更改和扩展)更强。
- 详细讲解

表单绑定v-model

1.基本概念

Vue中使用v-model指令来实现表单元素和数据的双向绑定
- 数据与模板是相互影响的, 一方发生变化, 另外一方当即作出更新
引出:
- 在以前的案例, 咱们经过v-bind,给<input>标签绑定了data对象里的name属性。data中的name的值发生改变时, <input>标签里的内容会自动更新。
- 可如今要作的是: 在<input>标签里修改内容, 要求data中的name的属性值自动更新。从而实现双向数据绑定。该怎么作呢? 这就能够利用v-model这个属性。

区别:
- v-bind: 只能实现数据的单向绑定, 从M自动绑定到v。
- v-model: 只有v-model才能实现双向数据绑定。注意, v-model后面不须要跟冒号
注意
- v-model只能运用在表单元素中, 或者用于自定义组件。常见的表单元素包括: input(radio,text,address,email...) ,select, checkbox, textarea.

2.v-model原理

v-model实际上是一个语法糖, 他背后本质是包含两个操做
- v-bind绑定一个value属性
- v-on指令绑定当前元素的input事件
也就是说下面的代码：等同于下面的代码：

<input type="text" v-model="message">
<!-- 等同于下面的代码 -->
<input type="text" :value="message" @input="message = $event.target.value">

3.表单绑定v-model

Vue中使用v-model指令来实现表单元素和数据的双向绑定
案例解析:
- 当咱们在数据框输入内容时
- 由于input中v-model绑定了message, 因此会实时将输入的内容传递给message, message发生变化
- 当message发生变化时, 由于上面咱们使用Mustanche语法, 将message的值插入到DOM中, 因此DOM会发生响应式的改变
- 因此, 经过v-model实现了双向的绑定
固然, 咱们能够将v-model用于textarea元素

4.表单中其它类型绑定v-model

表单中其它类型, 绑定v-model

表单类型	单选/多选状况	绑定的值
`v-model: radio`	多个单选框时	绑定的`值是value`
`v-model: checkbox`	单个勾选框	v-model即为`布尔值`
	多个复选框	选中多个, 对应的`data`属性是一个`数组`
`v-model: select`	单选	`v-model`绑定的是一个`值`
	多选	`v-model`绑定的是一个`数组`

5.值绑定

动态的给value赋值而已
- 咱们前面以前写的value中的值, 都是在定义input中直接给定的
- 可是真是开发中, 这些input中的value值多是从服务器中获取, 而后定义的
- 因此咱们能够经过v-bind:value动态的给value绑定值

5.v-model的修饰符

修饰符	做用
`.lazy`	当表单`失去焦点`或按下`回车`时,`data`中的数据才会更新
`.number`	输入的内容转换为`number`数据类型
`.trim`	过滤内容的两侧`空格`

Vue经常使用特性

1.自定义指令

为什么须要自定义指令

内置指令不知足需求

Vue.directive 注册全局指令

自定义指令语法(获取焦点)

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()// 获取元素的焦点
  }
})
// 使用自定义指令
<input type="text" v-focus>

带参数的自定义指令

Vue.directive('color', {
      // bind声明周期, 只调用一次，指令第一次绑定到元素时调用。在这里能够进行一次性的初始化设置
      // el 为当前自定义指令的DOM元素  
      // binding 为自定义的函数形参   经过自定义属性传递过来的值 存在 binding.value 里面
      bind: function(el, binding){
        // 根据指令的参数设置背景色
        // console.log(binding.value.color)
        el.style.backgroundColor = binding.value.color;
      }
    });
// 使用带参数自定义指令
<input type="text" v-color='msg'>

自定义局部指令

局部指令，须要定义在 directives 的选项用法和全局用法同样
局部指令只能在当前组件里面使用
当全局指令和局部指令同名时以局部指令为准

directives: {
    focus: {
        inserted: function(el) {
            el.focus();
        }
    }
}

2.侦听器 watch

侦听器的应用场景

数据变化时执行异步或开销较大的操做

注意: watch 中的属性必定是data 中已经存在的数据

// 当data中的: firstName属性或lastNames属性改变时, 会自动触发对应的watch
watch: {
     firstName(val) { // val: 表示变化后的值
       this.fullName = val + ' ' + this.lastName;
     },
     lastName(val) {
       this.fullName = this.firstName + ' ' + val;
     }
  }

3.过滤器

概念: Vue.js容许咱们自定义过滤器,可被用做一些常见的文本格式化/处理。

过滤器能够用在两个地方: mustache插值表达式、v-bind表达式。

过滤器应该被添加在JavaScript表达式的尾部,由“管道”符指示。

过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本

全局注册时是filter，没有s的。而局部过滤器是filters，是有s的

支持级联操做(对前一个过滤的数据再次进行过滤处理)

自定义全局过滤器

咱们能够用全局方法Vue.filter()自定义一个全局过滤器。这样的话,每个Vue的对象实例(每个VM实例)均可以拿到这个过滤器。它接收两个参数: 过滤器的名称、过滤器函数。

<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div :class="msg | upper"></div>
<!-- 带参数过滤 -->
<div>{{date | format('yyyy-MM-dd')}}</div>
<script>
     // 1.全局过滤器
    Vue.filter('upper', (val) => {
        // val就是要处理的数据
      return val.charAt(0).toUpperCase() + val.slice(1);
    })
    // 2.处理带参数过滤器
    Vue.filter('format', (date, arg) => {
      // arg: 传递的参数
      if (arg === 'yyyy-MM-dd') {
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      }
    })
</script>

自定义私有过滤器

私有过滤器: 在某一个vue对象内部定义的过滤器称之为私有过滤器
这种过滤器只有在当前vue对象的el指定的监管区域有用。

<!-- 管道符前面的price: 要把price这段文本进行过滤 -->
<!-- 管道符后面的showPrice: 是经过showPrice这个过滤器来进行操做 -->
<td>{{price | showPrice}}</td>
<script>
const app = new Vue({
  filters: {
    showPrice(price) {
      return '￥' + price.toFixed(2);
    }
  }
})
</script>

4.生命周期

事物从出生到死亡的过程
Vue实例从建立到销毁的过程,这些过程当中会伴随着一些函数的自调用。咱们称这些函数为钩子函数
主要阶段
挂载(初始化相关属性)
- beforeCreate
- created
- beforeMount
- mounted
更新(元素或组建的变动操做)
- beforeUpdate
- updated
销毁(销毁相关属性)
- beforeDestroy
- destroyed

钩子函数	过程
beforeCreate	在实例初始化以后, 数据观测和事件配置以前被调用此时data和methods以及页面的DOM结构都没有初始化什么都作不了
created	在实例建立完成后被当即调用此时data 和 methods已经可使用可是页面尚未渲染出来
beforeMount	在挂载开始以前被调用此时页面上还看不到真实数据只是一个模板页面而已
mouted	el被新建立的vm.$el替换, 并挂载到实例上去以后调用该钩子。数据已经真实渲染到页面上在这个钩子函数里面咱们可使用一些第三方的插件
beforeUpdate	数据更新时调用，发生在虚拟DOM打补丁以前。页面上数据仍是旧的
update	因为数据更改致使的虚拟DOM从新渲染和打补丁, 在这以后会调用该钩子。页面上数据已经替换成最新的
beforeDestroy	实例销毁以前调用
destroyed	实例销毁后调用