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>& ...
随机推荐
- CSSposition属性
基本html文本 1. position-static #part1{ width: 200px; height: 200px; background: gold; } #part2{ pos ...
- GMA Round 1 三角形
传送门 三角形 在△ABC中已知$sin2A+sin2B+sin2C=\frac{3\sqrt{3}}{2}$,求$cos\frac{A}{2}*cos\frac{B}{2}*cos\frac{C}{ ...
- 重构file_get_contents实现一个带超时链接访问的函数
function wp_file_get_contents($url, $timeout = 30) { $context = stream_context_create(array( 'http' ...
- 傅里叶变换及其应用讲义(stanford_ee261)
链接:http://pan.baidu.com/s/1bprVIqF 密码:q5iv
- Python基础之集合
一.定义: 二.基本操作: 三.运算: 交集&, 并集|, 补集-, 对称补集^, 子集< 超集> 四.集合推导式: 五.固定集合 frozenset 六.基本代码: # 1. ...
- Java程序生成一个Access文件
package access; import java.io.File;import java.io.IOException;import java.sql.SQLException;import j ...
- servlet实现简单的登录功能
1.登录页面 Login.html <%@page contentType="text/html" pageEncoding="UTF-8"%> & ...
- Axure软件界面及元件
Axure 软件的需求史 功能:用来制作快速原型的软件.也可以绘制中保真原型草图. (适用人群:产品经理,交互设计师,UI设计师,网页设计师, 想要自己提升的人[重]) 原型分类: 低保真原型(草图) ...
- Python Learning - Two
1. Built-in Modules and Functions 1) Function def greeting(name): print("Hello,", name) g ...
- 1. Scala概述
1.1 概述 联邦理工学院洛桑(EPFL)的Martin Odersky于2001年开始设计Scala Scala是Scalable Language的简写,是一门多范式的编程语言 1.2 Scala ...