代码改变世界

[快速开发二]vue组件与路由-构建单页面应用

2018-01-03 11:33  卡斯撸代码  阅读(3413)  评论(0)  编辑  收藏  举报

vue的路由可以选可以不选，但单页应用是必选，

将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们，这里用的都是vue2.0和vue-router2.0。

一、 首先我们来看一下组件

　　1、组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树。官方就是这么说的，别太在意，浅显点理解你就认为组件就是开发中单独可复用的页面组合。

　　如何定义：Vue.component('yourcomponent',{template:'<li>your content</li>'})

       在页面使用就是可以这样来了<div><yourcomponent></yourcomponent></div>

 　　2、给组件传值

　　关键字props

　　下面是官方

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义特性。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

 

例子

　　组件先说到这里  我们可以跟路由结合来说组件。

二、路由

　　 用过spring MVC  、net MVC、angularjs 的对路由肯定很熟悉，这里的单页应用的路由也是对选择哪个子页面路径的一种选择器

　　在这里只考虑vue-router 不考虑第三方路由

　　以后再来看这些复杂的第三方路由

　　1、我们用例子来看路由

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" />
</head>

<body>
    <div id="app">
        <div class="row">
            <div class="col-xs-offset-2 col-xs-8">
                <div class="page-header">
                    <h2>Router Basic - 01</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2 col-xs-offset-2">
                <div class="list-group">
                    <!--使用指令v-link进行导航-->
                    <router-link to='/home' class="list-group-item"  >Home</router-link>
                    <router-link to='/about'a class="list-group-item"  >About</router-link>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="panel">
                    <div class="panel-body">
                        <!--用于渲染匹配的组件-->
                        <router-view></router-view>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <template id="home">
        <div>
            <h1>Home</h1>
            <p>{{msg}}</p>
        </div>
    </template>
    <template id="about">
        <div>
            <h1>About</h1>
            <p>This is the tutorial about vue-router.</p>
        </div>
    </template>
</body>
<script src="vue.min.js"></script>
<script src="vue-router.js"></script>
<script>
    /* 创建组件构造器  */
    var Home = Vue.extend({
        template: '#home',
        data: function () {
            return {
                msg: 'Hello, vue router!'
            }
        }
    })

    var About = Vue.extend({
        template: '#about'
    })
    /* 创建路由映射  */
    const routes = [{ path: '/home', component: Home },
    { path: '/about', component: About },
    { path: '/', component: Home }]

    /* 创建路由器  */
    var router = new VueRouter({
        routes
    })

    /* 启动路由  */

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

</html>

 

　　（1）创建了两个组件Home 和 about，

 /* 创建组件构造器  */
    var Home = Vue.extend({
        template: '#home',
        data: function () {
            return {
                msg: 'Hello, vue router!'
            }
        }
    })

    var About = Vue.extend({
        template: '#about'
    })

 

　　（2）然后创建路由映射的数组，

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

 

　　(3)把路由配置赋值给vue对象并启动。

    /* 创建路由器  */
    var router = new VueRouter({
        routes
    })

    /* 启动路由  */

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

最后页面显示

实现步骤如下：

执行过程
当用户点击router-link指令元素时，我们可以大致猜想一下这中间发生了什么事情：

vue-router首先会去查找router-link指令的路由映射
然后根据路由映射找到匹配的组件
最后将组件渲染到<router-view>标签

　　三、嵌套路由和具名路径我们会放到webpack直接构建项目展示

 

　四、我们接下来用webpack 来建立一个项目

　　简单介绍一下webpack：是一个打包工具是个前端管理的一个工具大集合。里面有像vs中nuget和maven的功能，如果不知道这些也没有关系。直接开始下手练一下就知道了