• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

从零单排系列之写一个类vue框架(一)

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0702/4619.html 1190000019635061

因为我希望这是一个系列的文章,所以开始之前先简单说一下,我几乎没用过vue这个框架写过项目,所以文章中难免会有一些比较外行的说法。当然,我用过一些时间的angular,也曾经解决过一些同行们vue方面的问题。所以如果有人原因看的话,也不用担心我过于外行。
就像前些日子看到阮一峰老师说的话,我觉得老师这里真的说出了很多技术人员的心声,这里借用一下。
“我的技术文章,主要用来整理我还不懂的知识。我只写那些我还没有完全掌握的东西,那些我精通的东西,往往没有动力写。炫耀从来不是我的动机,好奇才是。”

言归正传,我准备了一本书,里面由浅入深地介绍了vue的用法(听人说的,我边看边写)。
先整理vue用法,然后再整理自己的框架。
最基本用法

<div id='app'>
    {{title}}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
        title: 'Hello World'
        }
    })
</script>

简单分析一下,{{}} 用来声明这是一个model,然后在js中定义这个model

因为涉及到正则以及dom树的一些解析及递归等,我先写点简单点的,不然看的人都跑了。

<script>
    function Vue(obj) {
        var app = document.querySelector(obj.el);
        for(let i in obj.data) {
            this[i] = obj.data[i];
        }
 
        var html = app.childNodes;
        var that = this;
        html.forEach(function(data) {
            if(data.nodeName == '#text') {
                data.data = data.data.replace(/\{\{([\s\S]+)\}\}/g, function(a, b){return that[b]})
            }
        })
    }
</script>
<div id='app'>
    这里是{{title}}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            title: 'Hello World'
        }
    })
</script>

这段代码应该可以勉强应付上面的vue语句,当然vue肯定不会是这么实现的,因为这是一次性的。明天换个es6版本的写法。今天就先写到这里吧。

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!