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>& ...
随机推荐
- 英特尔神经棒使用入门-NCS2 & NCS1 -OpenVino
|--背景: NCS1使用的NCSDK1和NCSDK2,速度一般,没有想象中的速度,能有TX2一半的速度吧.跟大佬又申请了个NCS2来试一试. 环境配置到跑通自己写的MNIST分类网络花了2天不到吧. ...
- Kruskal模板
Kruskal模板 struct Edge { int from,to,v; }edge[maxn*10]; int fa[maxn]; int n,m; int find(int x) { retu ...
- ApiShell
using System; using System.Runtime.InteropServices; using HWND = System.IntPtr; using HANDLE = Syste ...
- PHP算法学习(1) 全局唯一ID
2019年1月8日16:11:13 svn地址:svn://gitee.com/zxadmin/live_z 代码在code里面 全局唯一ID 生产 后续会添加其他方法 <?php /* ...
- Gym 101606L - Lounge Lizards - [计算几何+LIS]
题目链接:https://codeforces.com/gym/101606/problem/L 题解: 在同一条线上的所有蜥蜴,他们的斜率都是相通的,换句话说可以直接通过斜率将蜥蜴分组. 每一组即代 ...
- python中的向上取整向下取整以及四舍五入的方法
import math #向上取整print "math.ceil---"print "math.ceil(2.3) => ", math.ceil(2. ...
- bootstrap-treeview树形图参数详解
哈哈 找了半天找到了,需要的可以去看看! 直接放上博客链接:https://blog.csdn.net/hailangtuteng/article/details/80842730
- static与volatile的用法
static 1.概述 static 声明的变量在C语言中有两方面的特征: 1).变量会被放在程序的全局存储区中,这样可以在下一次调用的时候还可以保持原来的赋值.这一点是它与堆栈变量和堆变量的区别 ...
- LG2292 L语言
题意 给出\(n\)个单词,再给出\(m\)段无符号的文章,询问每段文章能最长匹配的前缀. 思路 设\(f[i]\)为前缀\([1,i]\)能否被匹配,对于一个可以匹配完的节点\(i\),若有\([i ...
- Windows Server 2012 R2服务器部署Tomcat JDK、安装Mysql以及将Java项目部署到CVM
我们平时所调试的Java Web 项目需要在本地Eclipse或者MyEclipse当中开发调试,并且部署到Tomcat上来测试,比如说笔者这里用的eclipse添加tomcat服务器, 但是这里发布 ...