vue单文件组件实例2:简单单文件组件
Introduce.vue:
<template>
<div class="intro">
单位介绍
</div>
</template>
<script>
</script>
<style scoped>
.intro{
font-size:20px;
color:#000;
margin:20px auto;
}
</style>
Employment.vue:
<template>
<div class="employment">
人才引进
</div>
</template>
<script>
</script>
<style scoped>
.employment{
font-size:20px;
color:#000;
margin:20px auto;
}
</style>
Consult.vue:
<template>
<div class="consult">
咨询
</div>
</template>
<script>
</script>
<style scoped>
.consult{
font-size:20px;
color:#000;
margin:20px auto;
}
</style>
Header.vue:
<template>
<div class="header">
<div class="header-wrapper">
<ul class="nav">
<li><router-link to="/home">首页</router-link></li>
<li><router-link to="/introduce">单位介绍</router-link></li>
<li><router-link to="/employment">人才引进</router-link></li>
<li><router-link to="/consult">咨询</router-link></li>
</ul>
</div>
</div>
</template>
<style>
.header{
height:60px;
color:#fff;
background: #42b983;
}
.header-wrapper{
height:60px;
}
.nav{
width:700px;
height:60px;
font-size:15px;
}
.nav li{
float:left;
margin-right:60px;
height:60px;
line-height:60px;
overflow:hidden;
}
.nav li:last-child{
margin-right:0;
}
.nav a{
display:inline-block;
padding:0 13px;
color:#fff;
border-radius:15px;
}
.nav a.router-link-active{
background:#c10514;
}
</style>
Home.vue:
<template>
<div class="home">
首页
</div>
</template>
<script>
</script>
<style scoped>
.home{
font-size:20px;
color:#000;
margin:20px auto;
}
</style>
App.vue:
<template>
<div id="vue">
<div class="nav-top">
<!-- 引入公用的头部 header组件 -->
<v-header></v-header>
</div>
<div class="contianer">
<!-- 路由中的几个组件在这里被渲染,默认被渲染的为第一个组件,也就是home组件 -->
<router-view></router-view>
</div>
</div>
</template>
<style>
#vue {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
<script>
//引入header组件
import header from './components/Header.vue'
//输出header组件
export default{
components: {
'v-header': header
}
}
</script>
main.js:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// 引入router路由
import Router from 'vue-router'
// 引入项目的四个模块组件
import introduce from './components/introduce'
import home from './components/home'
import employment from './components/employment'
import consult from './components/consult'
// 使用router
Vue.use(Router)
// 定义路由
var routes = [{
path: '/home',
component: home
}, {
path: '/introduce',
component: introduce
}, {
path: '/employment',
component: employment
}, {
path: '/consult',
component: consult
}]
// 实例化路由
var vueRouter = new Router({
routes
})
// 创建和挂载根实例
new Vue({
el: '#app',
router: vueRouter,
template: '<App></App>',
components: { App }
})
vue单文件组件实例2:简单单文件组件的更多相关文章
- 在被vue组件引用的 js 文件里获取组件实例this
思路: 通过调用函数 把 组件实例this 传递 到 被应用的 js文件里 实例: 文件结构 在SendThis.vue 文件中引用 了modalConfig.js import modalConf ...
- VUE自学日志02-应用与组件实例
准备好了吗? 我们刚才简单介绍了 Vue 核心最基本的功能--本教程的其余部分将更加详细地涵盖这些功能以及其它高阶功能,所以请务必读完整个教程! 应用 & 组件实例 创建一个应用实例创建一个应 ...
- Vue.js 源码分析(十二) 基础篇 组件详解
组件是可复用的Vue实例,一个组件本质上是一个拥有预定义选项的一个Vue实例,组件和组件之间通过一些属性进行联系. 组件有两种注册方式,分别是全局注册和局部注册,前者通过Vue.component() ...
- 简单的文件ftp上传
目录 简单的文件ftp上传 简单的文件ftp上传 server import socket import struct service=socket.socket() service.bind(('1 ...
- Vue3组件(九)Vue + element-Plus + json = 动态渲染的表单控件
一个成熟的表单 表单表单,你已经长大了,你要学会: 动态渲染 支持单列.双列.多列 支持调整布局 支持表单验证 支持调整排列(显示)顺序 依据组件值显示需要的组件 支持 item 扩展组件 可以自动创 ...
- 第四节:Vue表单标签和组件的基本用法,父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- Vue基础语法(样式绑定,事件处理,表单,Vue组件)
样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- asp.net.mvc 的单文件上传和多文件上传的简单例子
首先打开vs2012,创建空的mvc4项目,名称为MVCStudy,选择基本模板
- Bootstrap历练实例:表单帮助文件
Bootstrap表单控件可以在输入框input上有一个块级帮助文本,为了添加一个占用整个宽度的内容块,请在input后添加help-block. 实例: <!DOCTYPE html>& ...
随机推荐
- MySql数据and高级查询
1.CREATE TABLE grade(stuID INT AUTO_INCREMENT PRIMARY KEY NOT NULL,stuName VARCHAR(32),stuAge INT ) ...
- 在linux服务器新添加硬盘,如何识别、挂载。
在linux服务器新添加硬盘,如何识别.怎样挂载磁盘.过程是怎么样. fdisk - manipulate disk partition tablemkfs - build a Linux files ...
- 关于Spring事物的面试题
https://blog.csdn.net/h294590501/article/details/80386000 数据库事务和Spring事务是一般面试都会被提到,很多朋友写惯了代码,很少花时间去整 ...
- Spark开发wordcount程序
1.java版本(spark-2.1.0) package chavin.king; import org.apache.spark.api.java.JavaSparkContext; import ...
- VUE-006-通过路由 router.push 传递 params 参数(路由 name 识别,请求链接不显示)
在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递. 首先,配置页面跳转路由.在 router/index.js 中配置相应的页面跳转路由,如 ...
- VUE-005-axios常用请求参数设置方法
在前后端分离的开发过程中,经常使用 axios 进行后端接口的访问. 个人习惯常用的请求参数设置方法如下所示: // POST方法:data在请求体中 addRow(data) { return th ...
- springcloud第七步:fegin客户端调用工具
什么是Feign Feign是一个声明式的伪Http客户端,它使得写Http客户端变得更简单.使用Feign,只需要创建一个接口并注解.它具有可插拔的注解特性,可使用Feign 注解和JAX-RS注解 ...
- ADB——查看手机设备信息
查看设备信息 查看手机型号 adb shell getprop ro.product.model 查看电池状况 adb shell dumpsys battery ''' Current Batter ...
- 2018-2019-2 网络对抗技术 20165236 Exp5 MSF基础应用
2018-2019-2 网络对抗技术 20165236 Exp5 MSF基础应用 一. 实践内容(3.5分) 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要 ...
- 代码块: 以冒号作为开始,用缩进来划分作用域,这个整体叫做代码块,python的代码块可以提升整体的整齐度,提高开发效率
# ### 代码块: 以冒号作为开始,用缩进来划分作用域,这个整体叫做代码块 if 5 == 5: print(1) print(2) if True: print(3) print(4) if Fa ...