Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
372 views
in Technique[技术] by (71.8m points)

vue到底用在哪里呢?

我不知道为什么vue突然就火起来了,前端好像都在谈vue,我知道vue是解决了一些问题,数据双向绑定,使用起来也比较简单,我也试着写了一些demo,就是找不到什么场景用。
我感觉我low了,因为我习惯了PHP生成页面,然后用ajax更新页面片段html代码,多余的部分夹在页面片段的隐藏字段里,通过回调逐个更新textContent。
感觉没有遇到什么非得要用vue来解决的。更可怕的是我无法接受vue这样的方式。因为我设计的页面就是要手动刷新的,...
我想问问大家都把vue用在什么地方呢?这些地方一定要用vue实现吗?vue实现是不是简化了很多?让咱这些老土也开开眼呗,我是有在github上看到有人用vue做了一个饿了么的版本,感觉jquery或原生实现也不复杂,所以没感觉到实际的意义。(非常真诚的,绝非反讽,我是感觉我跟不上变化了

你是否还记得你当初写JQuery的时候,有写过$('#xxx').parent().parent().parent()这种代码呢?

写了很久的jquery了,可是从没遇到这样的需要通过不停的找parent才能定位的,所以我没有弄清楚到底是怎样的需求,如果可以的话,方便给出一个实际项目中能用的代码片段,不甚感激。

我的把上面我的做法稍微写个代码出来就是这样,我实际项目中更新数据也差不多是这样:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test data update</title>
</head>
<body>
    <div>
        <div>
            <b key="date"></b>
            <span key="user.name"></span>
            <div><span key="articles.total"></span></div>
            <div>
                <div>
                    <span><div><span key="articles.views"></span></div>
                </span>
                <div><span key="articles.notes"></span></div>
                <span key="articles.updown.ups"></span><br><span key="articles.updown.downs"></span>
            </div>
        </div>
    </div>
    </div>
<script type="text/javascript">
    // 简化例子,就不引入jquery了。
    function update(data) {
        [...document.querySelectorAll('[key]')].forEach(el => {
            var keys = el.getAttribute('key').split('.');
            var vals = data;
            do {
                let key = keys[0];
                if (typeof vals[key] === 'undefined') {
                    break;
                }
                keys.shift();
                vals = vals[key];
            } while (keys.length);
            if (!keys.length) {
                el.innerHTML = vals;
            }
        });
    }
    window.onload = function () {
        // $.get(url, function(data){ update(data); }, 'json');
        update({
            date: new Date().toLocaleString(),
            user: {
                name: 'hello world'
            },
            articles: {
                views: 10,
                notes: 6,
                likes: 5,
                updown: {
                    ups: 2,
                    downs: 3
                }
            }
        });
    };
</script>
</body>
</html>

这是一个数据向页面更新的方式,如果要双向,就反过来更新一下data,也差不多,不过一般都是有请求后台,后台返回成功后(顺便带回成功后的数据)然后更新页面,所以我还是单向在更新页面了。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

推荐看看这个,我写的一篇入门vue.js二十问,里面有讲到为什么需要用vue并放弃jquery

代码之美 - Vue.js新手入门指南(分享自知乎网)https://zhuanlan.zhihu.com/p/...


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...