系列文章目录
后续补充
文章目录
- 系列文章目录
- 前言
- 一、库与框架的区别是什么？
- 二、Vue.js 的核心特性有哪些？
- 三、什么是数据驱动视图？
- 四、MVVM 模型各部分含义是什么，在 Vue.js 中分别对应哪些功能？
- 五、el 选项的作用是什么，可以设置哪几种值？
- 六、 设置在 data 中的数据有什么特点？
- 七、Vue.set() 可以解决什么问题？
- 八、插值表达式内有哪些书写要求？
- 九、methods 的作用是什么？
- 十、谈谈你对指令的理解。
- 十一、常用的内容处理指令有哪些？
- 十二、常用的属性绑定操作有哪些？
- 十三、v-for 指令的注意点？
- 十四、v-if 与 v-show 的区别？
- 十五、如何绑定事件？
- 十六、谈谈你对双向数据绑定的理解？
- 十七、如何设置自定义指令？
- 十八、过滤器通常用来做什么？
- 十九、methods 与 computed 有哪些区别？
- 二十、如何设置侦听器？
- 总结
前言
Vue.js基础简答题。
一、库与框架的区别是什么？
当使用库时，程序员负责应用程序的流程，选择何时何地调用库。当使用框架时，框架负责流程。此时框架提供了一些插入代码的地方，但是它会根据需要去使用你插入的代码。框架的使用需要遵守规则，自由度比起库来要差。
二、Vue.js 的核心特性有哪些？
- 数据驱动视图。
- 组件化开发。
三、什么是数据驱动视图？
data中的数据声明以后，将数据绑定到视图，数据变化会自动更新到视图中对应元素之中，无需手动操作DOM，达到数据驱动视图的效果。
四、MVVM 模型各部分含义是什么，在 Vue.js 中分别对应哪些功能？
- M-Model，代表数据。 对应页面上要显示数据。
- V-View，视图模板。 对应DOM结构。
- VM-ViewModel，视图模型，用来和View层进行双向数据绑定,对应Vue实例。
五、el 选项的作用是什么，可以设置哪几种值？
选取一个DOM元素作为实例的挂载点，划定vue.js作用的范围。可以设置为原生javascript获取的元素/css选择器。
六、 设置在 data 中的数据有什么特点？
data中的数据为响应式数据，发生改变时，会自动更新到视图上。可以在插值表达式中直接使用,可以用于设置HTML元素属性和内容，单向数据绑定和双向数据绑定。
七、Vue.set() 可以解决什么问题？
data中存在数组时，索引操作和length操作对于数组的改变不会自动更新到视图上。而Vue.set()方法更新数组中的数据，可以自动更新到视图上。Vue.set(要改变的数组名，索引值，‘生效的内容’)
八、插值表达式内有哪些书写要求？
插值表达式只能写在标签内容区域，不能写在标签上。内部可以写javascript的表达式，但不能书写javascript语句。元素内容可写成组合形式或者结合数据绑定操作，为元素进行动态内容设置。
九、methods 的作用是什么？
存储Vue实例要使用的函数。
十、谈谈你对指令的理解。
指令是HTML的自定义属性，把指令设置给HTML元素以后，框架可以识别出特定的自定义属性，然后快速进行功能处理，简化DOM操作，相当于对基础DOM操作进行封装。当指令的表达式改变时，会进行相应的DOM操作。
十一、常用的内容处理指令有哪些？
- v-text：元素内容整体替换为指定纯文本数据。
- v-html：元素内容整体替换为指定HTML文本。
- v-once：使元素内部的插值表达式只生效一次，为静态数据，不会动态更新。
十二、常用的属性绑定操作有哪些？
用于动态绑定HTML属性,例如id，class，style。绑定纯数据、设置表达式、绑定多个属性，还可以绑定对象。
十三、v-for 指令的注意点？
v-for一般不与v-if一起在一个标签上使用。使用v-for的同时，应始终指定唯一的Key值，提高渲染性能并避免问题。通过v-for与< template>模板占位符结合使用，将某一个指令内容区域进行循环创建，不能设置key属性。
十四、v-if 与 v-show 的区别？
- v-show是通过改变元素的display属性改变元素的显示与隐藏。v-if适用于频繁切换显示与隐藏。
- v-if是通过是否创建DOM元素来改变元素的显示与隐藏。
十五、如何绑定事件？
v-on绑定事件，可以缩写成@。
十六、谈谈你对双向数据绑定的理解？
双向数据绑定是在单向数据绑定的基础上，可自动将元素输入的内容更新给数据，实现数据与元素内容的双向数据绑定。双向数据绑定的主体是View和ModelView。View代表视图元素，ModelView代表Vue实例。Vue实例中的data中的数据改变时会自动更新到视图上，这叫做单向数据绑定。在单向数据绑定的基础上，改变视图中元素的数据时会自动更新到data中的数据上，这叫双向数据绑定。
十七、如何设置自定义指令？
- 全局注册，所有Vue实例和组件均可使用
Vue.directive("自定义指令的名字",{
inserted：function(el){ // 钩子函数
el.focus() //代码操作
}
});
- 局部注册，只有当前Vue实例或组件内可以使用
directives: {
自定义指令的名字: {
// 指令的定义
inserted: function (el) { // 钩子函数
el.focus() // 代码操作
}
}
}
十八、过滤器通常用来做什么？
对文本内容进行格式化。
十九、methods 与 computed 有哪些区别？
| computed | methods |
|---|---|
| 通过属性名访问 | 函数调用 |
| 基于缓存依赖，只有计算属性所依赖的数据发生改变时，它才会重新取值 | 每次渲染元素时，若有函数调用，则每次都会被调用 |
| 遍历数据和复杂数据计算时常用计算属性 |
二十、如何设置侦听器？
new Vue({
el:"#app",
data:{
value:'',
obj:{
content1:'内容1',
content2:'内容2'
},
watch:{
value(newValue,oldValue){
// 逻辑代码
}
obj:{
deep:true;
handler(val,oldVal){
}
}
}
}
});
总结
Vue.js是一个渐进式JavaScript框架，用于构建用户界面。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue都可以胜任。
Vue.js的特点包括：
渐进式框架：Vue.js不需要在项目中引入大量的库或插件，就可以快速构建出漂亮的用户界面。
易于学习和使用：Vue.js的API设计得非常简单易懂，学习成本低。
灵活性：Vue.js可以与其他库或插件无缝集成，也可以自底向上逐层封装。
高效性：Vue.js采用虚拟DOM技术，可以快速响应数据变化。