撩课-Web大前端每天5道面试题-Day20
1.vue生命周期的作用是什么？
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
2. Vue实现数据双向绑定的原理：Object.defineProperty（）?
vue实现数据双向绑定主要是：
采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）
来劫持各个属性的setter，getter，
在数据变动时发布消息给订阅者，触发相应监听回调。
当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，
Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。
用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，
在属性被访问和修改时通知变化。 vue的数据双向绑定 将MVVM作为数据绑定的入口，
整合Observer，Compile和Watcher三者，
通过Observer来监听自己的model的数据变化，
通过Compile来解析编译模板指令（vue中是用来解析 {{}}），
最终利用watcher搭起observer和Compile之间的通信桥梁，
达到数据变化 —>视图更新；
视图交互变化（input）—>数据model变更双向绑定效果。 js实现简单的双向绑定: <body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
3.vue-cli如何新增自定义指令？
.创建局部指令
var app = new Vue({
el: '#app',
data: {
},
// 创建指令(可以多个)
directives: {
// 指令名称
dir1: {
inserted(el) {
// 指令中第一个参数是当前使用指令的DOM
console.log(el);
console.log(arguments);
// 对DOM进行操作
el.style.width = '200px';
el.style.height = '200px';
el.style.background = '#000';
}
}
}
})
.全局指令
Vue.directive('dir2', {
inserted(el) {
console.log(el);
}
})
.指令的使用
<div id="app">
<div v-dir1></div>
<div v-dir2></div>
</div>
4.v-if 和 v-show 区别?
v-if按照条件是否渲染，v-show是display的block或none；
5.mvvm和mvc区别？
mvc和mvvm其实区别并不大。
都是一种设计思想。
主要就是mvc中Controller演变成mvvm中的viewModel。
mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，
加载速度变慢，影响用户体验。
和当 Model 频繁发生变化，开发者需要主动更新到View 。
撩课-Web大前端每天5道面试题-Day20的更多相关文章
- 撩课-Web大前端每天5道面试题-Day10
1. px和em的区别? px和em都是长度单位; 区别是: px的值是固定的,指定是多少就是多少, 计算比较容易. em得值不是固定的,并且em会继承父级元素的字体大小. 浏览器的默认字体高都是16 ...
- 撩课-Web大前端每天5道面试题-Day4
1. 如何实现瀑布流? 瀑布流布局的原理: ) 瀑布流布局要求要进行布置的元素等宽, 然后计算元素的宽度, 与浏览器宽度之比,得到需要布置的列数; ) 创建一个数组,长度为列数, 里面的值为已布置元素 ...
- 撩课-Web大前端每天5道面试题-Day1
1. var的变量提升的底层原理是什么? JS引擎的工作方式是: 1) 先解析代码,获取所有被声明的变量: 2)然后在运行.也就是说分为预处理和执行两个阶段. 变量提升:所有变量的声明语句都会被提升到 ...
- 撩课-Web大前端每天5道面试题-Day11
1. 如何手写一个JQ插件? 方式一: $.extend(src) 该方法就是将src合并到JQ的全局对象中去: $.extend({ log: ()=>{alert('撩课itLike');} ...
- 撩课-Web大前端每天5道面试题-Day31
1.web storage和cookie的区别? Web Storage的概念和cookie相似, 区别是它是为了更大容量存储设计的. Cookie的大小是受限的, 并且每次你请求一个新的页面的时候C ...
- 撩课-Web大前端每天5道面试题-Day25
1.web前端开发,如何提高页面性能优化? 内容方面: .减少 HTTP 请求 (Make Fewer HTTP Requests) .减少 DOM 元素数量 (Reduce the Number o ...
- 撩课-Web大前端每天5道面试题-Day7
1. 你能描述一下渐进增强和优雅降级之间的不同吗? 定义: 优雅降级(graceful degradation): 一开始就构建站点的完整功能, 然后针对浏览器测试和修复 渐进增强(progressi ...
- 撩课-Web大前端每天5道面试题-Day30
1.什么叫优雅降级和渐进增强? 优雅降级: Web站点在所有新式浏览器中都能正常工作, 如果用户使用的是老式浏览器, 则代码会针对旧版本的IE进行降级处理了, 使之在旧式浏览器上以某种形式降级体验却不 ...
- 撩课-Web大前端每天5道面试题-Day23
1.为什么用Nodejs,它有哪些优缺点? 优点: 事件驱动,通过闭包很容易实现客户端的生命活期. 不用担心多线程,锁,并行计算的问题 V8引擎速度非常快 对于游戏来说,写一遍游戏逻辑代码,前端后端通 ...
随机推荐
- C++实现文件自校验的一种方法
#include <iostream> #include <stdio.h> extern long FileSizeof(char *); int main() { if(F ...
- Linux core 文件 gdb
http://blog.csdn.net/mr_chenping/article/details/13767609 在程序不寻常退出时,内核会在当前工作目录下生成一个core文件(是一个内存映像,同时 ...
- 一次对webshell的后门的查看
本文作者i春秋作家——非主流 昨天晚上突发奇想的想去看看github上面tennc的webshell收集项目中的shell有没有漏洞,比如未授权啊啥的,结果找半天都没找到...但是机缘巧合下,居然给我 ...
- 算法逆向6——RSA识别
本文原创作者:i春秋作家——icq5f7a075d 1. 算法介绍 RSA算法是一种用数论构造的.基于大合数因子分解困难性的公开密钥密码.由于RSA密码既可用于加密,又可用于数字签名,安全.易懂,因此 ...
- puppet更新失败
# puppet-updatepuppet: no process foundWarning: Unable to fetch my node definition, but the agent ru ...
- linux下oracle数据库字符集修改
linux下oracle数据库字符集修改 0.RHEL6.7.oracle11gr2 1.登录oracle.在安装oracle的用户下进入数据库. $ sqlplus / as sysdba 2.查询 ...
- iOS开发总结－－三方平台开发之分享
1.前言 在公司参与了多个应用三方平台的开发,涉及微信.微博.QQ.Facebook.meetup等,总结一下一般的接入三方平台SDK方法. 2.接入三方SDK 任何应用要接入三方平台,都需要在该平台 ...
- js04
接着看一些js的基础,这里主要说一下js的对象. 1.对象: js中的所有事物都可以看作是对象:字符串.数值.数组.函数... 内建对象:String Date Array ...
- Java之IO(十二)CharArrayReader和CharArrayWriter
转载请注明源出处:http://www.cnblogs.com/lighten/p/7082668.html 1.前言 本章介绍字符数组流,作用和ByteArrayInputStream字节数组流相同 ...
- C# 通过IEnumberable接口和IEnumerator接口实现泛型和非泛型自定义集合类型foreach功能
IEnumerator和IEnumerable的作用 其实IEnumerator和IEnumerable的作用很简单,就是让除数组和集合之外的类型也能支持foreach循环,至于foreach循环,如 ...