vue基础知识的学习

用户6380048812261
165 阅读9分钟

开始vue的学习

本人是跟着b站张天禹老师学习的vue2基础，因为自己比较容易遗忘知识点，所以vue的学习做了笔记，方便自己查看。如果对学习vue的同学有一丢丢的帮助，那再好不过了。

vue

概念：一套用于构建用户界面的渐进式js框架。

特点：

  • 采用组件化模式（html,css,js封装到组件），提高代码复用率、且让代码更好维护
  • 声明式编码(心有灵犀),无需直接操作dom,避免命令式编码（一步一步的操作）,提高开发效率
  • 虚拟dom+优秀diff算法

vue官方文档的使用(绝对不是把它给背下来,要学会使用,不会的时候要会查阅,用的多的当然记下来是最好的)

初试Vue：

  • 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象，

el：就是指定当前Vue实例为哪个容器服务，值通常为css选择器字符串

data：存储数据，数据供el指定的容器去使用。

  • 容器中会混入一些Vue语法

vue实例:

{{××}}花括号里面要写js表达式,且××可以自动读取到data中的所有属性

模板(root容器内的html)语法:

  • 插值语法
  • 指令语法:

data里面多级嵌套的话,就需要用到(.)

插值语法其实就是只要vue实例中有的就都可以写入{{}}，data的作用就是把data中的东西弄到vue实例上

数据绑定:

单向数据绑定:就是v-bind: ，，，属性前加冒号引号中的都当作js表达式去解析

双向数据绑定:就是v-model:(就是输入类的,input和textarea,select,,可以直接简写为v-model,因为其默认绑定value)

$开头的一些方法是vue提供的,可以直接拿来用.

重要原则：

由vue管理的函数，一定不要写箭头函数，一旦写了，this就不再是vue实例了 。比如data函数

比如methods里面配置的函数.比如set,get()

,简写的监视属性

不被vue管理的函数,最好写成箭头函数,目标只有一个,this指向vue实例,,,定时器回调函数,ajax回调函数,promise回调函数

前端主流的框架设计思想：

就是数据放在对应的地方，模板结构写出来，那怎么把数据整到模板中，就需要学习这个框架中的语法了

数据代理

(通过一个对象代理对另一个对象中属性的操作(读/写))：

Object.defineproperty(对象名,'属性名',{配置项})方法

配置项:value,enumerable,writable,configurable,

get(),set()

就是给对象添加属性的,

可以实现当值改变了,就可以对应的实现属性值的变化,也就是相当于data的数据绑定

事件处理

  • 有的时候需要传参,但是又不想吧event搞丢u了,就需要 @click="tip(22,$event)"

  • 事件修饰符(.prevent)例如a标签的@click.prevent="tip",就是阻止a标签跳转

    还可以@click.prevent.stop(修饰符连写)

    image-20230523162257781

键盘事件(keyup\keydown)

image-20230523164459841

比如:@keyup.enter="tip"

image-20230523164935519

计算属性(有缓存的优点)

涉及到比较复杂的表达式 ,就不要直接写到模板中插值语法中了.

计算属性会被缓存在第一次读取后.

但是在其所依赖的数据发生变化时,计算属性中的getter会重新调用去计算得到一个新的返回值给计算属性

可简写(在只有get时)

侦听(监视)属性

用于监视属性,当属性值发生改变的 时候,可以拿到旧值和新值,做出其他的逻辑.

handler函数配置项(只有这个的话可以使用简写)

image-20230523180907779

深度监视配置项deep:true

绑定class样式(:class)(从data中取样式名)

字符串写法

数组写法(要绑定的样式个数不确定,名字也不确定)

对象写法(要绑定的样式个数确定,名字也确定,但要动态决定用不用)

条件渲染

列表渲染

列表渲染要动态绑定一个:key=(只要是唯一的就可以,数字,字符串均可)

可以默认写index,就不用声明在数组中id,但是这样在打乱数组顺序的时候(比如在数组最前面插入一个对象)通过虚拟DOM对比算法可能会复用错乱的问题.所以这样不行,还是得找唯一标识.

从服务器请求过来的数据都是有惟一标识的,比如我上次做的项目的 id.

image-20230523213649365

image-20230523214452099

对于一个由其他的数据2算出来的数据1,你要修改其数据1,就需要直接修改数据2

come on！

列表过滤

v-for渲染数组得到一个列表，从输入框里面拿到一个数据进行模糊搜索然后再次渲染。

其实也不麻烦，拿到输入的数据，用filter针对数组中的每一个对象中某一字符串进行indexof筛选然后再渲染。

列表排序

就还是利用数组的一些方法，这也说明，这些数组字符串的方法，能记还是要记住的，这都算是很基础的东西。

vue监测数据变化的原理

通过setter实现监视,且要在vue实例化时或vuecomponent实例化时就传入要检测的数据

Vue.set(target,'propertyName/Index',value)

vm.$set(target,'propertyName/Index',value)不能给vm或vm的根数据添加属性

问题:单纯的对数组中的对象赋值是不奏效的,不是响应式的.也就是说,赋是可以赋值的,但是vue不能检测到数组中的数据发生了改变.要使其感受到到就要用到,push,pop.shift,unshift,reverse,splice,sort

当然也可以用set接口,只不过原来写属性的地方写索引值

用了一个包装(先调用原始数组的push方法实现对应的功能,再重新解析模板构建虚拟dom,更新页面),也就是push这个方法已经被vue包装过了,所以这些方法可以被检测得到

reactive：响应式

想要在已经创建好vue实例后再添加其他属性，并且是响应式的(有对应的get,set方法的)就可以用vue.set()或者vm.$set(),,,注意:第一参数肯定是对象中的对象

数据劫持:就是在你数据发生改变的时候,vue对你的数据进行了一些操作,渲染响应等等.

继续今日份vue学习

收集表单数据(都是需要写v-model)

radio，需要给标签配置value

checkbox，需要配置value，并且用数组接收

输入框，下拉框，

v-model的三个修饰符：

lazy：失去焦点再收集数据

number：输入字符串转为有效的数字

trim：输入首尾空格过滤

过滤器(本质依旧是函数)

定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)

将时间戳格式化为日期时间,但是并没有改变原本的数据,是产生新的对应的数据

可以用 day.js

模板中的格式{{time |函数名字}}

image-20230525142944383

图片中细节

过滤器之间依次传参,首先拿到的是从前面传过来的参数

es6默认传参语法

日期格式可以自己设置

内置指令

  • v-text

向其所在的标签完全替换文字(用处不多了解,用插值语法比较好)

  • v-html

会产生安全性问题,在网站上动态渲染任意HTML是非常危险的,容易导致xss攻击,永远不要在用户登录体检内容上使用

  • v-cloak

用处不大,就是vue实例创建好后,会删除标签上有这个属性的,配合css可以实现解决网速慢页面展示{{××}}的问题

  • v-once

所在节点在初次动态渲染后，就视为静态内容，以后不变了。

  • v-pre

就是让vue知道这里面没有指令，不用再编译什么的，提高效率。

自定义指令

就是自己去手动去实现dom操作，完成这个指令实现的功能

写在directives

函数式写法：(其实是包含了bind和update)

被调用：指令与元素成功绑定时。和指令所在的模板被重新解析时

对象式写法：(其中包括三个回调函数)

{

指令与元素成功绑定时调用

bind(){ },

指令所在元素被插入页面时

inserted(){ },

指令所在模板被重新解析时

update(){ },

}

指令名字如果多个单词,用横线连接kebab-case命名,不要用camelCase,在脚本中,就要加上引号了.

可以定义全局自定义指令(先了解有需求再查)

周期函数

mouted(){}

vue完成模板解析并把初始的真实的dom元素放入页面后(挂载完毕)调用mounted

挂载流程：

beforeCreate(){}

在此之前，初始化生命周期、事件，数据代理没开始，所以在函数里无法通过vm访问到data中的数据，methods中 方法。

created(){}

  • 已经初始化数据监测（vue监测对象数组变化，给对象里的属性匹配getter，setter，以及数组方法的二次包装是在这里实现的），数据代理
  • 可以通过vm访问到data中的数据，methods中的方法。并且如果在渲染数据的时候用到v-for渲染请求过来的数据，那请求基本是在这里进行的。
  • 这个函数之后，vue开始解析模板，生成虚拟DOM（内存中），页面还不能显示解析好的内容

beforeMount(){}

  • 这个阶段，页面呈现的是未经vue编译的DOM结构，所有对DOM的操作，最终都不奏效。

mounted(){}

  • 之前将内存中的虚拟DOM转为真实DOM插入页面
  • 页面呈现的是经过vue编译的DOM，一般在次进行开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化操作

更新流程：

beforeUpdate(){}

数据已经更新，但页面是旧的。也就是页面尚未和数据保持同步。

updated(){}

数据和页面保持同步

image-20230526192636041

销毁流程：

beforeDestroy(){}

一般在此阶段：关闭定时器，取消订阅消息，解绑自定义事件

destroyed(){}

生命周期钩子总结

image-20230526201306442

ES6对象简写方法:就是名字和值一样,就可以把值和冒号省略.

有时候局部变量需要被外部使用，可以用this.去把这个局部变量给挂载到vue实例上

cookie:(其实本质就是类似json的字符串),存的东西就是你的身份标识,根据这个东西服务器可以返回你想要请求的

vue学习4

组件是什么：实现应用中局部功能代码资源的集合

组件

非单文件组件

单文件组件(主要使用这种,条理清晰好维护)

全局注册：

Vue.component('hello',hello)

局部引用：就那呗

组件使用步骤：

  • 定义组件
  • 注册组件
  • 使用组件

为什么组件里面的data要使用函数：避免组件被复用时，数据存在引用关系

组件名称是多个单词时，可以用段横杠-连接，并且在注册组件时，要加引号包裹名称

组件嵌套

vm管理app组件

app负责管理下一级组件

下一级组件中又可以嵌套要用的 组件

注意：组件定义要放到前面，不能还没有遇到定义组件的代码，你就写注册或使用组件的代码（非单文件组件的，不用太在意）

理解VueComponent

  • 用简写或Vue.extend()来定义的一个组件本质是一个vuecomponent的构造函数，是由Vue.extend()生成的

    image-20230527164741965

有个问题就是extendOptions和options是什么，并且是什么时候开始传入的。这个我不是很清楚，我现在的理解就是这俩就是在使用extend这个方法时传入的page

  • 在组件使用的步骤时，vue帮我们执行new vuecomponent（options）
  • 每次调用vue.extend时，返回的都是一个全新的 vuecomponent构造函数
  • 组件page中的this指向vuecomponent实例对象就是和vm结构类似的vc（vm中管理着vc）

一个内置关系：

image-20230527173822590

vue调整了这个线路，让vue的原型对象作为vuecomponent原型对象的兜底的

为什么要有这个关系？就是为了让组件实例对象vc可以访问到vue原型上的属性，方法。

avatar
文章
阅读
粉丝