上一节我们已经分析了vue.js是通过Object.defineProperty以及发布订阅模式来进行数据劫持和监听,并且实现了一个简单的demo。今天，我们就基于上一节的代码，来实现一个MVVM类，将其与html结合在一起，并且实现v-model以及{{}}语法。

tips:本节新增代码（去除注释）在一百行左右。使用的Observer和Watcher都是延用上一节的代码，没有修改。

接下来，让我们一步步来，实现一个MVVM类。

构造函数

首先，一个MVVM的构造函数如下(和vue.js的构造函数一样)：

  1. class MVVM {
  2.   constructor({ data, el }) {
  3.     this.data = data;
  4.     this.el = el;
  5.     this.init();
  6.     this.initDom();
  7.   }
  8. }

和vue.js一样，有它的data属性以及el元素。

初始化操作

vue.js可以通过this.xxx的方法来直接访问this.data.xxx的属性，这一点是怎么做到的呢？其实答案很简单，它是通过Object.defineProperty来做手脚，当你访问this.xxx的时候，它返回的其实是this.data.xxx。当你修改this.xxx值的时候，其实修改的是this.data.xxx的值。具体可以看如下代码：

  1. class MVVM {
  2.   constructor({ data, el }) {
  3.     this.data = data;
  4.     this.el = el;
  5.     this.init();
  6.     this.initDom();
  7.   }
  8.   // 初始化
  9.   init() {
  10.     // 对this.data进行数据劫持
  11.     new Observer(this.data);
  12.     // 传入的el可以是selector,也可以是元素，因此我们要在这里做一层处理，保证this.$el的值是一个元素节点
  13.     this.$el = this.isElementNode(this.el) ? this.el : document.querySelector(this.el);
  14.     // 将this.data的属性都绑定到this上，这样用户就可以直接通过this.xxx来访问this.data.xxx的值
  15.     for (let key in this.data) {
  16.       this.defineReactive(key);
  17.     }
  18.   }
  20.   defineReactive(key) {
  21.     Object.defineProperty(this, key, {
  22.       get() {
  23.         return this.data[key];
  24.       },
  25.       set(newVal) {
  26.         this.data[key] = newVal;
  27.       }
  28.     })
  29.   }
  30.   // 是否是属性节点
  31.   isElementNode(node) {
  32.     return node.nodeType === 1;
  33.   }
  34. }

在完成初始化操作后，我们需要对this.$el的节点进行编译。目前我们要实现的语法有v-model和{{}}语法,v-model这个属性只可能会出现在元素节点的attributes里，而{{}}语法则是出现在文本节点里。

fragment

在对节点进行编译之前，我们先考虑一个现实问题：如果我们在编译过程中直接操作DOM节点的话，每一次修改DOM都会导致DOM的回流或重绘，而这一部分性能损耗是很没有必要的。因此，我们可以利用fragment,将节点转化为fragment,然后在fragment里编译完成后，再将其放回到页面上。

  1. class MVVM {
  2.   constructor({ data, el }) {
  3.     this.data = data;
  4.     this.el = el;
  5.     this.init();
  6.     this.initDom();
  7.   }
  9.   initDom() {
  10.     const fragment = this.node2Fragment();
  11.     this.compile(fragment);
  12.     // 将fragment返回到页面中
  13.     document.body.appendChild(fragment);
  14.   }
  15.   // 将节点转为fragment,通过fragment来操作DOM，可以获得更高的效率
  16.   // 因为如果直接操作DOM节点的话，每次修改DOM都会导致DOM的回流或重绘，而将其放在fragment里，修改fragment不会导致DOM回流和重绘
  17.   // 当在fragment一次性修改完后，在直接放回到DOM节点中
  18.   node2Fragment() {
  19.     const fragment = document.createDocumentFragment();
  20.     let firstChild;
  21.     while(firstChild = this.$el.firstChild) {
  22.       fragment.appendChild(firstChild);
  23.     }
  24.     return fragment;
  25.   }
  26. }

实现v-model

在将node节点转为fragment后，我们来对其中的v-model语法进行编译。

由于v-model语句只可能会出现在元素节点的attributes里，因此，我们先判断该节点是否为元素节点，若为元素节点，则判断其是否是directive(目前只有v-model)，若都满足的话，则调用CompileUtils.compileModelAttr来编译该节点。

编译含有v-model的节点主要有两步：

  1. 为元素节点注册input事件，在input事件触发的时候，更新vm(this.data)上对应的属性值。
  2. 对v-model依赖的属性注册一个Watcher函数，当依赖的属性发生变化，则更新元素节点的value。
  1. class MVVM {
  2.   constructor({ data, el }) {
  3.     this.data = data;
  4.     this.el = el;
  5.     this.init();
  6.     this.initDom();
  7.   }
  9.   initDom() {
  10.     const fragment = this.node2Fragment();
  11.     this.compile(fragment);
  12.     // 将fragment返回到页面中
  13.     document.body.appendChild(fragment);
  14.   }
  16.   compile(node) {
  17.     if (this.isElementNode(node)) {
  18.       // 若是元素节点，则遍历它的属性，编译其中的指令
  19.       const attrs = node.attributes;
  20.       Array.prototype.forEach.call(attrs, (attr) => {
  21.         if (this.isDirective(attr)) {
  22.           CompileUtils.compileModelAttr(this.data, node, attr)
  23.         }
  24.       })
  25.     }
  26.     // 若节点有子节点的话，则对子节点进行编译
  27.     if (node.childNodes && node.childNodes.length > 0) {
  28.       Array.prototype.forEach.call(node.childNodes, (child) => {
  29.         this.compile(child);
  30.       })
  31.     }
  32.   }
  33.   // 是否是属性节点
  34.   isElementNode(node) {
  35.     return node.nodeType === 1;
  36.   }
  37.   // 检测属性是否是指令(vue的指令是v-开头)
  38.   isDirective(attr) {
  39.     return attr.nodeName.indexOf('v-') >= 0;
  40.   }
  41. }
  43. const CompileUtils = {
  44.   // 编译v-model属性,为元素节点注册input事件，在input事件触发的时候，更新vm对应的值。
  45.   // 同时也注册一个Watcher函数，当所依赖的值发生变化的时候，更新节点的值
  46.   compileModelAttr(vm, node, attr) {
  47.     const { value: keys, nodeName } = attr;
  48.     node.value = this.getModelValue(vm, keys);
  49.     // 将v-model属性值从元素节点上去掉
  50.     node.removeAttribute(nodeName);
  51.     node.addEventListener('input', (e) => {
  52.       this.setModelValue(vm, keys, e.target.value);
  53.     });
  55.     new Watcher(vm, keys, (oldVal, newVal) => {
  56.       node.value = newVal;
  57.     });
  58.   },
  59.   /* 解析keys，比如，用户可以传入
  60.   *  <input v-model="obj.name" />
  61.   *  这个时候，我们在取值的时候，需要将"obj.name"解析为data[obj][name]的形式来获取目标值
  62.   */
  63.   parse(vm, keys) {
  64.     keys = keys.split('.');
  65.     let value = vm;
  66.     keys.forEach(_key => {
  67.       value = value[_key];
  68.     });
  69.     return value;
  70.   },
  71.   // 根据vm和keys，返回v-model对应属性的值
  72.   getModelValue(vm, keys) {
  73.     return this.parse(vm, keys);
  74.   },
  75.   // 修改v-model对应属性的值
  76.   setModelValue(vm, keys, val) {
  77.     keys = keys.split('.');
  78.     let value = vm;
  79.     for(let i = 0; i < keys.length - 1; i++) {
  80.       value = value[keys[i]];
  81.     }
  82.     value[keys[keys.length - 1]] = val;
  83.   },
  84. }

实现{{}}语法

{{}}语法只可能会出现在文本节点中，因此，我们只需要对文本节点做处理。如果文本节点中出现{{key}}这种语句的话，我们则对该节点进行编译。在这里，我们可以通过下面这个正则表达式来对文本节点进行处理，判断其是否含有{{}}语法。

  1. const textReg = /\{\{\s*\w+\s*\}\}/gi; // 检测{{name}}语法
  2. console.log(textReg.test('sss'));
  3. console.log(textReg.test('aaa{{  name  }}'));
  4. console.log(textReg.test('aaa{{  name  }} {{ text }}'));

若含有{{}}语法，我们则可以对其处理，由于一个文本节点可能出现多个{{}}语法，因此编译含有{{}}语法的文本节点主要有以下两步：

  1. 找出该文本节点中所有依赖的属性，并且保留原始文本信息，根据原始文本信息还有属性值，生成最终的文本信息。比如说，原始文本信息是"test {{test}} {{name}}",那么该文本信息依赖的属性有this.data.test和this.data.name,那么我们可以根据原本信息和属性值，生成最终的文本。
  2. 为该文本节点所有依赖的属性注册Watcher函数，当依赖的属性发生变化的时候，则更新文本节点的内容。
  1. class MVVM {
  2.   constructor({ data, el }) {
  3.     this.data = data;
  4.     this.el = el;
  5.     this.init();
  6.     this.initDom();
  7.   }
  9.   initDom() {
  10.     const fragment = this.node2Fragment();
  11.     this.compile(fragment);
  12.     // 将fragment返回到页面中
  13.     document.body.appendChild(fragment);
  14.   }
  16.   compile(node) {
  17.     const textReg = /\{\{\s*\w+\s*\}\}/gi; // 检测{{name}}语法
  18.     if (this.isTextNode(node)) {
  19.       // 若是文本节点，则判断是否有{{}}语法，如果有的话，则编译{{}}语法
  20.       let textContent = node.textContent;
  21.       if (textReg.test(textContent)) {
  22.         // 对于 "test{{test}} {{name}}"这种文本，可能在一个文本节点会出现多个匹配符，因此得对他们统一进行处理
  23.         // 使用 textReg来对文本节点进行匹配，可以得到["{{test}}", "{{name}}"]两个匹配值
  24.         const matchs = textContent.match(textReg);
  25.         CompileUtils.compileTextNode(this.data, node, matchs);
  26.       }
  27.     }
  28.     // 若节点有子节点的话，则对子节点进行编译
  29.     if (node.childNodes && node.childNodes.length > 0) {
  30.       Array.prototype.forEach.call(node.childNodes, (child) => {
  31.         this.compile(child);
  32.       })
  33.     }
  34.   }
  35.   // 是否是文本节点
  36.   isTextNode(node) {
  37.     return node.nodeType === 3;
  38.   }
  39. }
  41. const CompileUtils = {
  42.   reg: /\{\{\s*(\w+)\s*\}\}/, // 匹配 {{ key }}中的key
  43.   // 编译文本节点，并注册Watcher函数，当文本节点依赖的属性发生变化的时候，更新文本节点
  44.   compileTextNode(vm, node, matchs) {
  45.     // 原始文本信息
  46.     const rawTextContent = node.textContent;
  47.     matchs.forEach((match) => {
  48.       const keys = match.match(this.reg)[1];
  49.       console.log(rawTextContent);
  50.       new Watcher(vm, keys, () => this.updateTextNode(vm, node, matchs, rawTextContent));
  51.     });
  52.     this.updateTextNode(vm, node, matchs, rawTextContent);
  53.   },
  54.   // 更新文本节点信息
  55.   updateTextNode(vm, node, matchs, rawTextContent) {
  56.     let newTextContent = rawTextContent;
  57.     matchs.forEach((match) => {
  58.       const keys = match.match(this.reg)[1];
  59.       const val = this.getModelValue(vm, keys);
  60.       newTextContent = newTextContent.replace(match, val);
  61.     })
  62.     node.textContent = newTextContent;
  63.   }
  64. }

结语

这样，一个具有v-model和{{}}功能的MVVM类就已经完成了。代码地址点击这里。有兴趣的小伙伴可以上去看下（也可以star or fork下哈哈哈）。

这里也有一个简单的样例(忽略样式)。

接下来的话，可能会继续实现computed属性,v-bind方法，以及支持在{{}}里面放表达式。如果觉得这个文章对你有帮助的话，麻烦点个赞，嘻嘻。

最后，贴上所有的代码:

  1. class Observer {
  2.   constructor(data) {
  3.     // 如果不是对象，则返回
  4.     if (!data || typeof data !== 'object') {
  5.       return;
  6.     }
  7.     this.data = data;
  8.     this.walk();
  9.   }
  11.   // 对传入的数据进行数据劫持
  12.   walk() {
  13.     for (let key in this.data) {
  14.       this.defineReactive(this.data, key, this.data[key]);
  15.     }
  16.   }
  17.   // 创建当前属性的一个发布实例，使用Object.defineProperty来对当前属性进行数据劫持。
  18.   defineReactive(obj, key, val) {
  19.     // 创建当前属性的发布者
  20.     const dep = new Dep();
  21.     /*
  22.     * 递归对子属性的值进行数据劫持，比如说对以下数据
  23.     * let data = {
  24.     *   name: 'cjg',
  25.     *   obj: {
  26.     *     name: 'zht',
  27.     *     age: 22,
  28.     *     obj: {
  29.     *       name: 'cjg',
  30.     *       age: 22,
  31.     *     }
  32.     *   },
  33.     * };
  34.     * 我们先对data最外层的name和obj进行数据劫持，之后再对obj对象的子属性obj.name,obj.age, obj.obj进行数据劫持，层层递归下去，直到所有的数据都完成了数据劫持工作。
  35.     */
  36.     new Observer(val);
  37.     Object.defineProperty(obj, key, {
  38.       get() {
  39.         // 若当前有对该属性的依赖项，则将其加入到发布者的订阅者队列里
  40.         if (Dep.target) {
  41.           dep.addSub(Dep.target);
  42.         }
  43.         return val;
  44.       },
  45.       set(newVal) {
  46.         if (val === newVal) {
  47.           return;
  48.         }
  49.         val = newVal;
  50.         new Observer(newVal);
  51.         dep.notify();
  52.       }
  53.     })
  54.   }
  55. }
  57. // 发布者,将依赖该属性的watcher都加入subs数组，当该属性改变的时候，则调用所有依赖该属性的watcher的更新函数，触发更新。
  58. class Dep {
  59.   constructor() {
  60.     this.subs = [];
  61.   }
  63.   addSub(sub) {
  64.     if (this.subs.indexOf(sub) < 0) {
  65.       this.subs.push(sub);
  66.     }
  67.   }
  69.   notify() {
  70.     this.subs.forEach((sub) => {
  71.       sub.update();
  72.     })
  73.   }
  74. }
  76. Dep.target = null;
  78. // 观察者
  79. class Watcher {
  80.   /**
  81.    *Creates an instance of Watcher.
  82.    * @param {*} vm
  83.    * @param {*} keys
  84.    * @param {*} updateCb
  85.    * @memberof Watcher
  86.    */
  87.   constructor(vm, keys, updateCb) {
  88.     this.vm = vm;
  89.     this.keys = keys;
  90.     this.updateCb = updateCb;
  91.     this.value = null;
  92.     this.get();
  93.   }
  95.   // 根据vm和keys获取到最新的观察值
  96.   get() {
  97.     // 将Dep的依赖项设置为当前的watcher,并且根据传入的keys遍历获取到最新值。
  98.     // 在这个过程中，由于会调用observer对象属性的getter方法，因此在遍历过程中这些对象属性的发布者就将watcher添加到订阅者队列里。
  99.     // 因此，当这一过程中的某一对象属性发生变化的时候，则会触发watcher的update方法
  100.     Dep.target = this;
  101.     this.value = CompileUtils.parse(this.vm, this.keys);
  102.     Dep.target = null;
  103.     return this.value;
  104.   }
  106.   update() {
  107.     const oldValue = this.value;
  108.     const newValue = this.get();
  109.     if (oldValue !== newValue) {
  110.       this.updateCb(oldValue, newValue);
  111.     }
  112.   }
  113. }
  115. class MVVM {
  116.   constructor({ data, el }) {
  117.     this.data = data;
  118.     this.el = el;
  119.     this.init();
  120.     this.initDom();
  121.   }
  123.   // 初始化
  124.   init() {
  125.     // 对this.data进行数据劫持
  126.     new Observer(this.data);
  127.     // 传入的el可以是selector,也可以是元素，因此我们要在这里做一层处理，保证this.$el的值是一个元素节点
  128.     this.$el = this.isElementNode(this.el) ? this.el : document.querySelector(this.el);
  129.     // 将this.data的属性都绑定到this上，这样用户就可以直接通过this.xxx来访问this.data.xxx的值
  130.     for (let key in this.data) {
  131.       this.defineReactive(key);
  132.     }
  133.   }
  135.   initDom() {
  136.     const fragment = this.node2Fragment();
  137.     this.compile(fragment);
  138.     document.body.appendChild(fragment);
  139.   }
  140.   // 将节点转为fragment,通过fragment来操作DOM，可以获得更高的效率
  141.   // 因为如果直接操作DOM节点的话，每次修改DOM都会导致DOM的回流或重绘，而将其放在fragment里，修改fragment不会导致DOM回流和重绘
  142.   // 当在fragment一次性修改完后，在直接放回到DOM节点中
  143.   node2Fragment() {
  144.     const fragment = document.createDocumentFragment();
  145.     let firstChild;
  146.     while(firstChild = this.$el.firstChild) {
  147.       fragment.appendChild(firstChild);
  148.     }
  149.     return fragment;
  150.   }
  152.   defineReactive(key) {
  153.     Object.defineProperty(this, key, {
  154.       get() {
  155.         return this.data[key];
  156.       },
  157.       set(newVal) {
  158.         this.data[key] = newVal;
  159.       }
  160.     })
  161.   }
  163.   compile(node) {
  164.     const textReg = /\{\{\s*\w+\s*\}\}/gi; // 检测{{name}}语法
  165.     if (this.isElementNode(node)) {
  166.       // 若是元素节点，则遍历它的属性，编译其中的指令
  167.       const attrs = node.attributes;
  168.       Array.prototype.forEach.call(attrs, (attr) => {
  169.         if (this.isDirective(attr)) {
  170.           CompileUtils.compileModelAttr(this.data, node, attr)
  171.         }
  172.       })
  173.     } else if (this.isTextNode(node)) {
  174.       // 若是文本节点，则判断是否有{{}}语法，如果有的话，则编译{{}}语法
  175.       let textContent = node.textContent;
  176.       if (textReg.test(textContent)) {
  177.         // 对于 "test{{test}} {{name}}"这种文本，可能在一个文本节点会出现多个匹配符，因此得对他们统一进行处理
  178.         // 使用 textReg来对文本节点进行匹配，可以得到["{{test}}", "{{name}}"]两个匹配值
  179.         const matchs = textContent.match(textReg);
  180.         CompileUtils.compileTextNode(this.data, node, matchs);
  181.       }
  182.     }
  183.     // 若节点有子节点的话，则对子节点进行编译。
  184.     if (node.childNodes && node.childNodes.length > 0) {
  185.       Array.prototype.forEach.call(node.childNodes, (child) => {
  186.         this.compile(child);
  187.       })
  188.     }
  189.   }
  191.   // 是否是属性节点
  192.   isElementNode(node) {
  193.     return node.nodeType === 1;
  194.   }
  195.   // 是否是文本节点
  196.   isTextNode(node) {
  197.     return node.nodeType === 3;
  198.   }
  200.   isAttrs(node) {
  201.     return node.nodeType === 2;
  202.   }
  203.   // 检测属性是否是指令(vue的指令是v-开头)
  204.   isDirective(attr) {
  205.     return attr.nodeName.indexOf('v-') >= 0;
  206.   }
  208. }
  210. const CompileUtils = {
  211.   reg: /\{\{\s*(\w+)\s*\}\}/, // 匹配 {{ key }}中的key
  212.   // 编译文本节点，并注册Watcher函数，当文本节点依赖的属性发生变化的时候，更新文本节点
  213.   compileTextNode(vm, node, matchs) {
  214.     // 原始文本信息
  215.     const rawTextContent = node.textContent;
  216.     matchs.forEach((match) => {
  217.       const keys = match.match(this.reg)[1];
  218.       console.log(rawTextContent);
  219.       new Watcher(vm, keys, () => this.updateTextNode(vm, node, matchs, rawTextContent));
  220.     });
  221.     this.updateTextNode(vm, node, matchs, rawTextContent);
  222.   },
  223.   // 更新文本节点信息
  224.   updateTextNode(vm, node, matchs, rawTextContent) {
  225.     let newTextContent = rawTextContent;
  226.     matchs.forEach((match) => {
  227.       const keys = match.match(this.reg)[1];
  228.       const val = this.getModelValue(vm, keys);
  229.       newTextContent = newTextContent.replace(match, val);
  230.     })
  231.     node.textContent = newTextContent;
  232.   },
  233.   // 编译v-model属性,为元素节点注册input事件，在input事件触发的时候，更新vm对应的值。
  234.   // 同时也注册一个Watcher函数，当所依赖的值发生变化的时候，更新节点的值
  235.   compileModelAttr(vm, node, attr) {
  236.     const { value: keys, nodeName } = attr;
  237.     node.value = this.getModelValue(vm, keys);
  238.     // 将v-model属性值从元素节点上去掉
  239.     node.removeAttribute(nodeName);
  240.     new Watcher(vm, keys, (oldVal, newVal) => {
  241.       node.value = newVal;
  242.     });
  243.     node.addEventListener('input', (e) => {
  244.       this.setModelValue(vm, keys, e.target.value);
  245.     });
  246.   },
  247.   /* 解析keys，比如，用户可以传入
  248.   *  let data = {
  249.   *    name: 'cjg',
  250.   *    obj: {
  251.   *      name: 'zht',
  252.   *    },
  253.   *  };
  254.   *  new Watcher(data, 'obj.name', (oldValue, newValue) => {
  255.   *    console.log(oldValue, newValue);
  256.   *  })
  257.   *  这个时候，我们需要将keys解析为data[obj][name]的形式来获取目标值
  258.   */
  259.   parse(vm, keys) {
  260.     keys = keys.split('.');
  261.     let value = vm;
  262.     keys.forEach(_key => {
  263.       value = value[_key];
  264.     });
  265.     return value;
  266.   },
  267.   // 根据vm和keys，返回v-model对应属性的值
  268.   getModelValue(vm, keys) {
  269.     return this.parse(vm, keys);
  270.   },
  271.   // 修改v-model对应属性的值
  272.   setModelValue(vm, keys, val) {
  273.     keys = keys.split('.');
  274.     let value = vm;
  275.     for(let i = 0; i < keys.length - 1; i++) {
  276.       value = value[keys[i]];
  277.     }
  278.     value[keys[keys.length - 1]] = val;
  279.   },
  280. }

本文地址在->本人博客地址, 欢迎给个 start 或 follow

vue.js响应式原理解析与实现—实现v-model与{{}}指令的更多相关文章

  1. vue.js响应式原理解析与实现

    vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...

  2. 深入解析vue.js响应式原理与实现

    vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...

  3. Vue.js响应式原理

      写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:answershuto/learnV ...

  4. Vue.js 响应式原理

    1. Vue2.x 基于 Object.defineProperty 方法实现响应式(Vue3 将采用 Proxy) Object.defineProperty(obj, prop, descript ...

  5. vue响应式原理解析

    # Vue响应式原理解析 首先定义了四个核心的js文件 - 1. observer.js 观察者函数,用来设置data的get和set函数,并且把watcher存放在dep中 - 2. watcher ...

  6. vue深入响应式原理

    vue深入响应式原理 深入响应式原理 — Vue.jshttps://cn.vuejs.org/v2/guide/reactivity.html 注意:这里说的响应式不是bootsharp那种前端UI ...

  7. Vue 数据响应式原理

    Vue 数据响应式原理 Vue.js 的核心包括一套“响应式系统”.“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新. 举个简单 ...

  8. Vue的响应式原理

    Vue的响应式原理 一.响应式的底层实现 1.Vue与MVVM Vue是一个 MVVM框架,其各层的对应关系如下 View层:在Vue中是绑定dom对象的HTML ViewModel层:在Vue中是实 ...

  9. 一探 Vue 数据响应式原理

    一探 Vue 数据响应式原理 本文写于 2020 年 8 月 5 日 相信在很多新人第一次使用 Vue 这种框架的时候,就会被其修改数据便自动更新视图的操作所震撼. Vue 的文档中也这么写道: Vu ...

随机推荐

  1. centos7 安装freetype

    1:下载: wget "http://download.savannah.gnu.org/releases/freetype/freetype-2.4.0.tar.bz2" 2:  ...

  2. python模块：csv

    """ csv.py - read/write/investigate CSV files """ import re from _csv ...

  3. 关于字符的C++函数

    toupper(), tolower()不会改变原来的字符; 如果输入不是字母, 返回值跟原字符相同. isupper(), islower()..

  4. parrot os 安装后更改更新源

    parrot os 安装后 parrot os 自带的更新源更新速度太慢(需要几个小时) 提供如下更新源 中国 USTC(中国科学技术大学和USTCLUG) - 合肥大学 CMCC 1 Gbps Ce ...

  5. NodeJs在windows上安装配置测试

    Node.js简介简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个 ...

  6. 安装PyQt5时缺少designer.exe的解决办法

    学习PyQt框架的时候,看到了可以用可视化的方法搭建界面,好像ios的xib,但是安装完成pyqt5后怎么都找不designer.exe这个文件,于是查到了一下.发现了可以通过安装pip instal ...

  7. CSS中的px与物理像素、逻辑像素、1px边框问题

    一直不太清楚CSS中的1px与逻辑像素.物理像素是个什么关系(作为一名前端感觉很惭愧 -_-!),今天终于花时间彻底弄清楚了,其实弄清楚之后就觉得事情很简单,但也只有在弄清楚之后,才会觉得简单(语出& ...

  8. win7中调试Hotspot

    预置: 1.Visual Studio 2010 2.CYGWIN(设置到path中) 3.jdk(设置到path中) 4.Framework4(系统如果有就不需要安装) 5.win7 sdk 7.1 ...

  9. IM开发基础知识补课(五)：通俗易懂，正确理解并用好MQ消息队列

    1.引言 消息是互联网信息的一种表现形式,是人利用计算机进行信息传递的有效载体,比如即时通讯网坛友最熟悉的即时通讯消息就是其具体的表现形式之一. 消息从发送者到接收者的典型传递方式有两种: 1)一种我 ...

  10. Spring boot 内置tomcat禁止不安全HTTP方法

    Spring boot 内置tomcat禁止不安全HTTP方法 在tomcat的web.xml中可以配置如下内容,让tomcat禁止不安全的HTTP方法 <security-constraint ...