【vue开发示例介绍】

1. 开发示例

1.1 做一个自定义组件Welcome

1） 在components下创建一个Welcome.vue自定义组件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
//在es6中一个文件可以默认为一个模块，模块通过export向外暴露接口，实现模块间交互等功能
//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
export default {
  name: 'Welcome',

  //组件的数据对象必须是函数形式定义
  //在定义data时也可以像HelloWorld中那样不带function关键字，效果是一样的
  //HelloWord中为简写形式
  data: function() {
    return {
      msg: 'Welcome to my App'
    }
  }
}
</script>

<!-- scoped表示定义的样式只在当前组件中有效 -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
</style>

2） 在router/index.js中配置路由，配置路由时要注意先导入组件

import Welcome from '@/components/Welcome'

export default new Router({
  routes: [
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/',
      name: 'Welcome',
      component: Welcome
    }
  ]
})

我们将默认显示的HelloWorld，修改为了Welcome组件，运行系统观察页面展示。

1.2 增加“用户管理”和“关于我们”组件

在src下新增新增一个views目录，用于存放业务组件，components用来方法公用组件。
1）定义About组件

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>关于我们</h1>
   </div>
</template>

<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'About',

      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {

        }
      }
  }
</script>

<style>
</style>

2）定义UserMsg组件

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>用户管理</h1>
   </div>
</template>

<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'UserMsg',

      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {

        }
      }
  }
</script>

<style>
</style>

3）在router/index.js中定义路由，配置路由时要注意先导入组件

import About from '@/views/About'
import UserMsg from '@/views/UserMsg'
....
    {
        path: '/About',
        name: 'About',
        component: About
    },
    {
        path: '/UserMsg',
        name: 'UserMsg',
        component: UserMsg
    }

4）在Welcome组件中加入router-link，配置路由路径，修改后的内容如下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      <router-link to="/UserMsg">用户管理</router-link>
      <router-link to="/About">关于我们</router-link>
    </p>
    <!-- 这里的配置的router-view是没有效果的，起效的时候App.vue中的
    router-view，这一点通过页面效果可以看出来，在点击“用户管理”或“关于我们”
    后，msg定义的提示信息没了，但vue的logo还在。
    <div>
      <router-view/>
    </div> -->
  </div>
</template>

<script>
//在es6中一个文件可以默认为一个模块，模块通过export向外暴露接口，实现模块间交互等功能
//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
export default {
  name: 'Welcome',

  //组件的数据对象必须是函数形式定义
  //在定义data时也可以像HelloWorld中那样不带function关键字，效果是一样的
  //HelloWord中为简写形式
  data: function() {
    return {
      msg: 'Welcome to my App'
    }
  }
}
</script>

1.3 嵌套路由

在用户管理模块下，创建用户注册，修改密码，以此演示嵌套路由

1） 创建用户注册

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>用户注册</h1>
   </div>
</template>

<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'UserRegister',

      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {

        }
      }
  }
</script>

<style>
</style>

2）密码修改

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>修改密码</h1>
   </div>
</template>

<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'UserPwdUpdate',

      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {

        }
      }
  }
</script>

<style>
</style>

3）配置路由
配置路由前，先导入组件

import UserRegister from '@/views/UserRegister'
import UserPwdUpdate from '@/views/UserPwdUpdate'

配置路由：

//此处只显示了用户管理部分路由配置，为嵌套路由
  {
    path: '/UserMsg',
    name: 'UserMsg',
    component: UserMsg,
    //注意children单词不要写错，如果写错程序不会报错，但效果出不来!!!!
    //以"/" 开头的嵌套路径会被当作根路径，所以子路由的path不需要添加 "/" !!
    children: [
      {
        path: 'UserRegister',
        name: 'UserRegister',
        component: UserRegister
      },
      {
        path: 'UserPwdUpdate',
        name: 'UserPwdUpdate',
        component: UserPwdUpdate
      }
    ]
  }

4）在用户管理组件中（UserMsg）加入router-link，配置路由路径，增加后的组件如下：

<template>
   <!--必须有一个根节点-->
   <div>
      <h1>用户管理</h1>
      <p>
        <router-link to="/UserMsg/UserRegister">用户注册</router-link>
        <router-link to="/UserMsg/UserPwdUpdate">修改密码</router-link>
      </p>
      <div>
        <!--
        用户注册于密码修改为用户管理的子模块，所以在用户管理组件中
        使用router-view用于展示用户注册与密码修改组件。如果此处不用
        则点击用户注册与密码修改时没有任何效果
        -->
        <router-view/>
      </div>
   </div>
</template>

<script>
  //一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
  export default {
      name: 'UserMsg',

      //组件的数据对象必须是函数形式定义
      //暂时不需要定义数据
      data: function() {
        return {

        }
      }
  }
</script>