Vue常见问题

1. el:"选择器",如果页面中多个选择器需要监控,那么new Vue()如何找到不同选择器下的元素进行更新?

答:和平时快递小哥一样: 每个专门的区域,都由专门的一个快递小哥负责维护。


在网页中也是一样:每个独立的功能区域,都需要一个专门的new Vue()对象监控:


所以,今后都是将页面分成多个功能区域,然后再新建多个new Vue()对象。每个new Vue()对象负责监控自己负责的区域中数据的变化,并显示数据。


2. new Vue的V必须大写吗?

答: new后跟的是一种类型名,意为创建某个类型的一个具体对象。比如new Student(),  new Array()。一种类型的名称,通常都是大写的。比如: class Student{}, 比如class Array{}等。


3. Error compiling template错误:

答:凡是见到这个错误,都是HTML中绑定语法写错了!也可能是HTML写的不标准。

  要看错误原因,直接跳过中间大片代码,直接看代码结尾的问题说明。说明包含三部分: 1.错误的原因, 2. 修改意见,3.修改的样例。


4. vs code中,明明语法没写错,还冒红提示错误?

答:vs code不同版本对vue的语法支持的不一定好,可能出现误判。所以,以最后能否运行为标准。不要过分依赖编辑器的报错提示。但是。。。十有八九是自己写错了。还是先检查一下


5. 现在应该如何复习以前的知识?

答:现在学习阶段以及今后工作中,最忌讳的就是大篇幅的回看原来旧的知识。因为大部分可能你都有印象,知识不确定而已。大篇幅回看旧的知识会浪费大量宝贵的时间和精力。

正确复习的办法很简单,就是打开那个阶段的思维导图,只看用法!实在需要看原理了,再找那个阶段对应的小视频看一下。

所以,思维导图最重要!


6. created()是什么?

答: created()就是Vue中的window.onload。

都是系统预先定义好的固定函数,在事件发生时自动调用。onload是整个页面加载后才执行。created()是Vue对象加载后就自动执行。onload不能乱改名,created()也不能乱改名。大家要学会类比和举一反三。


7. this的汇总:

(1) 普通函数或匿名函数自调中的this->window

          严格模式下: this->undefined

(2)obj.fun()   fun中的this->obj

(3)new Fun()   Fun中的this->正在创建的新对象

 (4)原型对象中的函数里的this->将来调用当前函数的.前的当前类型的子对象。

5. btn.onclick=function(){... }  this->btn

  6.回调函数:

    arr.forEach(function(){ ... })

    arr.map(function(){ ... })

    setInterval(function(){ ... })

    setTimeout(function(){ ... })

    $.ajax({

      ...

      success:function(){ ... }

    }).then(function(){

      ...

    })

    this->window所有回调函数,真正被调用时,前边是没有任何"对象."前缀

    所以,通常如果希望回调函数中的this不指window,而是跟外部的this保持一致,都要改为箭头函数

  7. jQuery中的回调函数:

   $().each(function(){ ... })

   $().animate({ ... }, ms, function(){ ... })

   jquery中的多数回调函数,this->当前正在操作的dom元素

  8. 不考虑之前已经总结的情况,vue中一切this都指向当前new Vue()对象。所以在vue js中访问任何变量都要加this.变量名。但是html中绑定变量名不用加this!


8. v-if为什么可以隐藏?没有写隐藏的方法呀?

答:框架自动判断v-if,根据v-if的条件决定是显示元素还是隐藏元素。至于隐藏元素使用的什么具体语句,已经被框架封装在了内部,由框架无人值守的自动调用。

9. var isLogin=this.isLogin;无论isLogin=true,还是isLogin=false页面都不变?

答:按值传递。this.isLogin中保存的是bool类型的值,是原始类型的值。原始类型的值,赋值给变量时,采用的是复制副本的方式。也就是拷贝this.isLogin中的值的副本给isLogin变量。在这一瞬间,内存里有两个值。一个给了变量isLogin,一个保存在了this.isLogin中。所以修改isLogin中的副本,原this.isLogin不变。自然就监控不到变化。页面不变。


10. methods中的login()中的this指谁?

  答: vue中一切this,都指当前new Vue()对象整体:



11. v-if看起来也可以用来做轮播图?

答: v-if可以做轮播图,但是只能做瞬间显示隐藏的轮播图。因为v-if是采用添加删除元素的方式控制元素显示隐藏。所以,无法使用过度效果。所以,v-if几乎不能用于做轮播图


12. <ul>

    <li></li>    <li></li>    <li></li>

   </ul>   <div>     <div>     <div>     <div>

用上边li控制下边div的显示隐藏?

答: 标签页效果,三个div,三选一显示,思路:用一个变量i控制三个div三选一显示。i变成几,就对应显示第几个div。点击每个li时,通过事件处理函数传入当前li是第几个。然后,将li的序号修改到data中的i变量上。代码:

data:{ i:1 //将来可能被改为1, 2, 3}//三个div都监视着这个变量i,变成几,就显示第几个div。       methods:{  show(i){  this.i=i  }  }

       //定义一个方法,让三个li共用,只不过,每次点击li时传入一个序号作为参数值。并将li的序号,改为要显示的div的序号。

HTML中:        <li @click="show(1)">       <li @click="show(2)">

       <li @click="show(3)">

       <div v-if="i==1">       <div v-else-if="i==2">       <div v-else>

结果:点击li,触发show,传入序号,修改data中的i为当前序号,触发通知,通知比较三个div的条件。哪个div的条件满足,就切换成显示哪个div。

其实:事件绑定时,处理函数后的(),可加可不加。无参数传入时,就不加。必须传入参数时,才加。


13.为什么v-if="条件",不用(),而要用=?

答:因为v-if内置上是HTML语言中的一种自定义属性。必须符合HTML的语法才行。HTML中,属性名和属性值之间只能用=。


14. create()为什么加(), methods:{为什么是:{?

答: created,是Vue自带的一个函数,可以执行一项任务。所以created时,要加()。

而methods是组织Vue中的函数的一种存储结构,不用来做事儿,仅仅用于划分一个专门的区域存储函数。所以不加(),而应该写成一个对象。


15. v-bind和v-if实现同样的功能,哪个效率高?

答: v-bind因为不改变DOM树,所以效率高。

       v-ifv-else-if  v-else在不断添加删除元素,频繁影响DOM树,所以效率略低。


16.如果<li>上带class,能不能循环出来?

答:可以。只要是v-for模板元素上带的,都可以循环出来。比如: <li class="tab tab-primary" v-for="(elem,i) of arr">

结果:

  <li class="tab tab-primary"></li>

          <li class="tab tab-primary"></li>

           ... ...


17. v-for内可不可以嵌套v-if或v-show?

答:可以

比如: <div id="app">

   <ul>

     <li v-for="(score,i) of scores" :key="i">

       <span v-if="score>=60">及格</span>

<span v-else>不及格</span>

     </li>

   </ul>

</div>

<script>

new Vue({

   el:"#app",

   data:{ scores:[89,50,65,59] }

})

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

推荐阅读更多精彩内容

  • 1. 说一下 Vue 的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合“发布者 - 订阅者”...
    莫小贝爱自由阅读 317评论 0 0
  • 新建完项目,先做好准备工作 1 定义全局路由 1.1路由懒加载,当组件太多的时候,vue这种单页面应用,如果没有应...
    9fff47b4e20c阅读 1,874评论 0 2
  • 深入响应式 追踪变化: 把普通js对象传给Vue实例的data选项,Vue将使用Object.defineProp...
    冥冥2017阅读 4,876评论 6 16
  • Vue常见问题 vue中的template只能有一个根元素例如: 以上的这段代码是错误的,因为vue的templa...
    weblfg阅读 283评论 0 0
  • 十二生肖鼠、牛、虎、兔、龙、蛇、马、羊、猴、鸡、狗、猪与子、丑、寅、卯、辰、巳、午、未、申、酉、戌、亥十二地支相配...
    金字塔顶阅读 438评论 0 2