这段代码中的new vue什么时候会调用啊？

Question

这段代码中的new vue什么时候会调用啊？

发布于
2019-01-30

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="author" content="">
    <title>原生模拟 Vue 路由切换</title>
    <style type="text/css">
        .router_box,
        #router-view {
            max-width: 1000px;
            margin: 50px auto;
            padding: 0 20px;
        }

        .router_box>a {
            padding: 0 10px;
            color: #42b983;
        }
    </style>
</head>

<body>
<div class="router_box">
    <a href="/home" class="router">主页</a>
    <a href="/news" class="router">新闻</a>
    <a href="/team" class="router">团队</a>
    <a href="/about" class="router">关于</a>
</div>
<div id="router-view"></div>
<script type="text/javascript">
    function Vue(parameters) {
        let vue = {};
        vue.routes = parameters.routes || [];
        vue.init = function() {
            document.querySelectorAll(".router").forEach((item, index) => {
                item.addEventListener("click", function(e) {
                    let event = e || window.event;
                    event.preventDefault();
                    window.location.hash = this.getAttribute("href");
                }, false);
            });

            window.addEventListener("hashchange", () => {
                vue.routerChange();
            });

            vue.routerChange();
        };
        vue.routerChange = () => {
            let nowHash = window.location.hash;
            let index = vue.routes.findIndex((item, index) => {
                return nowHash == ('#' + item.path);
            });
            if (index >= 0) {
                document.querySelector("#router-view").innerHTML = vue.routes[index].component;
            } else {
                let defaultIndex = vue.routes.findIndex((item, index) => {
                    return item.path == '*';
                });
                if (defaultIndex >= 0) {
                    window.location.hash = vue.routes[defaultIndex].redirect;
                }
            }
        };

        vue.init();
    }
    new Vue({
        routes: [{
            path: '/home',
            component: "<h1>主页</h1><a href='https://github.com/biaochenxuying'>https://github.com/biaochenxuying</a>"
        }, {
            path: '/news',
            component: "<h1>新闻</h1><a href='http://biaochenxuying.cn/main.html'>http://biaochenxuying.cn/main.html</a>"
        }, {
            path: '/team',
            component: '<h1>团队</h1><h4>全栈修炼</h4>'
        }, {
            path: '/about',
            component: '<h1>关于</h1><h4>关注公众号：BiaoChenXuYing</h4><p>分享 WEB 全栈开发等相关的技术文章，热点资源，全栈程序员的成长之路。</p>'
        }, {
            path: '*',
            redirect: '/home'
        }]
    });
</script>
</body>

</html>

这段代码中的new vue什么时候会调用啊？这段代码中的function Vue()什么时候调用啊？它们之间的关联关系是怎样的，有能看懂的吗？

javascript

阅读 1.4k

1 个回答

两点一线

dom加载完解析到 new Vue({...})的时候调用的函数Vue
function Vue(){} 是函数声明 new Vue({...})是函数调用及传值

撰写回答