理解vue(vue.js_bootstrap)

原创已于 2022-04-04 19:39:42 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2022-04-04 12:36:24 首次发布

web 专栏收录该内容

13 篇文章

订阅专栏

该博客介绍了如何使用Vue.js和Webpack创建并管理前端路由，展示了一个包含Home、Form和Table组件的实例。通过HTML、CSS和JavaScript，实现了Bootstrap样式的表单和表格，并利用Vue Router进行页面导航。同时，展示了首页布局和定义路由的代码，以及在HBuilder中开发的过程。

参考

webpack

使用hbuilder

创建

在这里插入图片描述

首页

在这里插入图片描述

定义组件

Home.vue


<template>
<div>
    <h1> Home.vue组件  通过  &lt;zsz&gt;    &lt;/zsz&gt; 包含  Test.vue组件  </h1>
    <zsz></zsz>
    <hr/>
    <h1>Hello App! 本页面继续路由</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- 路由出口  路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
</template>

Form.vue

<template>
<div>
	<!--复制bootstrap  -->
	<form role="form">
		<div class="form-group">
			<label for="name">名称</label>
			<input type="text" class="form-control" id="name" 
				   placeholder="请输入名称">
		</div>
		<div class="form-group">
			<label for="inputfile">文件输入</label>
			<input type="file" id="inputfile">
			<p class="help-block">这里是块级帮助文本的实例。</p>
		</div>
		<div class="checkbox">
			<label>
				<input type="checkbox"> 请打勾
			</label>
		</div>
		<button type="submit" class="btn btn-default">提交</button>
	</form>
	</div>
	</template>

Table.vue

<template>
    <div>
	<!--复制bootstrap  -->
     <table class="table table-striped">
     		<thead>
     			<tr>
     				<th>#</th>
     				<th>Firstname</th>
     			</tr>
     		</thead>
     		<tbody>
     			<tr>
     				<td>1</td>
     				<td>Anna</td>
     			</tr>
     			<tr>
     				<td>2</td>
     				<td>Debbie</td>
     			</tr>
     			<tr>
     				<td>3</td>
     				<td>John</td>
     			</tr>
     		</tbody>
     	</table>
    </div>
</template>

使用

定义首页


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>singlevue</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div  id="app" class="container">
	<!-- bootstrap 布局 -->
    <div class="row clearfix">
        <div class="col-md-2 column">
<!-- bootstrap 垂直导航 -->
            <ul class="nav nav-pills nav-stacked">
                <li class="active" name='home'> <a href="#/home"   onclick='makeactive("home")'>XX功能</a></li>
				   <li name="test"><router-link to="/table"  onclick='makeactive("test")'>table功能</router-link></li>
                <li name="bar"><router-link to="/bar"  onclick='makeactive("bar")'>inner组件</router-link></li>
             
            </ul>
        </div>
        <div class="col-md-10 column">
           <!-- 路由导航显示位置  -->
            <router-view />

        </div>
    </div>
</div>

</body>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<!--引用定义路由 -->
<script src="router.js"></script>


</html>