MVVM and MVC区别 ,vue路由和嵌套路由

0.071字数 303阅读 1391

先来给大家介绍一下vue吧,vue是一个操作用户界面的渐进式框架,一个MVVM框架,M=>model,V=>view,VM=>ViewModel,而angular则是MVC框架。MVC和MVVM的区别就是:
1.MVC是单向的数据绑定,MVVM是双向数据绑定
2.MVVM是MVC衍生而来,而MVC是从后台而来的。
3.MVVM的js文件是外部引入而来的,修改时也比较方便。提高了用户体验,增快网页加载速度
vue相对同时vue是相应的双向数据绑定。
首先,vue路由必须有vue-router.js文件,路由中有三个重要的基本概念:
1.route:{path:"",component:""}(一组路由)
2.routes:{path:"",component:""},{path:"",component:""}(多组路由)
3.router:路由管理器
首先HTML页面是先通过两个标签:router-link and router-view
router-link标签用来定义页面中点击的部分,其中to属性用来点击后跳转的路径。
router-view标签现实点击后的要显示的内容
屡一下思路:

//1.定义路由组件:路由对应的组件
                    const Foo = { template: '<div>foo</div>' }
                    const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
]

// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
    routes // (缩写)相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
    router
}).$mount('#app')```
嵌套路由就是子路由,子路由就是在路由组件中添加一个对象children;

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/vue-router.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <h1>大哥给你做子路由,睁大眼睛哦!!!</h1>
        <p>
            <router-link to="/home">home</router-link>
            <router-link to="/contact">contact</router-link>
        </p>
        <router-view></router-view>
        </div>
        <template id="home">
            <div>
                <h2>首页</h2>
                <router-link to="/home/one">one</router-link>
                <router-link to="/home/two">two</router-link>
                <router-view></router-view>
            </div>
        </template>
        <template id="one">
            <h3>我是自路由1</h3>
        </template>
        <template id="two">
            <h3>我是自路由2</h3>
        </template>
        <template id="contact">
            <h1>联系</h1>
        </template>
    
    <script type="text/javascript">
        const Home = {
            template: "#home"
        }
        const One = {
            template: "#one"
        }
        const Two = {
            template: "#two"
        }
        const Contact = {
            template: "#contact"
        }
        const routes = [{
                path: "/home",
                component: Home,
                children: [
                    { path: "/home/one", component: One },
                    { path: "/home/two", component: Two }
                ]
            },
            { path: "/contact", component: Contact },
            { path: "*", redirect: "/home" }

        ]
        const router = new VueRouter({
            routes
        })
        const app = new Vue({
            router
        }).$mount("#app");
    </script>
</body>

</html>

**last**,vue还有很多特性,想知道更多顶尖技术交流记得点击关注按钮关注我呦,一句晚安送给深夜的码农们。

推荐阅读更多精彩内容