【vue开发示例介绍】
vue开发示例介绍
- 1. 开发示例
-
- 1.1 做一个自定义组件Welcome
- 1.2 增加“用户管理”和“关于我们”组件
- 1.3 嵌套路由
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>