vue基本知识点

Vue
尤雨溪

渐进式的JAVAscript框架

MVVM框架
M:model层 数据的增删改查
V:view层 视图 类似与HTML一样的模板
VM:viewModel model和view的一个映射层

优点:
数据驱动视图

回流和重绘
简单的来说页面的排版布局发生了改变就是回流
简单来说对一个元素进行样式操作不会导致页面布局发生改变重绘

回流一定会发生重绘
重绘不一定发生回流

vue常用的指令
v-text {{}}
v-html
v-bind :
v-on @ .stop .prev .enter .keyCode值 $event
v-model form表单 .number
Object.defineProperty
Proxy
v-for

v-show
v-if
区别:
前者操作元素的display属性 初次渲染的开销较大
后者操作元素的创建和销毁 开销较大

使用场景:
v-else-if
v-else
v-pre
v-cloak
v-once
v-slot 插槽

自定义指令
全局注册
Vue.directive()
局部注册
VUE({

})

过滤器
Vue.filter()

组件
Vue.component()

watch
属性监听
基于Vue的依赖,当依赖的属性发生了改变的时候,那么就会自动触发相对应的方法进行数据的处理
如果监听对象的时候只会监听对的引用地址是否发生了改变 具体的值是不会进行监听的
如果需要监听对象值的变化 handler函数 deep:true
无法监听数据(特殊情况)的变化 this.arr[0] = 200; this.arr.length = 0
在监听的函数中会接收到2个值 一个新值和一个旧值
$set() 给一个响应式对应添加一个响应式属性

特点:
一个数据影响多个数据

computed
属性计算
基于Vue的依赖,当依赖的属性发生了改变的时候,那么就会自动触发相对应的方法进行数据的处理
数据的缓存

特点
一个数据受多个数据的影响

生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
activated 活跃状态
deactivated 缓存状态

动态组件
通过同一个挂载点进行动态切换组件的变化
<component></coponent> is

<keep-alive></keep-alive> (***)

属性:
include
exclude
max

Vue动画
当前的元素必须遵循2个特点
1、必须经历显示隐藏
2、需要执行动画的元素 外层必须加一个<tranisition></tranisition>

name:动画的名称

name-enter
name-enter-active
name-enter-to

name-leave
name-leave-active
name-leave-to

<tranisition
enter-class
enter-active-class
enter-to-class
。。。
></tranisition>

组件传值
父传子
自定义属性
props:[] {}
type default required

子传父
通过自定义方法 触发通过this.$emit

通过插槽作用域

非父子
公共的vue实例对象
EventBus
手动封装$on $emit $off 事件订阅
Vuex

为了使组件更加的灵活

data为什么在组件中是一个函数而不是一个对象?

什么是单项数据流?

插槽
slot

默认名字是default

如果需要命令的时候 v-slot:名称

作用域插槽:
v-slot:名称 = "接收的值"
<Banner>
<template v-slot>
<p>111</p>
</template>
</Banner>

vue实例身上的方法
$mount()
$destroy()
$foreUpdate

$on
$emit
$off
$once

1、什么叫回流和重绘
2、虚拟DOM (虚拟DOM就是真实的JS对象,操作内存中的JS对象比操作真实的DOM速度要快)
3、模块化
4、虚拟DOM的key值有什么作用
5、Object.defineProperty
6、单页面开发与多页面开发的优缺点

博客
深入响应式原理

单文件组件?

查漏补缺
<keep-alive></keep-alive>
实例身上的方法
$extend
$mixin
路由
Vuex
axios
跨域
移动端

原文地址:https://www.cnblogs.com/PeiGaGa/p/11032653.html

时间: 2024-11-03 19:23:05

vue基本知识点的相关文章

Vue常见知识点

I. 什么是 MVVM? MVVM是 Model-View-ViewModel 的缩写.它是一种设计思想.Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑:View 代表UI组件,它负责将数据模型转化成 UI展现出来:ViewModel 是一个同步 View 和 Model 的对象. 在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过 ViewModel 进行交互,Model 和 ViewModel之间的交互是双向的,因此 View 数据的

记vue API 知识点

1. v-cloak指令:这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕. <div> {{msg}} </div> msg不会显示知道vue实例编译结束,这样就不会导致出现空白. 2.

Vue零散知识点

1.vue中的<router-view></router-view>的作用,它是和vue的路由相结合的,它的作用是将路由匹配到的组件渲染在里面.比如说你要跳转,如何没有<router-view></router-view>,那么跳转不成功 1 <script src="https://unpkg.com/vue/dist/vue.js"></script> 2 <script src="https:

Vue Router 知识点梳理

1.使用步骤: a. 使用模块化机制编程,导入Vue和VueRouter,调用 Vue.use(VueRouter): b. 定义 (路由) 组件: c. 定义路由routes: d. 创建 router 实例,然后传 `routes` 配置: e. 创建和挂载根实例. 2.通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由: 3.this.$router 和 router 使用起来完全一样.我们使用 this.$ro

Vue基础知识点

基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destoryed vue常用指令: v-for.v-bind(缩写形式:prop).v-on(缩写形式@click='sss').v-if/v-else/v-else-if.v-model.v-once.v-html.v-show... vue自定义组件:Vue.component('componentName'

vue 路由知识点梳理及应用场景整理

最近做项目才发现,我确实对 vue-router 太不熟悉了,都只了解个简单用法就开始搞了,本来很简单的问题,都搞不清楚.现在重新看一遍文档,重新梳理一下. vue 路由的原理 说实话,路由我一直也就光顾着用,没认真思考过这个问题,还是那次人家面试问了这个,我才反应过来是应该好好的了解一下了. 无刷新跳转页面,是单页应用的一大优势,用户体验好,加载速度快,vue 路由的跳转就是无刷新的,它有两种形式,可以在定义路由的时候通过 mode 字段去配置,如果不配置这个字段,那么默认使用的就是 hash

vue小知识点汇总

对数组的改变不能使用数组索引,只能用这几个方法:push, pop, shift, unshift, splice 模板占位符<template></template>:可以包裹一些元素,在循环的过程中并不会被渲染到页面上 <template v-for="item in list"> <div>{{item}}</div> </template> html对象的遍历:v-for = "(item,key

vue小知识点总结

一:插件 1:better-scroll 插件实现左右轮播滚动 2:vue-lazyload 插件实现图片懒加载 3:实现移动端自适应: 3.1: postcss 插件引到项目里 功能:把你自己写的代码px转化为rem(对于引入的外部插件,不做单位转化) 3.2:main.js 中引入一段js代码,设置html标签中的font-size大小 window.onresize = setHtmlFontSize function setHtmlFontSize () { const htmlWidt

Vue简单知识点

vue生命周期的理解 什么是vue生命周期? Vue 实例从创建到销毁的过程,就是生命周期.从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.销毁等一系列过程,称之为 Vue 的生命周期. vue生命周期总共有几个阶段? 总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后 beforeCreate(创建前) : Vue 实例的挂载元素 $el 和 数据对象data都为undefined,还未初始化. created(创建后) :完成数据观测,属性和方法的运算,初始化事件