Vue总结笔记

最新推荐文章于 2023-10-01 09:00:00 发布

zcyycz_

最新推荐文章于 2023-10-01 09:00:00 发布

阅读量171

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/zcyycz_/article/details/127970750

版权

一.MvvM模式

MvvM简介：

MvvM是Model-View-viewModel的缩写，是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定，这使得ViewModel的状态改变可以自动传递给View，这就是数据双向绑定

二.CMD命令操作

CMD : CMD命令是一种命令提示符，CMD是command的缩写，即命令提示符，Win为基础的操作系统（包括Windows 2000和XP中，Vista中，和Server 2003）下的“MS-DOS 方式”。中文版Windows XP 中的命令提示符进一步提高了与DOS下操作命令的兼容性，用户可以在命令提示符直接输入中文调用文件。

常用的内部命令：

dir — 显示一个目录中的文件列表，例如— C:\>dir

cd — 显示当前目录中的所有文件，例如— C:\>cd my-files

md — 创建一个目录，例如 — C:\>md new-files

cd.. —回退到上一级目录，例如 — C:\>cd.. files

cd\ — 回退到盘符目录

cls — 清屏

exit — 退出命令提示符窗，等等命令

三.CDN

CDN的全称是Content Delivery Netword，就是内容分发网络，CDN的关键技术主要有内容存储和分发技术，用户可以就近获取所需内容，这样可以提高用户访问的响应速度和命中率。有些服务提供商会免费提供常用框架的JavaScript文件的CDN服务（可以直接使用），但是在商业化应用中需要注意版权问题。使用CDN方式引入Vue.js文件后，就不需要在本地部署该文件。

四.ES6-键值对

ES6新特性：

const和let变量，模板字面量，结构，增强的对象字面量，for...of循环，展开运算符(...)，剩余参数（可变参数），ES6箭头函数，类的支持，字符串模板，iterator，generator，模块，Symbols等等。

ES6语法：任何一个对象的成员，要么是数据成员，要么是函数成员。但无论是函数成员还是数据成员，在本质上都是一个 “ 键-值 ” 对，“ 键 ” 是这个成员的名字，“ 值 ”是这个成员的内容。对于函数成员来说，“ 键 ” 是函数的名字，“ 值 ” 是函数的地址。

对象的函数成员三种描述方法案例：

{
   functionEs5: function () {
      return Math.random();
   },
   functionEs6 () {
      return Math.random();
   },
   functionArrow: () => Math.random()
}

在上面代码里，functioEs5()，functionEs6()和 functionArrow()都是语法正确的函数成员。

functionEs5是传统写法，functionEs6在ES6中是合法的写法，functionArrow是ES6引入的箭头函数写法。

五.模板字符串

它以“ ` ” 符号开头和结尾，代替了普通字符串开头和结尾的单引号或双引号。在这种模板字符串中可以方便的插入变量。

ES6

let hello = ' 欢迎来自 ${ this.city } 的 ${ this.name } ! ' ;

ES5

let hello = " 欢迎来自 " + this.city + " 的 " + this.name " ! " ;

在上面案例中的两个语句分别是ES6和ES5写法，两个语句表达的是一个意思，但是ES6写法明显更方便容易理解。另外使用模板字符串的优点是，可以跨行，直接产生多行文本。如果要定义多行字符串，那么必须通过将多个单行字符串拼接才能获得。

六.生命周期钩子

Vue.js会自动维护每个Vue实例的生命周期，就是说，每一个Vue实例都会经历一系列的从创建到销毁的过程。例如，在创建实例对象，编译模板，将实例挂载到页面上以及最终进行销毁等。在这个过程中，Vue实例会在不同阶段的时间点向外部暴露出各自的回调函数，这些回调函数又称为“ 钩子函数 ” ，开发人员可以在这些不同阶段的钩子函数中定义业务逻辑。

一些常用的钩子函数

beforeCreate() — 在实例创建之前调用

created() — 在实例创建之后调用，此时尚未开始DOM编译

brforeMount() — 在挂载开始之前调用

mounted() — 在实例被挂载后调用，这时页面的相关DOM节点已被新创建的vm.$el 替换。它相当于JavaScript中的 window.onload() 方法。

beforeUpdate() — 每次页面中有元素需要更新时，在更新前就会调用beforeUpdate() 钩子函数。

updated() — 每次页面中有元素需要更新时，在更新完之后就会调用

beforeDestroy() — 在销毁实例前调用，此时实例仍然有效

destroyed() — 在实例被销毁后调用

七.数组侦听

侦听器的基本作用是在数据模型中的某个属性发生变化的时候进行拦截，从而执行指定的处理逻辑。我们通常会在两种场景中用到侦听器，1. 拦截操作 2. 耗时操作。

对数组进行侦听，数组是引用类型，因此存在比较复杂的侦听规则。从理论上来说，修改一个数组的内容，比如修改数组中的某个元素的值，或者给数组增加新元素等，都不会修改数组本身的地址（引用），因此也不会被侦听到。为此，Vue.js对数组做了特殊处理，使得使用标准的数组操作方法对数组所做的修改，都可以被侦听到。

下列被侦听到的标准方法修改数组

push() — 尾部添加

pop() — 尾部删除

unshift() — 头部添加

shift() — 头部删除

splice() — 删除，添加，替换

sort() — 排序

reverse() — 逆序

使用了push(）等标准的数组操作方法，就可以被侦听到。

彻底替换一个新数组，可以被侦听到。

如果直接修改数组的元素，那么无法被侦听到，解决方法是使用$set() 方法修改元素的内容，只有这样才能被侦听到。

八.事件对象属性

“ 事件 ” 是发生在HTML元素上的某些特定的事，它的目的是使页面具有某些行为，执行某些“ 动作 ”。在一个网页中，通常已经预定好了很多事件，开发人员可以编写相应的“ 事件处理程序 ” 来响应相应的事件，事件可以是浏览器行为，也可以是用户行为。

事件对象，浏览器中的事件都是以对象的形式存在的，在标准的DOM中，规定事件对象必须作为唯一的参数传给事件处理函数，不同的事件对应的事件属性也不一样。

事件对象中常见的属性

altKey — Boolean — 读写 — 按下Alt键则为true，否则为false

button — Integer — 读写 — 鼠标事件，值对应按下的鼠标键

cancelable — Boolean — 只读 — 是否可以取消事件的默认行为

stopProPagetion() — Function — N/A — 阻止事件向上冒泡

clienX — Integer — 只读 — 鼠标在客户端区域（当前窗口）的水平坐标，不包括工具栏，滚动条等

clienY — Integer — 只读 — 鼠标在客户端区域（当前窗口）的垂直坐标，不包括工具栏，滚动条等

ctrIKey — Boolean — 只读 — 按下Ctrl键为true，否则为false

relatedTatget — Eiement — 只读 — 鼠标正在进入/离开元素

charCode — Integer — 只读 — 按下按键的Unicode值

keyCode — Integer — 读写 — 按下按键时为0，其余情况下为按下按键的数字代号

detail — Integer — 只读 — 鼠标按键的单击次数

preventDefault() — Function — N/A — 阻止事件的默认行为

screenX — Integer — 只读 — 鼠标相对于屏幕的水平坐标

screenY — Integer — 只读 — 鼠标相对于屏幕的垂直坐标

shiftKey — Boolean — 只读 — 按下Shift键为true，否则为false

target — Element — 只读 — 引起事件的元素/对象

type — String — 只读 — 事件的名称

浏览器支持的事件种类非常多，可以分为好几类，每一类里面又有很多事件。

事件类别

用户界面事件 —— 涉及与BOM交互的通用浏览器事件

焦点事件 —— 在元素获得或失去焦点时触发的事件

鼠标事件 —— 使用鼠标在页面上执行某些操作时触发的事件

滚轮事件 —— 使用鼠标滚轮时触发的事件

输入事件 —— 向文档中输入文本时触发的事件

键盘事件 —— 使用键盘在页面上执行某些操作时触发的事件

输入法事件 —— 使用某些输入法时触发的事件

九.事件修饰符

标准的DOM事件对象中包括了 preventDefault()，stopPropagation()等方法，用于取消事件的默认行为或阻止事件的传播（继续冒泡）等，Vue.js为v-on指令提供了 “ 事件修饰符 ” ，通过它们可以声明而非命令的方法实现功能。

事件修饰符分为五种

.self — 作用是，仅当一个事件的目标（event.target）是当前元素自身时，才会触发处理函数，就是说，内部子元素变化触发这个事件

.stop — 会自动调用stopPropagation() 方法，从而阻止事件的继续传播

.capture — 作用是，改变事件流的默认处理方式，从默认的冒泡方式改为捕获方式

.once — 是指触发一次事件。如果给外层div增加.once事件修饰符，那么每次刷新页面以后，只有第一次单击时才会弹出提示框

.prevent — 添加后，程序会自动调用event.preventDefault() 方法，从而取消事件触发的默认行为

在使用事件修饰符时，需要记住两点

1. 独立使用事件修饰符，在某些情况下，也可以仅仅使用某个事件修饰符，而不绑定具体的事件处理方法。

2. 串联使用事件修饰符，对于一次绑定，可以同时设置多个修饰符，只需要把它们依次串联在一起就可以了，这称为修饰符的“ 串联 ”。

十.V-modle修饰符

v-model指令在绑定的时候，也可以指定修饰符，以实现一些特殊的约束或效果，分为三种

.lazy — 对于文本框输入，默认情况下，v-model指令在每次input事件触发后，都会对文本输入框的值与数据进行同步。通过添加.lazy修饰符，可以将上述行为改为在change事件触发之后进行同步，这样就只有在文本框失去焦点后才会改变对应的模型属性的值，因此称为 “ 惰性 ” 绑定

.number — 希望用户输入的值能够自动转换为数值类型

.trim — 自动过滤用户输入的首尾空白字符

十一.V-for中key属性的作用

key属性是添加到自定义的子组件上，而不是子组件内部的顶层的组件上。不仅仅在数组生成组件上，其他地方也可以使用key，主要是 react利用key来区分组件的，相同的key表示同一个组件，react不会重新销毁创建组件实例，只可能更新；key不同，react会销毁已有的组件实例，重新创建组件新的实例。

key属性还有另外一种使用方法，即强制替换元素，从而可以触发组件的生命周期钩子或者触发过渡。因为当key改变时，Vue认为一个新的元素产生了，从而会新插入一个元素来替换掉原有的元素。

key属性可以用来提升v-for渲染的效率，vue不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去

在使用v-for的时候，vue里面需要我们给元素添加一个key属性，这个key属性必须是唯一的标识

给key赋值的内容不能是可变的

1. 在写v-for的时候，都需要给元素加上一个key属性

2. key的主要作用就是用来提高渲染性能的！

3.key属性可以避免数据混乱的情况出现（如果元素中包含了有临时数据的元素，如果不用key就会产生数据混乱）

十二.V-if 和 V-show的区别

v-show和v-if都可以用来控制标签的隐藏和显示

<标签 v-show='布尔值'></标签>

<标签 v-if='布尔值'></标签>

布尔值为true，就显示;布尔值为false，就隐藏

【v-show】

1.本质是标签display设置为none，控制隐藏，只基于css进行切换

2.有更高的初始渲染消耗

3.更适合频繁切换的情况

【v-if】

动态的向DOM树内添加或者删除DOM元素

有更高的切换消耗

适合运行条件很少改变的情况

<div id="app">
        <div v-show="display">我是由v-show控制的</div>
        <div v-if="display">我是由v-if控制的</div>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                display:true
            }
        })
    </script>

十三. v-for 和 v-if 一同使用的注意事项

需要注意的是，当它们处于同一节点时，v-for 的优先级比 v-if 高， v-for 每次迭代时都会执行一次 v-if ，这会造成不必要的计算开销，影响性能，尤其是当只需要渲染很小一部分的时候，表现尤为明显。比较好的做法是直接在数据模型中对列表进行过滤，以减少视图中的判断。如果希望有条件的跳过循环的执行，那么应该将v-if 置于外层元素上。

十四.父子组件之间传递数据

组件是Vue.js开发中的基本单元，组件之间不可避免地需要传递数据，从父组件向子组件传递数据是最主要的方式，可通过组件的 props（属性）和 slot（插槽来实现）。

最简单的指定组件属性的方法—— 通过一个字符串数组定义一组属性的名称。

slot插槽—— 向组件传递另一个组件的开闭标记之间的内容，插槽不但可以传入文本，也可以传入HTML结构。

所有的props都使得其父子props之间形成了一种单向的下行绑定：父级props的更新会向下流动到子组件中，但是反过来不行，因为主要会防止从子组件意外变更父组件的状态，从而导致应用的数据流向难以理解。

此外，每次父组件发生变更时，子组件中所有的props都将刷新为最新的值，这意味着不应该在一个子组件内部改变props。如果这样做了，Vue.js会在浏览器的控制台中发出警告。子组件在通过props得到从父组件传来的数据之后，应该复制出本地副本，或者通过计算机属性的方式使用这些数据，而不一个直接修改props属性的值。

如果子组件需要向父组件传递数据，就需要使用事件机制来实现，就是 “ 从上向下通过属性传递数据，从下向上通过事件传递数据 ” 的原则。当子组件向父组件传递数据时，需要通过$emit() 方法向父组件暴露一个事件，然后父组件在处理这个事件的方法中获取子组件传来的数据。

十五.单页应用（SPA）

单页应用就是将所有内容放在一个页面中，从而使整个页面更加流畅。单页应用提供的信息和一些主要内容已经过筛选和控制，可以简单，方便地阅读和浏览。

单页应用概要

页面结构 —— 一个页面 + 许多模块的组件

体验效果 —— 页面切换流畅，体验效果佳

资源文件 —— 公共资源只需要加载一次

路由模式 —— 可以使用hash，也可以使用history

适用场景 —— 对体验修改和流畅度有较高要求的应用不利用SEO（搜索引擎优化，可借助服务器端渲染技术优化SEO）

内容更新 —— 相关组件的切换，仅局部更新

相关成本 —— 前期开发成本较高，后期维护较为容易

单页应用不会出现白屏问题，页面之间的跳转，页面内部内容的更新，都会非常流畅，从而极大提升了用户体验。