当前位置：移动技术网 > IT编程>脚本编程>vue.js > 浅析vue中的MVVM实现原理

浅析vue中的MVVM实现原理

2019年05月24日 | 移动技术网IT编程 | 我要评论

梅州旅游景点大全,恶魔岛第二季,松野秋鸣

现成mvvm

菜单教程

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>vue 测试实例 - 菜鸟教程(runoob.com)</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <input type="text" v-model="message">
    <p>{{ message }}</p>
  </div>

  <script>
    let vm = new vue({
      el: '#app',
      data: {
        message: 'hello vue.js!'
      }
    })
  </script>
</body>

</html>

视图影响数据

数据影响视图

项目构架

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>document</title>
</head>

<body>

</body>

</html>
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>vue 测试实例 - 菜鸟教程(runoob.com)</title>
  <script src="./js/mvvm.js"></script>
  <script src="./js/compile.js"></script>
</head>

<body>
  <div id="app">
    <input type="text" v-model="message">
    <div>{{message}}</div>
    <ul>
      <li></li>
    </ul>
    {{message}}
  </div>

  <script>
    let vm = new mvvm({
      el: '#app',
      data: {
        message: 'hello vue.js!'
      }
    })
  </script>
</body>

</html>

mvvm.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>document</title>
</head>

<body>

</body>

</html>
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>vue 测试实例 - 菜鸟教程(runoob.com)</title>
  <script src="./js/mvvm.js"></script>
  <script src="./js/compile.js"></script>
</head>

<body>
  <div id="app">
    <input type="text" v-model="message">
    <div>{{message}}</div>
    <ul>
      <li></li>
    </ul>
    {{message}}
  </div>

  <script>
    let vm = new mvvm({
      el: '#app',
      data: {
        message: 'hello vue.js!'
      }
    })
  </script>
</body>

</html>

mvvm.js

class mvvm {
  constructor(options) {
    this.$el = options.el;
    this.$data = options.data;

    if (this.$el) {
      new compile(this.$el);
    }

  }
}

compile把dom节点，放在内存中操作(到35分钟)

class compile {
  constructor(el, vm) {
    this.el = this.iselementnode(el) ? el : document.queryselector(el);
    this.vm = vm;
    if (this.el) {
      let fragment = this.node2frament(this.el);
      this.compile(fragment);
    }
  }

  //辅助方法
  iselementnode(node) {
    return node.nodetype === 1;
  }

  //核心方法
  compile(fragment) {
    let childnodes = fragment.childnodes;
    console.log(childnodes)
  }
  node2frament(el) {
    let fragment = document.createdocumentfragment();
    let firstchild;
    while (firstchild = el.firstchild) {
      fragment.appendchild(firstchild);
    }
    return fragment
  }
}

分类元素节点和文本节点(52分钟)

class compile {
  constructor(el, vm) {
    this.el = this.iselementnode(el) ? el : document.queryselector(el);
    this.vm = vm;
    if (this.el) {
      let fragment = this.node2frament(this.el);
      this.compile(fragment);
    }
  }

  //辅助方法
  iselementnode(node) {
    return node.nodetype === 1;
  }
  isdirective(name) {
    return name.includes('v-')
  }

  //核心方法
  compileelement(node) {
    let attrs = node.attributes;
    array.from(attrs).foreach(arrt => {
      let attrname = attr.name;
      if (this.isdirective(attrname)) {
        let expr = attr.value;
      }
    })
  }
  compiletext(node) {
    let text = node.textcontent;
    let reg = /\{\{([^}]+)\}\}/g;
    if (reg.test(text)) {

    }
  }
  compile(fragment) {
    let childnodes = fragment.childnodes;
    array.from(childnodes).foreach(node => {
      if (this.iselementnode(node)) {
        this.compile(node)
      } else {
        console.log('text', node)
      }
    })
  }
  node2frament(el) {
    let fragment = document.createdocumentfragment();
    let firstchild;
    while (firstchild = el.firstchild) {
      fragment.appendchild(firstchild);
    }
    return fragment
  }
}

元素节点

文本节点

把data中的数据，显示在视图上(到1:16分)

class compile {
  constructor(el, vm) {
    this.el = this.iselementnode(el) ? el : document.queryselector(el);
    this.vm = vm;
    if (this.el) {
      let fragment = this.node2frament(this.el);
      this.compile(fragment);
      this.el.appendchild(fragment)
    }
  }

  //辅助方法
  iselementnode(node) {
    return node.nodetype === 1;
  }
  isdirective(name) {
    return name.includes('v-')
  }

  //核心方法
  compileelement(node) {
    let attrs = node.attributes;
    array.from(attrs).foreach(attr => {
      let attrname = attr.name;
      if (this.isdirective(attrname)) {
        let expr = attr.value;
        let [, type] = attrname.split('-');
        compileutil[type](node, this.vm, expr)
      }
    })
  }
  compiletext(node) {
    console.log(node)
    let expr = node.textcontent;
    let reg = /\{\{([^}]+)\}\}/g;
    if (reg.test(expr)) {
      compileutil['text'](node, this.vm, expr)
    }
  }
  compile(fragment) {
    let childnodes = fragment.childnodes;
    array.from(childnodes).foreach(node => {
      if (this.iselementnode(node)) {
        this.compileelement(node)
        this.compile(node)
      } else {
        this.compiletext(node)
      }
    })
  }
  node2frament(el) {
    let fragment = document.createdocumentfragment();
    let firstchild;
    while (firstchild = el.firstchild) {
      fragment.appendchild(firstchild);
    }
    return fragment
  }
}


compileutil = {
  getval(vm, expr) { // 获取实例上对应的数据
    expr = expr.split('.'); // [message,a]
    return expr.reduce((prev, next) => { // vm.$data.a
      return prev[next];
    }, vm.$data);
  },
  gettextval(vm, expr) { // 获取编译文本后的结果
    return expr.replace(/\{\{([^}]+)\}\}/g, (...arguments) => {
      return this.getval(vm, arguments[1]);
    })
  },
  text(node, vm, expr) { //文本处理
    let updatefn = this.updater['textupdater'];
    let value = this.gettextval(vm, expr);
    updatefn && updatefn(node, value)
  },

  model(node, vm, expr) {
    let updatefn = this.updater['modelupdater'];
    updatefn && updatefn(node, this.getval(vm, expr));
  },
  updater: {
    textupdater(node, value) {
      node.textcontent = value;
    },
    modelupdater(node, value) {
      node.value = value;
    }
  }
}

v-model类型

 modelupdater(node, value) {
      node.value = value;
      console.log(node)
      console.log(value)
      console.log(node.value)
    }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

Vue的全局过滤器和私有过滤器的实现

vue允许自定义过滤器可被用作一些常见的文本格式化过滤器可以用在两个地方：mustache插值表达式和 v-bind表达式过滤器应被添加在javascrip... [阅读全文]
VUE+elementui组件在table-cell单元格中绘制微型echarts图

需求效果图示例实际完成效果图**代码实现注：table表格为二次封装的子组件-在table表格中根据 scope.$index动态设置元素的id ，便于指定单... [阅读全文]
如何修改Vue打包后文件的接口地址配置的方法

1、背景常规的vue项目分为本地环境和生产环境，我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可。但是最... [阅读全文]
谈谈我在vue-cli3中用预渲染遇到的坑

前言在开发自己的个人网站的时候后，选择了用vue来开发，不可避免的遇到要对seo做优化。鉴于目前页面也不多，因此首先采用的是预渲染的方式。本来以为把插件一装，配... [阅读全文]
vue项目打包之开发环境和部署环境的实现

项目开发阶段和生产环境可能不一样如前端在开发阶段，接口可能是自己使用 node.js 搭建的服务器，api 返回的也都是假数据，等后台接口开发好后，再切换成后台... [阅读全文]
浅谈vue权限管理实现及流程

一、整体思路后端返回用户权限，前端根据用户权限处理得到左侧菜单；所有路由在前端定义好，根据后端返回的用户权限筛选出需要挂载的路由，然后使用 addroutes ... [阅读全文]
Vue通过getAction的finally来最大程度避免影响主数据呈现问题

企业信息列表，查看某条记录时，弹窗页里要求展示企业的用户名，而用户名字段不在企业表里。为此，我们需要修改弹窗页的渲染方法。methods: { enterpri... [阅读全文]
基于Vue实现微前端的示例代码

前端微服务化一直是前端社区的一个热门话题，早在2018年就有不少开发者提出过各种解决方案。或许是未得精髓，个人认为基于web co... [阅读全文]
vue中使用带隐藏文本信息的图片、图片水印的方法

一.带隐藏文本信息的图片通过rgb 分量值的小量变动，不影响对图片的识别。因此，我们可以在图片加入文字信息。最终达到如下效果:首先，在该组件中加入img用于显示... [阅读全文]
vue 路由懒加载中给 Webpack Chunks 命名的方法

最早的路由定义方式import vue from 'vue'import vuerouter from 'vue-router'import home from... [阅读全文]

网友评论


验证码：

浅析vue中的MVVM实现原理

2019年05月24日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论