vue:基础理解与注意事项(一)
1. 谈谈你对MVVM开发模式的理解
MVVM分为Model、View、ViewModel三者。
Model 代表数据模型,数据和业务逻辑都在Model层中定义;
View 代表UI视图,负责数据的展示;
ViewModel 负责监听 Model 中数据的改变并且控制视图的更新,处理用户交互操作;
Model 和 View 并无直接关联,而是通过 ViewModel 来进行联系的,Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新,View 中由于用户交互操作而改变的数据也会在 Model 中同步。
这种模式实现了 Model 和 View 的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作 dom。
2. vue 和 jquery 有什么区别,简述Vue的响应式原理
相同点:都是Js框架
区别:vue 虚拟dom,遍历dom树,虚拟dom与真实dom比较,如果有变化,就更新真实dom(通过定时器),jquery是直接找到节点,操作真实dom
简述Vue的响应式原理:
参考链接:https://cn.vuejs.org/v2/guide/reactivity.html vue官网中,深入响应式原理这一章节中有具体介绍到 Vue 响应式系统的底层的细节
3. Vue 有哪些指令?
v-html、v-show、v-if、v-for、v-bind(😃、v-model等等
4. v-if 和 v-show 有什么区别?
v-show: 根据表达式之真假值,切换元素的 display CSS 属性。
v-if: 根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 ,将提出它的内容作为条件块。
工欲善其事必先利其器,对API的掌握一定是要比较透彻的,知道了它们俩个的区别之后,当一定条件变化,需要去改变组件的默认初始值时,就可以用v-if这个指令,使表达式为真时,元素及数据或组件销毁并重建。
5. v-html的使用应该注意什么?
v-html标签用于更新元素的 innerHTML 。
1)注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。
这句话的意思是:比如在元素上绑定的@click事件,并不会生效,因为没有作为模板进行编译
2)在单文件组件里,scoped 的样式不会应用在 v-html 内部,因为那部分 HTML 没有被 Vue 的模板编译器处理。