MVVM and MVC区别 ,vue路由和嵌套路由
2017-07-15 本文已影响1176人
燕妮666_
先来给大家介绍一下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还有很多特性，想知道更多顶尖技术交流记得点击关注按钮关注我呦，一句晚安送给深夜的码农们。
