Vue基础知识点汇总【附基础面试题】
文章目录
- 什么是Vue
- 如何使用Vue
- MVVM设计模式
- 绑定语法: 同模板字符串中的${}
- 指令(directive)
- v-bind
- v-show
- v-if
- 高频笔试题(手写) 观察者模式
- v-for
- splice
- :key=“i”
- 绑定HTML片段内容
- v-html
- 防止用户短暂看到{{}}
- v-cloak
- v-text
- 事件绑定
- vue中如何获得事件对象 (vue中如何获得鼠标位置)
- $event
- v-once
- v-pre
- 双向绑定
- v-model
- 监控函数 watch
- 绑定样式
- 绑定内联样式
- 绑定class
- 自定义指令
- 计算属性
- 过滤器
- axios
- 组件
- 组件化开发
- 定义子组件
- 组件间传递数据
- SPA: Single Page Application
- VUE脚手架
- 安装生成脚手架代码的工具 vue create
- 运行 npm run serve
- 为脚手架添加axios模块
- 脚手架项目结构
- 脚手架和SPA应用代码的结构
- es6模块化开发在脚手架中的应用
- 用VUE脚手架项目开发
- 组件的生命周期
- 总结
- 基础面试题：
- 一、对于MVVM的理解？
- 二、Vue的生命周期
- 三、 Vue实现数据双向绑定的原理：Object.defineProperty（）
- 四、Vue组件间的参数传递
- 五、Vue的路由实现：hash模式 和 history模式
- 六、Vue与Angular以及React的区别？
- 七、vue路由的钩子函数
- 八、vuex是什么？怎么使用？哪种功能场景使用它？
- 九、vue-cli如何新增自定义指令？
- 十、vue如何自定义一个过滤器？
- 十一、对keep-alive 的了解？
- 十二、一句话就能回答的面试题
什么是Vue
1、什么是: 基于MVVM设计模式的渐进式的纯前端js框架
(1)MVVM?
(2)渐进式: 不要求整个项目都用vue做，可以轻松和别的技术混搭，且会多少就可以先用多少！
(3)纯前端js框架: 与nodejs无关！单靠浏览器就可运行！
(4)框架:
-
a. 原生js: 不需要下载，浏览器就自带的ES+DOM+BOM
- 1). 优点: 万能！
- 2). 缺点: 繁琐！
-
b. jQuery函数库: 基于原生js，重新封装的一批函数的集合。简化了传统DOM每一步操作！
- 1). 优点: 简单！
- 2). 缺点: 没有简化开发的步骤！依然包含大量重复的编码！
-
c. 框架: 已经包含核心功能的半成品项目！
- 1). 优点: 根本上简化了开发流程，几乎避免了重复编码
- 2). 缺点: 需要转变观念，和做事方法！很难适应！
2、为什么: 便于大项目的开发，避免重复代码，提高开发效率
3、何时: 凡是以数据为主(增删改查)的项目，都可用vue开发！
如何使用Vue
1、下载:
(1). 下载vue.js文件，引入普通网页中使用:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<button id="btnMinus">-</button><span >0</span><button id="btnAdd">+</button>
<script>
//DOM4步
//1. 查找出发事件的元素
//本例中: 先点击+按钮
$("#btnAdd")
//2. 绑定事件处理函数
.click(function(){//3. 查找要修改的元素//本例中查找当前按钮兄弟中的span元素var $span=$(this).siblings("span")//4. 修改元素//获取span的内容，转为整数var n=parseInt($span.html());//n+1n++;//再放回去$span.html(n);
})//1. 查找出发事件的元素
//本例中: 先点击+按钮
$("#btnMinus")
//2. 绑定事件处理函数
.click(function(){//3. 查找要修改的元素//本例中查找当前按钮兄弟中的span元素var $span=$(this).siblings("span")//4. 修改元素//获取span的内容，转为整数var n=parseInt($span.html());//只有n>0时，才能-1n>0&&(n--);//再放回去$span.html(n);
})
</script>
</body>
Vue版本:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--0. 先引入vue.js-->
<script src="js/vue.js"></script>
</head>
<body>
<!--1. 做界面: 1.1 要求:只能有一个唯一的父元素1.2 用{{变量}}语法在HTML中标记出可能变化的位置——类似于模板字符串中的${变量}本例中: 只有span的内容可能会变1.3 用@事件名="处理函数名",为元素绑定事件
-->
<div id="app"><button @click="minus">-</button><span>{{n}}</span><button @click="add">+</button>
</div>
<script>
//2. 定义一个对象，其中保存页面上所需的所有变量
//data中的变量名应该和html中的{{}}里的变量名保持一致
//通常HTML中有几个{{变量}}，data中就要有几个属性支持页面上的变量
//本例中: HTML中只需要一个变量n
//一个功能的所有变量都要写在data对象内！
var data={ n:0 }
//3. 创建一个Vue类型的子对象，将数据对象data和页面元素区域div#app绑定起来！
new Vue({
//:左边都不能改名el:"#app",//找到HTML中id为app的元素区域data:data,//将保存数据的data对象包含进new Vue里边来！//{ n:0 } 就成了vue的成员//所有页面上需要的事件处理函数都要写在methods的成员中:methods:{//本例中: 页面上需要两个函数: add和minus//在事件处理函数中，只需要埋头专心处理数据即可！new Vue()会自动保持变量和页面内容同步！//且在methods的方法中，可用this.访问当前对象自己data中的变量add:function(){//this->当前new Vue()对象！this.n++; //this.data.n++},minus:function(){if(this.n>0){this.n--;}}}
})
</script>
</body>
MVVM设计模式
1、什么是: 对前端三大部分代码的重新划分
2、旧划分:
(1). HTML 专门定义网页内容的语言
(2). CSS专门定义网页样式的的语言
(3). Js专门操作页面内容和样式，添加交互行为的语言
3、问题: 因为HTML和CSS很弱！缺少编程语言必须的要素！
(1). 没有变量，如果想让内容虽程序自动改变，不可能！
(2). 缺少必要的程序结构: 没有分支和循环
导致: JS要承担一切操作页面的代码！导致JS代码繁琐，且重复代码极多！
4、新划分:
(1).界面/视图(View):
- a. 包括传统的HTML+CSS
- b. 增强了HTML的功能！
- 1).比如: HTML中可以写变量！
- 2). HTML中可以写if else if else 也可以写for循环 3). HTML中可以写事件绑定！
(2). 模型数据(Model): 页面上所有需要的变量，集中保存在一个对象中！
问题: 模型数据中的变量值，不会自动跑到页面上指定位置的！
(3). 视图模型(ViewModel): 用一个对象将视图(View)和模型对象(Model)绑定起来！
绑定结果: 数据模型中的变量值，可以自动跑到视图中指定位置，无需任何js编码！且模型对象中数据改变，视图中对应位置的变量值跟着自动变化！
5、MVVM的原理: Vue框架是如何实现MVVM设计模式的
(1)new Vue()加载data对象
a. 将data对象打散，data内部的属性直接隶属于new Vue()对象
b. 将data中每个原始属性隐姓埋名，隐藏
c.为data中每个属性请保镖:
1). Data中每个属性都有一对儿get/set方法
2). 今后只要想修改data中的变量都会自动触发set()
3). 在每个属性的set方法中，都自动植入一个notify()函数调用，只要试图修改data中的属性值时，都会自动调用set(),只要自动调用set()势必会自动notify()发出通知
(2)加载虚拟DOM树:
a. 通过el属性值的选择器找到要监控区域的父元素
b. 创建虚拟DOM树
c. 扫描这个要监控的区域:
1). 每发现一个{{变量}}的元素，就将该元素的信息，记录进虚拟DOM树，同时首次用data中同名变量的值，代替页面中{{n}}的位置。
2). 每发现一个@事件名="函数名"的元素，就自动变为:
On事件名=“new Vue().函数名”
(3). 加载methods对象: methods对象中的所有方法，都会被打散，直接隶属于new Vue()和data中被打散的属性平级
所以，在methods中的方法中，想操作data中的属性，都可以写为"this.属性名"即可！
(4). 当触发事件时，自动调用new Vue()中methods中指定的函数，执行其中this.属性名的修改。修改会自动触发属性的set()方法，自动触发set()内部的notify函数:
a. 遍历虚拟DOM树，只找出受影响的个别元素
b. 利用虚拟DOM树提前封装好的DOM操作，只修改页面中受影响的个别元素！——效率高！
6、总结: MVVM的原理/Vue的绑定原理:
访问器属性+观察者模式+虚拟DOM树
7、什么是虚拟DOM树:
(1)什么是虚拟DOM树: 仅保存可能发生变化的少量元素的精简版DOM树
(2).优点:
a. 小, 遍历快！
b. 只更新受影响的元素，效率高！
c. 封装了DOM操作，无需我们程序员重复编码！
绑定语法: 同模板字符串中的${}
插值语法: Interpolation
1、什么是绑定语法: 让HTML中的内容也可随程序中的变量改变而自动改变！——也就是给HTML中添加变量功能
2、何时: 只要元素的内容中想随变量自动改变
3、如何: <元素>xxxx{{变量名}}xxxx
4、原理:
(1). 首次加载页面内容时，会用data中同名变量的初始值代替{{变量名}}位置
(2). 当data中同名变量在new Vue()中被更改时，自动更新{{变量名}}位置为新值
5、总结: {{}}中可以放什么，不能放什么
(1). 可以放: 变量，表达式，函数调用，创建对象，访问数组元素，三目
(2). 不能放: 程序结构(分支和循环)，没有返回值的函数调用
6、示例: 使用vue在页面上显示不同内容
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app"><h1>用户名:{{uname}}</h1><h2>性别:{{sex==1?"男":"女"}}</h2><h3>下单时间:{{new Date(orderTime).toLocaleString()}}</h3><h3>小计:¥{{(price*count).toFixed(2)}}</h3>
</div>
<script>
var vm=new Vue({el:"#app",data:{uname:"dingding",sex:1,orderTime:1579507293225,price:12.5,count:5//将来这些值都来自于ajax请求}
})
</script>
</body>
指令(directive)
1、什么是: 为HTML元素添加新功能的特殊属性
2、何时: 只要HTML元素需要某些特殊的功能时，就要使用对应的指令来实现
3、包括: 13种
v-bind
4、如果元素的属性值希望动态改变:
(1). 问题: 不能用{{}}绑定
(2). 解决: 应该用v-bind指令：
a. 标准写法: <元素 v-bind:属性名=“js表达式”>
b. 强调: 一定不要加{{}}，属性名前加v-bind:，=后的"“就扮演了{{}}的角色！{{}}中能写什么，此时”"中就能写什么！
c. 简写: 其实v-bind可省略！但是:不能省略！<元素:属性名=“js表达式”>
(3). 示例: 根据不同的变量值，动态改变
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--希望img的src属性，随变量PM25的值变化如果pm25<100, src变为1.png否则如果pm25<200, src变为2.png否则如果pm25<300, src变为3.png否则src变为4.png-->
<img :src="pm25<100?'img/1.png':pm25<200?'img/2.png':pm25<300?'img/3.png':'img/4.png'" >
<h1>{{pm25<100?'img/1.png':pm25<200?'img/2.png':pm25<300?'img/3.png':'img/4.png'}}</h1>
</div>
<script>
var vm=new Vue({el:"#app",data:{//本例中: 因为页面上只需要一个变量pm25，所以data中只有一个变量pm25pm25:125}
})
setInterval(function(){vm.pm25=Math.random()*400
},1000)
</script>
</body>
6、根据程序中的变量值控制一个元素显示隐藏: 2种办法:
v-show
a. 如何: <元素 v-show=“js条件”>
b. 原理: new Vue()扫描到v-show时，自动执行js条件，如果条件为true，则该元素原样显示。否则如果js条件执行结果为false，则new Vue()自动为当前元素加display:none，隐藏
c. 示例: 点按钮控制对话框显示和隐藏
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.alert{width:300px;height:100px;position:fixed;padding:10px;top:50%;left:50%;margin-left:-160px;margin-top:-60px;background-color:#faf}.alert>span{cursor:pointer;border:1px solid #fff;float:right;padding:5px;}</style><script src="js/vue.js"></script>
</head>
<body>
<div id="app"><!--希望单击按钮时，让对话框显示--><button @click="showIt">click me</button><div v-show="show" class="alert"><!--希望点x时，关闭对话框--><span @click="close">x</span>您的浏览器版本太低，请升级!</div>
</div>
<script>
var vm=new Vue({el:"#app",data:{//本例中: 因为页面上需要一个bool类型的变量show，控制对话框的显示隐藏show:false},methods:{//因为页面上单击按钮需要调用名为showIt的函数，所以//showIt:function(){showIt(){//本例中: 调用showIt为了让对话框显示！//所以: this.show=true;},//因为页面上单击x按钮需要调用名为close的函数，所以close(){//本例中: 调用close为了关闭对话框this.show=false;}}
})
</script>
</body>
v-if
a. 也能控制一个元素显示隐藏，上例中v-show可直接换成v-if。
b. 但是原理不同：v-if在扫描时，如果条件为true，则保留该元素。否则如果条件为false，则删除该元素！
鄙视: v-show vs v-if
v-show 采用display:none方式隐藏元素，不改变DOM树，效率高！
v-if 采用添加删除元素方式控制元素显示隐藏，可能频繁修改DOM树，效率低！
5、控制两个元素二选一显示隐藏:
(1). <元素1 v-if=“条件”>
<元素2 v-else>
(2). 强调:
a. v-else后不要写条件！(同js程序中的else)
b. v-if 和 v-else之间必须连着写，不能插入任何其他元素
(3). 原理: 如果扫描到v-if时，自动执行条件。如果条件为true，则保留v-if元素，删除v-else元素。否则如果条件为false，则删除v-if元素，保留v-else元素
(4). 示例: 切换登录和注销状态
<div id="app">
<!--希望如果已经登录，显示第一个div如果点注销，希望状态改为未登录-->
<div v-if="isLogin" id="div1">Welcome dingding | <a href="javascript:;" @click="logout">注销</a>
</div>
<!--否则如果未登录时，显示第二个div如果点登录，则状态改为已登录-->
<div v-else id="div2"><a href="javascript:;" @click="login">登录</a> | <a href="javascript:;">注册</a>
</div><script>
var vm=new Vue({el:"#app",data:{//因为界面上需要一个变量isLogin来表示是否登录isLogin:false},methods:{//因为页面上单击登录，需要调用login函数login(){//点击登录，修改状态为已登录this.isLogin=true;},//因为页面上单击注销，需要调用logout函数logout(){//点击注销，修改状态为未登录this.isLogin=false;}}
})
</script>
6、多个元素多选一显示:
(1). <元素1 v-if=“条件1”>
<元素2 v-else-if=“条件2”>
… …
<元素n v-else>
(2). 强调:
a. v-else后不要写条件！(同js程序中的else)
b. v-if和v-else-if 和 v-else之间必须连着写，不能插入任何其他元素
(3). 原理: 在new Vue扫描到这里时:
a. new Vue()会自动依次计算每个条件。
b. 哪个条件为true，就就保留哪个元素，删除其他元素
c. 如果所有条件都不满足，只保留v-else元素，删除之前其余元素
(4). 示例: 多个表情，多选一显示
<div id="app">
<!--随变量PM25的值变化，在四个img中选其一显示，删除其他img。如果pm25<100, 显示1.png否则如果pm25<200, 显示2.png否则如果pm25<300, 显示3.png否则显示4.png-->
<img v-if="pm25<100" src="img/1.png">
<img v-else-if="pm25<200" src="img/2.png">
<img v-else-if="pm25<300" src="img/3.png">
<img v-else src="img/4.png">
</div>
<script>
var vm=new Vue({el:"#app",data:{//本例中: 因为页面上只需要一个变量pm25，所以data中只有一个变量pm25pm25:125}
})
setInterval(function(){vm.pm25=Math.random()*400
},1000)
</script>
高频笔试题(手写) 观察者模式
//观察者（observer）模式: 变量值修改，所有关注的人都能自动得到通知，并收到新值
//保存数据的对象
var data={n:0, //外人想随时获得的变量，保存着外人关心的一个数据nobservers:[],//用一个数组保存将来关心这个变量n的所有外人，这些觊觎这个变量n的外人，也称为观察者//定义一个函数，专门修改变量n的值setN(n) {this.n = n//任何时候修改了变量n的值，都可以通知所有关注n的外人this.notifyAllObservers()},//定义一个函数，专门将关注变量n的外人(观察者)对象，集中保存在data中的observers数组中，便于集中通知。addObs(observer) {this.observers.push(observer)},//定义一个函数，专门用于通知当前data中的observers数组中保存的关心变量n的外人们，n发生改变了notifyAllObservers() {//遍历observers数组中每个外人对象this.observers.forEach(observer => {//每遍历一个外人对象，就通知外人，它关心的变量n发生改变了，请及时获取变量n的新值observer.getNewN()})}
}//向data的observers数组中添加三个关心变量n的外人(观察者)对象
for(var i=0;i<3;i++){data.addObs({//每个外人对象都包括两个属性和一个函数name:`obs${i}`, //外人的名字look: data, //每个外人都关心data对象中的变量，都紧紧盯着data对象//每个外人都准备一个函数，当data中变量改变时，可用于重新获得data对象中n的新值。getNewN:function(){console.log(`${this.name} known that n is updated to ${this.look.n}`)}})
}// 测试代码
console.log("data将n改为1时:")
data.setN(1)
console.log("data将n改为2时:")
data.setN(2)
console.log("data将n改为3时:")
data.setN(3)
v-for
1、反复生成多个相同结构的HTML元素: v-for
(1). <要反复生成的元素 v-for="(value, i) of 数组">
强调: v-for一定要放在那个要反复生成的元素上，而不是放在父元素上！
(2). 原理:
a. 当new Vue()扫描到这里时，自动遍历of后的数组中每个元素
b. 每遍历一个元素，就创建一个当前HTML 元素的副本
c. of前的两个变量:
1). value会自动获得当前正在遍历的数组元素值
2). i 会自动获得当前正在遍历的下标位置
d. 如果当前元素或子元素中，需要使用当前正在遍历的元素值或下标，可用绑定语法来绑定value和i的值。
强调: value和i的使用范围仅限于当前元素及其子元素范围内，不能在当前元素外使用！
(3). 示例: 遍历数组元素，反复生成多个相同结构的元素
<div id="app"><ul><!--本例中: 因为要反复生成多个li，所以v-for要写在li上，而不是li的父元素ul上--><li v-for="(value,i) of teachers" :key ="i">第{{i+1}}阶段: {{value}}</li></ul>
</div>
<script>
var vm=new Vue({el:"#app",data:{teachers:["亮亮","然然","东东","涛涛"]}
})
</script>
(4)v-for还可:
a. 可遍历数字下标的一切: 比如字符串
b. 可遍历对象中每个属性
示例: 遍历对象中每个属性，反复生成多个html元素
<div id="app"><!--希望遍历data中一个对象的每个属性，反复生成多个相同结构的HTML元素--><ul><li v-for="(value,key) of ym" :key ="key">{{key}} : {{value}}</li></ul>
</div>
<script>
var vm=new 本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！