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] }
})