vue router1.0 极简示例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>learning vue<

Sophia1010

3540人浏览 · 2016-11-08 09:42:03

Sophia1010 · 2016-11-08 09:42:03 发布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <title>learning vue</title>
</head>
<body>

    <div id="app-container">
        <router-view></router-view>
    </div>


<script src="vendor/vue.js"></script>
<script src="vendor/vue-router.js"></script>

<script>
    Vue.config.debug = true;
    Vue.use(VueRouter);
    var AppComponent = Vue.extend({
        data: function(){
            return {
                list: [
                    { id: '10001', name: 'C#', message: 'Hello C#' },
                    { id: '10002', name: 'Java', message: 'Hello Java.' },
                    { id: '10003', name: 'C++', message: 'Hello C++' },
                    { id: '10004', name: 'JavaScript', message: 'Hello JavaScript' }
                ]
            };
        }
    });
    var LangListComponent = Vue.extend({
        template: `
            <ul>
                <li v-for="item in $root.list">
                    <a v-link="{ path: '/lang/' + item.id }">{{ item.name }}</a>
                </li>
            </ul>
        `
    });
    var LangDetailComponent = Vue.extend({
        template: `
            <div>
                <h1>{{ model.name }}</h1>
                <p>{{ model.message }}</p>
            </div>
        `,

        computed: {
            model: function(){
                var list = this.$root.list;
                var id = this.$route.params.id;
                for(var i = 0; i < list.length; i++){
                    if(list[i].id === id){
                        return list[i];
                    }
                }
            }
        }
    });

    var router = new VueRouter();
    router.map({

        '/': { component: LangListComponent },
        '/lang/:id': { component: LangDetailComponent }


    });
    router.start(AppComponent, '#app-container');
</script>

</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^