vue基础

$nextTick 的含义

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。

vue 组件中的data为什么必须是一个函数

data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝

assets 和static 目录的区别

一般在 static 里放一些类库的文件,绝对路径直接引用,assets 里放属于项目的资源文件。相对路径。会被 webpack 打包进代码

vue常用的修饰符含义

.stop:阻止事件冒泡
.prevent: 阻止默认事件
.capture: 触发事件捕获
.self:当事件在该元素本身触发回调
.once: 只执行一次

vue和jQuery的区别

jquery侧重样式操作,动画效果等
Vue的数据与视图分离,以数据驱动视图(只关心数据变化,DOM操作被封装

delete 和Vue.delete删除数组的区别

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete直接删除了数组 改变了数组的键值。

Vue-router跳转和location.href有什么区别

ue-router使用pushState进行路由更新,静态跳转,页面不会重新加载;location.href会触发浏览器,页面重新加载一次

vue slot的作用

Vue2.6 中把普通插槽和作用域插槽给合并了
插槽就是一个返回VNode的函数而已

v-show 和 v-if指令共同点和不同点

共同点:都是dom渲染
不同点:如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。v-if如果条件为假则不渲染dom元素

如何让css只在当前组件中起作用

将当前组件的<style>修改为<style scoped>

<keep-alive>的作用是什么?

keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗,
一般用应于 选项卡

如何获取dom

在html元素上设置ref属性
在js里面this.$refs

vue的指令以及含义

v-for:基于一个数组来渲染一个列表
v-html: 更新元素的 innerHTML
v-text: 更新元素的 textContent
v-on: 绑定事件监听器 语法糖@
v-bind:动态绑定一个或者多个attribute,或一个组件prop到表达式
v-pre: 不需要表达式 跳过这个元素和它的子元素的编译过程
v-cloak: 不需要表达式 可以隐藏未编译的 Mustache 标签直到实例准备完毕

//css
[v-cloak] {
  display: none;
}
//html
<div v-cloak>
  {{ message }}
</div>

v-once: 不需要表达式 只渲染元素和组件一次

为什么使用key

无:key属性时,状态默认绑定的是位置;有:key属性时,状态根据key的属性值绑定到了相应的数组元素
key 是为 Vue 中 vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确、更快速

v-model是哪两个指令的语法糖

<input
  v-bind:value="something"
  v-on:input="something = $event.target.value">

分别简述computed和watch的使用场景

computed 是计算属性,有缓存 可以获取多个值输出一个
watch 是监听一个影响多个

v-on可以监听多个事件的写法

<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur}">//可以正常执行不同方法
<div v-on="{ mousedown:onInput,mouseup:onFocus,mouseenter:onBlur}" >盒子</div>
//可以正常执行不同方法
<div v-on="{click:onInput,click:onFocus,click:onBlur}">盒子</div>
//绑定多个相同事件,只执行最后一个方法
<div @click="{onInput,onFocus,onBlur}">盒子</div> 
//这样绑定无效

params和query的区别

//query传参: 
this.$router.push({
        path:'/xxx',
        query:{
          id:id
        }
      })  
//接收参数:
this.$route.query.id
//params传参: 
this.$router.push({
        name:'xxx',
        params:{
          id:id
        }
      })
  
//接收参数:
this.$route.params.id

params传参,push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined。
使用query传参的话,会在浏览器的url栏看到传的参数类似于get请求,使用params传参的话则不会,类似于post请求

vue初始化页面闪动问题,看到{{message}}的原因和处理

[v-cloak] {
    display: none;
}

created 和mounted 的区别

created 阶段 可以获取到Vue中的data和methods中的数据
mounted 可以获取到dom元素进行操作

vue获取数据在那个周期函数

可以在钩子函数 created、beforeMount、mounted 中进行调用,
ssr 不支持 beforeMount 、mounted 钩子函数,所以放在 created 中有助于一致性

vue-router是什么? 有哪些组件

路由模块,主要来实现路由。常用的组件有router-link、router-view

active-class 是哪个组件的属性

active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换;

怎么定义vue-router 的动态路由,怎么获取传过来的值

可以通过query,param两种方式
区别:query通过url传参,刷新页面还在;params刷新页面不在

route 和router 的区别

route相当于当前正在跳转的路由对象。可以从里面获取name,path,params,query
router为VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象

vue-router的两种模式

  • hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器;
  • history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式;
  • abstract : 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式.

vuex是什么? 哪种场景使用他

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

vuex有哪几种属性

state getters mutations actions modules

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,347评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,435评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,509评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,611评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,837评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,987评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,730评论 0 267
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,194评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,334评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,944评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2 349

推荐阅读更多精彩内容

  • 相关概念 混合开发和前后端分离 混合开发(服务器端渲染) 前后端分离后端提供接口,前端开发界面效果(专注于用户的交...
    他爱在黑暗中漫游阅读 2,777评论 4 45
  • ### 什么是Vue.js + Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(Reac...
    JLong阅读 1,053评论 0 0
  • 1、vue的双向绑定原理是什么 通过数据劫持结合发布者-订阅者模式的方式实现的,具体过程如下:实现数据双向绑定,首...
    阿羡吖阅读 981评论 0 13
  • 一、对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型,...
    lucky婧阅读 418评论 0 2
  • 第一天的总结:注意:和js有关的就写在(钩子函数)inseted函数中去,和CSS样式有关的就写在bind函数中去...
    MISS彭阅读 474评论 0 0