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 }
})

原文地址:https://www.cnblogs.com/samve/p/10364454.html

时间: 2024-10-09 22:08:00

vue单文件组件实例2:简单单文件组件的相关文章

使用jquery实现的清空表单元素代码实例

使用jquery实现的清空表单元素代码实例:如果表单的元素较多的话,如果想情况以前填写的内容可能有点耗费体力,不够人性化,下面就介绍一下如何利用jquery代码实现快捷清除表单元素内容的功能,先看一段代码实例: $('#theform')[0].reset(); 很朋友可能认为上面的代码就完全实现我们的要求,其实这是错误的,reset()函数是重置的意思,也就是将表单元素的值重置为默认值而不是清空,如下面的文本框: <input type="text" value="蚂

第四节:Vue表单标签和组件的基本用法,父子组件间的通信

vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"&

Android:实现最简单的单指移动、双指缩放的图片组件

本例实现了最简单的单指移动.双指缩放的图片组件,效果图如下:             功能: 1.单指移动,双指缩放. 2.可控制缩放范围,防止过大或过小:初始化时自动缩放至组件大小,并居中显示. 3.边界控制,防止图片"移出去了". 4.可使用在xml中,并自动适应组件大小. 5.代码简洁!!! 核心代码:DragScaleView.java package com.sina.simplegestureimage; import android.content.Context; im

JQuery中一个简单的表单验证的实例

html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

Vue基础语法(样式绑定,事件处理,表单,Vue组件)

样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>vue的样式绑定</title> <style> .a{ /*

asp.net.mvc 的单文件上传和多文件上传的简单例子

首先打开vs2012,创建空的mvc4项目,名称为MVCStudy,选择基本模板 1)创建项目后,基本结构是这样的 2)建立对应的HomeController,视图index.fileupload.success.error页面 3)控制器源码 using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Web;using System.Web.Mvc;using Sys

PHP原生文件上传(单文件多文件均可)简单案例

本案例共三个文件,目录结构如下图所示: do_action1.php(前台页面)页面的代码如下: <?php header("content-type:text/html;charset=utf-8;"); echo "<pre>"; //print_r($_FILES); require_once "upload_function1.php"; $files=getFiles(); //print_r($files); for

Django Form组件实例:登录界面[Form表单提交,Ajax提交]

"""本例中使用Form和Ajax进行了数据提交,Form提交有一个问题,就是输入错误的数据,刷新之后原有的数据会丢失.注意到Form组件可以生成HTML标签,将Form生成的对象传到前端,就可以保留原有的内容,具体见下文:""" 1 from django.shortcuts import * 2 from app02 import models 3 import json 4 5 # Create your views here. 6 def

webpack+react+antd 单页面应用实例

webpack+react+antd 单页面应用实例 React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始接触react一窍不通,到慢慢的似懂非懂,通过各种途径学习也有一阵了.学习过程中还会接触到很多新的东西,比如ES6.webpack,过程艰辛谁人懂,见坑填坑慢慢来.今天把学习过程过滤了一下,只说项目实际需要用的东西,总结了一套能看到的东西,分享给