vue.js 实现v-model与{{}}指令方法

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

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

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

构造函数

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

class MVVM {
 constructor({ data, el }) {
  this.data = data;
  this.el = el;
  this.init();
  this.initDom();
 }
}

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

初始化操作

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

class MVVM {
 constructor({ data, el }) {
  this.data = data;
  this.el = el;
  this.init();
  this.initDom();
 }
 // 初始化
 init() {
  // 对this.data进行数据劫持
  new Observer(this.data);
  // 传入的el可以是selector,也可以是元素,因此我们要在这里做一层处理,保证this.$el的值是一个元素节点
  this.$el = this.isElementNode(this.el) ? this.el : document.querySelector(this.el);
  // 将this.data的属性都绑定到this上,这样用户就可以直接通过this.xxx来访问this.data.xxx的值
  for (let key in this.data) {
   this.defineReactive(key);
  }
 }

 defineReactive(key) {
  Object.defineProperty(this, key, {
   get() {
    return this.data[key];
   },
   set(newVal) {
    this.data[key] = newVal;
   } //前端全栈学习交流圈:866109386
  })//面向1-3年前端开发人员
 }//帮助突破技术瓶颈,提升思维能力。
 // 是否是属性节点
 isElementNode(node) {
  return node.nodeType === 1;
 }
}

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

fragment

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

class MVVM {
 constructor({ data, el }) {
  this.data = data;
  this.el = el;//前端全栈交流学习圈:866109386
  this.init();//针对1-3年前端开发人员
  this.initDom();//帮助突破技术瓶颈,提升思维能力。
 }

 initDom() {
  const fragment = this.node2Fragment();
  this.compile(fragment);
  // 将fragment返回到页面中
  document.body.appendChild(fragment);
 }
 // 将节点转为fragment,通过fragment来操作DOM,可以获得更高的效率
 // 因为如果直接操作DOM节点的话,每次修改DOM都会导致DOM的回流或重绘,而将其放在fragment里,修改fragment不会导致DOM回流和重绘
 // 当在fragment一次性修改完后,在直接放回到DOM节点中
 node2Fragment() {
  const fragment = document.createDocumentFragment();
  let firstChild;
  while(firstChild = this.$el.firstChild) {
   fragment.appendChild(firstChild);
  }
  return fragment;
 }
}

实现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。
class MVVM {
 constructor({ data, el }) {
  this.data = data;
  this.el = el;
  this.init();
  this.initDom();
 }

 initDom() {
  const fragment = this.node2Fragment();
  this.compile(fragment);
  // 将fragment返回到页面中
  document.body.appendChild(fragment);
 }

 compile(node) {
  if (this.isElementNode(node)) {
   // 若是元素节点,则遍历它的属性,编译其中的指令
   const attrs = node.attributes;
   Array.prototype.forEach.call(attrs, (attr) => {
    if (this.isDirective(attr)) {
     CompileUtils.compileModelAttr(this.data, node, attr)
    }
   })
  }
  // 若节点有子节点的话,则对子节点进行编译
  if (node.childNodes && node.childNodes.length > 0) {
   Array.prototype.forEach.call(node.childNodes, (child) => {
    this.compile(child);
   })
  }
 }
 // 是否是属性节点
 isElementNode(node) {
  return node.nodeType === 1;
 }
 // 检测属性是否是指令(vue的指令是v-开头)
 isDirective(attr) {
  return attr.nodeName.indexOf('v-') >= 0;
 }
}

const CompileUtils = {
 // 编译v-model属性,为元素节点注册input事件,在input事件触发的时候,更新vm对应的值。
 // 同时也注册一个Watcher函数,当所依赖的值发生变化的时候,更新节点的值
 compileModelAttr(vm, node, attr) {
  const { value: keys, nodeName } = attr;
  node.value = this.getModelValue(vm, keys);
  // 将v-model属性值从元素节点上去掉
  node.removeAttribute(nodeName);
  node.addEventListener('input', (e) => {
   this.setModelValue(vm, keys, e.target.value);
  });

  new Watcher(vm, keys, (oldVal, newVal) => {
   node.value = newVal;
  });
 },
 /* 解析keys,比如,用户可以传入
 * <input v-model="obj.name" />
 * 这个时候,我们在取值的时候,需要将"obj.name"解析为data[obj][name]的形式来获取目标值
 */
 parse(vm, keys) {
  keys = keys.split('.');
  let value = vm;
  keys.forEach(_key => {
   value = value[_key];
  });
  return value;
 },
 // 根据vm和keys,返回v-model对应属性的值
 getModelValue(vm, keys) {
  return this.parse(vm, keys);
 },
 // 修改v-model对应属性的值
 setModelValue(vm, keys, val) {
  keys = keys.split('.');
  let value = vm;
  for(let i = 0; i < keys.length - 1; i++) {
   value = value[keys[i]];
  }
  value[keys[keys.length - 1]] = val;
 },
}

实现{{}}语法

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

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

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

  1. 找出该文本节点中所有依赖的属性,并且保留原始文本信息,根据原始文本信息还有属性值,生成最终的文本信息。比如说,原始文本信息是"test {{test}} {{name}}",那么该文本信息依赖的属性有this.data.test和this.data.name,那么我们可以根据原本信息和属性值,生成最终的文本。
  2. 为该文本节点所有依赖的属性注册Watcher函数,当依赖的属性发生变化的时候,则更新文本节点的内容。
class MVVM {
 constructor({ data, el }) {
  this.data = data;
  this.el = el;
  this.init();
  this.initDom();
 }

 initDom() {
  const fragment = this.node2Fragment();
  this.compile(fragment);
  // 将fragment返回到页面中
  document.body.appendChild(fragment);
 }

 compile(node) {
  const textReg = /\{\{\s*\w+\s*\}\}/gi; // 检测{{name}}语法
  if (this.isTextNode(node)) {
   // 若是文本节点,则判断是否有{{}}语法,如果有的话,则编译{{}}语法
   let textContent = node.textContent;
   if (textReg.test(textContent)) {
    // 对于 "test{{test}} {{name}}"这种文本,可能在一个文本节点会出现多个匹配符,因此得对他们统一进行处理
    // 使用 textReg来对文本节点进行匹配,可以得到["{{test}}", "{{name}}"]两个匹配值
    const matchs = textContent.match(textReg);
    CompileUtils.compileTextNode(this.data, node, matchs);
   }
  }
  // 若节点有子节点的话,则对子节点进行编译
  if (node.childNodes && node.childNodes.length > 0) {
   Array.prototype.forEach.call(node.childNodes, (child) => {
    this.compile(child);
   })
  }
 }
 // 是否是文本节点
 isTextNode(node) {
  return node.nodeType === 3;
 }
}

const CompileUtils = {
 reg: /\{\{\s*(\w+)\s*\}\}/, // 匹配 {{ key }}中的key
 // 编译文本节点,并注册Watcher函数,当文本节点依赖的属性发生变化的时候,更新文本节点
 compileTextNode(vm, node, matchs) {
  // 原始文本信息
  const rawTextContent = node.textContent;
  matchs.forEach((match) => {
   const keys = match.match(this.reg)[1];
   console.log(rawTextContent);
   new Watcher(vm, keys, () => this.updateTextNode(vm, node, matchs, rawTextContent));
  });
  this.updateTextNode(vm, node, matchs, rawTextContent);
 },
 // 更新文本节点信息
 updateTextNode(vm, node, matchs, rawTextContent) {
  let newTextContent = rawTextContent;
  matchs.forEach((match) => {
   const keys = match.match(this.reg)[1];
   const val = this.getModelValue(vm, keys);
   newTextContent = newTextContent.replace(match, val);
  })
  node.textContent = newTextContent;
 }
}

结语

这样,一个具有v-model和{{}}功能的MVVM类就已经完成了

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

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

最后,贴上所有的代码:

class Observer {
 constructor(data) {
  // 如果不是对象,则返回
  if (!data || typeof data !== 'object') {
   return;
  }
  this.data = data;
  this.walk();
 }

 // 对传入的数据进行数据劫持
 walk() {
  for (let key in this.data) {
   this.defineReactive(this.data, key, this.data[key]);
  }
 }
 // 创建当前属性的一个发布实例,使用Object.defineProperty来对当前属性进行数据劫持。
 defineReactive(obj, key, val) {
  // 创建当前属性的发布者
  const dep = new Dep();
  /*
  * 递归对子属性的值进行数据劫持,比如说对以下数据
  * let data = {
  *  name: 'cjg',
  *  obj: {
  *   name: 'zht',
  *   age: 22,
  *   obj: {
  *    name: 'cjg',
  *    age: 22,
  *   }
  *  },
  * };
  * 我们先对data最外层的name和obj进行数据劫持,之后再对obj对象的子属性obj.name,obj.age, obj.obj进行数据劫持,层层递归下去,直到所有的数据都完成了数据劫持工作。
  */
  new Observer(val);
  Object.defineProperty(obj, key, {
   get() {
    // 若当前有对该属性的依赖项,则将其加入到发布者的订阅者队列里
    if (Dep.target) {
     dep.addSub(Dep.target);
    }
    return val;
   },
   set(newVal) {
    if (val === newVal) {
     return;
    }
    val = newVal;
    new Observer(newVal);
    dep.notify();
   }
  })
 }
}

// 发布者,将依赖该属性的watcher都加入subs数组,当该属性改变的时候,则调用所有依赖该属性的watcher的更新函数,触发更新。
class Dep {
 constructor() {
  this.subs = [];
 }

 addSub(sub) {
  if (this.subs.indexOf(sub) < 0) {
   this.subs.push(sub);
  }
 }

 notify() {
  this.subs.forEach((sub) => {
   sub.update();
  })
 }
}

Dep.target = null;

// 观察者
class Watcher {
 /**
  *Creates an instance of Watcher.
  * @param {*} vm
  * @param {*} keys
  * @param {*} updateCb
  * @memberof Watcher
  */
 constructor(vm, keys, updateCb) {
  this.vm = vm;
  this.keys = keys;
  this.updateCb = updateCb;
  this.value = null;
  this.get();
 }

 // 根据vm和keys获取到最新的观察值
 get() {
  // 将Dep的依赖项设置为当前的watcher,并且根据传入的keys遍历获取到最新值。
  // 在这个过程中,由于会调用observer对象属性的getter方法,因此在遍历过程中这些对象属性的发布者就将watcher添加到订阅者队列里。
  // 因此,当这一过程中的某一对象属性发生变化的时候,则会触发watcher的update方法
  Dep.target = this;
  this.value = CompileUtils.parse(this.vm, this.keys);
  Dep.target = null;
  return this.value;
 }

 update() {
  const oldValue = this.value;
  const newValue = this.get();
  if (oldValue !== newValue) {
   this.updateCb(oldValue, newValue);
  }
 }
}

class MVVM {
 constructor({ data, el }) {
  this.data = data;
  this.el = el;
  this.init();
  this.initDom();
 }

 // 初始化
 init() {
  // 对this.data进行数据劫持
  new Observer(this.data);
  // 传入的el可以是selector,也可以是元素,因此我们要在这里做一层处理,保证this.$el的值是一个元素节点
  this.$el = this.isElementNode(this.el) ? this.el : document.querySelector(this.el);
  // 将this.data的属性都绑定到this上,这样用户就可以直接通过this.xxx来访问this.data.xxx的值
  for (let key in this.data) {
   this.defineReactive(key);
  }
 }

 initDom() {
  const fragment = this.node2Fragment();
  this.compile(fragment);
  document.body.appendChild(fragment);
 }
 // 将节点转为fragment,通过fragment来操作DOM,可以获得更高的效率
 // 因为如果直接操作DOM节点的话,每次修改DOM都会导致DOM的回流或重绘,而将其放在fragment里,修改fragment不会导致DOM回流和重绘
 // 当在fragment一次性修改完后,在直接放回到DOM节点中
 node2Fragment() {
  const fragment = document.createDocumentFragment();
  let firstChild;
  while(firstChild = this.$el.firstChild) {
   fragment.appendChild(firstChild);
  }
  return fragment;
 }

 defineReactive(key) {
  Object.defineProperty(this, key, {
   get() {
    return this.data[key];
   },
   set(newVal) {
    this.data[key] = newVal;
   }
  })
 }

 compile(node) {
  const textReg = /\{\{\s*\w+\s*\}\}/gi; // 检测{{name}}语法
  if (this.isElementNode(node)) {
   // 若是元素节点,则遍历它的属性,编译其中的指令
   const attrs = node.attributes;
   Array.prototype.forEach.call(attrs, (attr) => {
    if (this.isDirective(attr)) {
     CompileUtils.compileModelAttr(this.data, node, attr)
    }
   })
  } else if (this.isTextNode(node)) {
   // 若是文本节点,则判断是否有{{}}语法,如果有的话,则编译{{}}语法
   let textContent = node.textContent;
   if (textReg.test(textContent)) {
    // 对于 "test{{test}} {{name}}"这种文本,可能在一个文本节点会出现多个匹配符,因此得对他们统一进行处理
    // 使用 textReg来对文本节点进行匹配,可以得到["{{test}}", "{{name}}"]两个匹配值
    const matchs = textContent.match(textReg);
    CompileUtils.compileTextNode(this.data, node, matchs);
   }
  }
  // 若节点有子节点的话,则对子节点进行编译。
  if (node.childNodes && node.childNodes.length > 0) {
   Array.prototype.forEach.call(node.childNodes, (child) => {
    this.compile(child);
   })
  }
 }

 // 是否是属性节点
 isElementNode(node) {
  return node.nodeType === 1;
 }
 // 是否是文本节点
 isTextNode(node) {
  return node.nodeType === 3;
 }

 isAttrs(node) {
  return node.nodeType === 2;
 }
 // 检测属性是否是指令(vue的指令是v-开头)
 isDirective(attr) {
  return attr.nodeName.indexOf('v-') >= 0;
 }

}

const CompileUtils = {
 reg: /\{\{\s*(\w+)\s*\}\}/, // 匹配 {{ key }}中的key
 // 编译文本节点,并注册Watcher函数,当文本节点依赖的属性发生变化的时候,更新文本节点
 compileTextNode(vm, node, matchs) {
  // 原始文本信息
  const rawTextContent = node.textContent;
  matchs.forEach((match) => {
   const keys = match.match(this.reg)[1];
   console.log(rawTextContent);
   new Watcher(vm, keys, () => this.updateTextNode(vm, node, matchs, rawTextContent));
  });
  this.updateTextNode(vm, node, matchs, rawTextContent);
 },
 // 更新文本节点信息
 updateTextNode(vm, node, matchs, rawTextContent) {
  let newTextContent = rawTextContent;
  matchs.forEach((match) => {
   const keys = match.match(this.reg)[1];
   const val = this.getModelValue(vm, keys);
   newTextContent = newTextContent.replace(match, val);
  })
  node.textContent = newTextContent;
 },
 // 编译v-model属性,为元素节点注册input事件,在input事件触发的时候,更新vm对应的值。
 // 同时也注册一个Watcher函数,当所依赖的值发生变化的时候,更新节点的值
 compileModelAttr(vm, node, attr) {
  const { value: keys, nodeName } = attr;
  node.value = this.getModelValue(vm, keys);
  // 将v-model属性值从元素节点上去掉
  node.removeAttribute(nodeName);
  new Watcher(vm, keys, (oldVal, newVal) => {
   node.value = newVal;
  });
  node.addEventListener('input', (e) => {
   this.setModelValue(vm, keys, e.target.value);
  });
 },
 /* 解析keys,比如,用户可以传入
 * let data = {
 *  name: 'cjg',
 *  obj: {
 *   name: 'zht',
 *  },
 * };
 * new Watcher(data, 'obj.name', (oldValue, newValue) => {
 *  console.log(oldValue, newValue);
 * })
 * 这个时候,我们需要将keys解析为data[obj][name]的形式来获取目标值
 */
 parse(vm, keys) {
  keys = keys.split('.');
  let value = vm;
  keys.forEach(_key => {
   value = value[_key];
  });
  return value;
 },
 // 根据vm和keys,返回v-model对应属性的值
 getModelValue(vm, keys) {
  return this.parse(vm, keys);
 },
 // 修改v-model对应属性的值
 setModelValue(vm, keys, val) {
  keys = keys.split('.');
  let value = vm;
  for(let i = 0; i < keys.length - 1; i++) {
   value = value[keys[i]];
  }
  value[keys[keys.length - 1]] = val;
 },
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue.js使用v-model指令实现的数据双向绑定功能示例

    本文实例讲述了vue.js使用v-model指令实现的数据双向绑定功能.分享给大家供大家参考,具体如下: vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍: v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据.这是通过

  • vue.js指令v-model实现方法

    V-MODEL 是VUE 的一个指令,在input 控件上使用时,可以实现双向绑定. 通过看文档,发现他不过是一个语法糖. 实际是通过下面的代码来实现的: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html lang="en">

  • Vue.js中 v-model 指令的修饰符详解

    1 .lazy v-model 指令默认会在 input 事件中加载输入框中的数据(中文输入法中输入拼音的过程除外).我们可以使用 .lazy 懒加载修饰符,让其只在 change 事件中再加载输入框中的数据. html: <div id="app"> <input type="text" v-model.lazy="content" placeholder="请输入" value="初始值&quo

  • Vue.js 中的 v-model 指令及绑定表单元素的方法

    我们可以使用 Vue.js 中的 v-model 指令来完成表单数据的双向绑定. 1 基础用法 1.1 文本输入框(text) 这里演示了在文本输入框上输入的内容,会实时映射到绑定的数据上. html: <div id="app"> <input type="text" v-model="content" placeholder="请输入"> <p>输入框:{{content}}</p

  • vue.js指令v-model使用方法

    vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍: v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据.这是通过设置属性访问器实现的.例如: var data = { name: "erik", g

  • Vue.JS入门教程之自定义指令

    基础 Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和定义对象来注册一个全局自定义指令.定义对象需要提供一些钩子函数(全部可选): bind: 仅调用一次,当指令第一次绑定元素的时候. update: 第一次是紧跟在 bind 之后调用,获得的参数是绑定的初始值:以后每当绑定的值发生变化就会被调用,获得新值与旧值两个参数. unbind:仅调用一

  • vue.js 双层嵌套for遍历的方法详解, 类似php foreach()

    主要运用 template 标签,可相当于 php foreach() foreach(lists as $key){ //todo foreach($key.自定义字段 as k){ //todo } } <template v-for="key in lists" v-cloak> <tr> <td></td> <td ></td> <td ></td> <td ></

  • Vue.js实现开发购物车功能的方法详解

    本文实例讲述了Vue.js实现开发购物车功能的方法.分享给大家供大家参考,具体如下: 购物车一般包含商品名称.单价.数量等信息,数量可以任意新增或减少,商品项也可删除,还可以支持全选或多选: 我们把这个小项目分为三个文件: index.html (页面) index.js (Vue 脚本) style.css (样式) 1 index.js 首先在 js 中初始化 Vue 实例,整体模板如下: var app = new Vue({ el: '#app', data: { ... }, moun

  • vue.js中mint-ui框架的使用方法

    本文为大家分享了vue.js中mint-ui框架的使用方法,具体内容如下 1.安装vue2.0的mint-ui框架 npm install mint-ui -save 2.引用和使用框架,我用的是全部组件,也可以按需选择加载相应的组件,不过要使用babel-plugin-component import Mint from 'mint-ui'; Vue.use(Mint); 3.创建一个header.vue组件,里面写入mint-ui的头部组件 <template> <mt-header

  • vue 2.0封装model组件的方法

    本文介绍了vue 2.0封装model组件的方法,分享给大家,希望对大家有所帮助 单文件组件 使用单文件组件封装model的模板.逻辑和样式,之后就可以在页面中调用此通用组件. 需求 model有两个使用场景: 1.备注/修改密码(简易): 在屏幕中垂直居中 2.添加/修改/展示信息(复杂): 距离屏幕顶部200px,内容过长时可滚动. 3.常规要求(共同点): 标题,关闭icon 点击确定/关闭/遮罩,隐藏model组件 分析上述需求点,得到如下图: wrapper:负责遮盖屏幕 inner:

  • vue.js中$set与数组更新方法

    由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当利用索引直接设置数组的某一项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength,不会更新数组. 当然vue中给了解决方法,就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice,caoncat等修改数组,同时也将触发状态更新: ex: 所以如果在实例创建后添加新的属性到实例上,则不会触

  • Vue.js实现图片的随意拖动方法

    主要代码如下: <template> <div id="test_3"> <img src="../assets/img/photo.jpg" @mousedown="start" @mouseup="stop" @mousemove="move" :style="style"> </div> </template> <s

  • 浅谈vue.js导入css库(elementUi)的方法

    1.安装以下模块,让webpack可以解析css文件 cnpm install style-loader --save-dev cnpm install css-loader --save-dev cnpm install file-loader --save-dev 2.安装elementUi模块 cnpm install element-ui@next -S 3.在webpack.base.conf.js中添加配置 { test: /\\\\\\\\.css$/, loader: "styl

  • vue.js中实现登录控制的方法示例

    本文实例讲述了vue.js中实现登录控制的方法.分享给大家供大家参考,具体如下: vue中使用vue-router实现登录的控制在做后台管理系统中很常见,但是不想之前熟悉的流程那样,不过只要大家理解vue-router的使用也是很好实现的. 首先我们需要编写登录页面和主页面: <template> <div class="login"> <table width="100%" height="100%"> &l

  • 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> <p v-if="type===1">拌面</p> <p v-else-if="type===2">扁肉</p> <p v-else="type===3">其它</p> </div

随机推荐