Vue 2.0 入门示例识记

1.路由示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script>
        const Foo = { template: '<div>foo</div>' }
        const Bar = { template: '<div>bar</div>' }

        const routes = [
            { path: '/foo', component: Foo },
            { path: '/bar', component: Bar }
        ]

        const router = new VueRouter({
            routes // short for `routes: routes`
        })

        const app = new Vue({
            router
        }).$mount('#app')
    </script>
</body>
</html>

2.动态编译示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vue complile example</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="demo">
    </div>
    <script>
        var res = Vue.compile('<div><h1>{{title}}</h1></div>');
        new Vue({
            el: '#demo',
            data: {
                title: 'vue compile'
            },
            render: res.render
        });
    </script>
</body>
</html>

3.动态生成Router-Link示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
    <div id="app">

        <router-link to="/">Home</router-link>
        <dynamic-link></dynamic-link>
        <router-link to="/about">About</router-link>

        <div class="box">
            <router-view></router-view>
        </div>

    </div>
    <script>
        const Home = { template: '<h1>Home</h1>' }
        const Content = { template: '<h1>Content</h1>' }
        const About = { template: '<h1>About</h1>' }

        Vue.component('dynamic-link', {
            template: "<component v-bind:is=\"transformed\" /></component>",
            data() {
                return {
                    text: "<router-link to=\"/content\">Content</router-link>"
                }
            },
            computed: {
                transformed() {
                    return { template: this.text }
                }
            }
        });

        const routes = [
            { path: '/', component: Home },
            { path: '/content', component: Content },
            { path: '/about', component: About },
        ]

        const router = new VueRouter({ routes })

        const app = new Vue({ router }).$mount('#app');

        //app.$router.push({ path: '/about' });
    </script>
</body>
</html>

4.动态输出（仅为验证构想，并非正途，仅做参考）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        const NotFound = { template: '<div><p>Page not found</p></div>' };
        const Home = { template: "<div><p>home page</p><a href=\"javascript:mout('/about')\">About</a></div>" };
        const About = { template: "<div><p>about page</p><a href=\"javascript:mout('/')\">Home</a></div>" };

        function getRouterPath()
        {
            var href = window.location.href;
            var pathName = window.location.pathname;
            var startIndex = href.lastIndexOf(pathName);
            if (href.length > startIndex + pathName.length + 1)
                return href.substr(startIndex + pathName.length + 1);
            else
                return "/";
        }

        function findRoute(currentRoute) {
            for (var index in routes)
            {
                var route = routes[index];
                if (route.path == currentRoute)
                    return route.component;
            }
            return NotFound;
        }

        const routes = [
            { path: '/', component: Home },
            { path: '/about', component: About }
        ]

        const router = new VueRouter({ routes })

        const app = new Vue({
            router: router,
            data: {
                currentRoute: getRouterPath()
            },
            computed: {
                ViewComponent() {
                    return findRoute(this.currentRoute);
                }
            },
            render(createElement) { return createElement(this.ViewComponent) }
        });

        app.$mount('#app');

        function mout(routePath) {
            app.$router.push({ path: routePath });
            window.location.reload();
        }
    </script>
</body>
</html>

 4.组件之间通信(通过EventBus，其实就是一个vue对象)，除了EventBus还有store，但很鸡肋，用EventBus完全可以代替。store内部只能是有一个state成员，其它成员无法传递

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>组件通信</title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
    <div id="app">
        <com1></com1>
        <com2></com2>
    </div>
    <script>
        const eventBus = new Vue();
        Vue.component('com1', {
            template: "<div><button @click='click'>组件1</button></div>",
            data() {
                return {
                    
                }
            },
            computed: {
                
            },
            methods:{
                click:function(){
                    eventBus.$emit("com2click", "hello com2");
                }
            },
            created() {
                eventBus.$on("com1click", message => {
                    alert("com1click:" + message);
                });
            }
        });

        Vue.component('com2', {
            template: "<div><button @click='click'>组件2</button></div>",
            data() {
                return {
                    
                }
            },
            computed: {
                
            },
            methods:{
                click:function(){
                    eventBus.$emit("com1click", "hello com1");
                }
            },
            created() {
                eventBus.$on("com2click", message => {
                    alert("com2click:" + message);
                });
            }
        });

        const app = new Vue().$mount('#app');
    </script>
</body>
</html>

 

posted on 2021-10-20 09:27  空明流光  阅读(90)  评论(0)  编辑  收藏  举报

导航