参考

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>

定义路由

效果

IDE浏览

tomcat

理解vue(vue.js_bootstrap)相关推荐

[vue] vue性能的优化的方法有哪些？
[vue] vue性能的优化的方法有哪些? Vue 项目性能优化 - 实践指南(网上最全 / 详细) 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM ...
[vue] vue为什么要求组件模板只能有一个根元素？
[vue] vue为什么要求组件模板只能有一个根元素? '为什么只能有且只有一个根元素'于是我花了二十多分钟去找了一下答案......竟然没有找到答案....好的现在我来说说我的理解,如果有不对的地方 ...
[vue] vue和angular有什么区别呢？
[vue] vue和angular有什么区别呢? Vue.js - 多样化的 JavaScript 框架作为一个跨平台的,高度进步的框架,Vue 成为了许多需要创建单页应用程序的开发人员的首选.在用 ...
vue require css html,requirejs vue vue.router简单框架
index.html 入口页面html> vue `menu`.`name` base.js requirejs 配置文件(function(){ requirejs.config({ ...
[vue] vue组件里的定时器要怎么销毁？
[vue] vue组件里的定时器要怎么销毁? const timer = setInterval(() =>{ // 某些定时器操作 }, 500); // 通过$once来监听定时器,在bef ...
[vue] vue组件会在什么时候下被销毁？
[vue] vue组件会在什么时候下被销毁? 页面关闭.路由跳转.v-if和改变key值个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌 ...
[vue] vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么？
[vue] vue组件里写的原生addEventListeners监听事件,要手动去销毁吗?为什么? 需要,原生DOM事件必须要手动销毁,否则会造成内存泄漏个人简介我是歌谣,欢迎和大家一起交流前后 ...
[vue] vue中什么是递归组件？举个例子说明下？
[vue] vue中什么是递归组件?举个例子说明下? 组件自己调用自己,场景有用于生成树形结构菜单个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...
[vue] vue的is这个特性你有用过吗？主要用在哪些方面？
[vue] vue的is这个特性你有用过吗?主要用在哪些方面? vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题<ul><li is='my-compon ...
[vue] vue的:class和:style有几种表示方式？
[vue] vue的:class和:style有几种表示方式? :class 绑定变量绑定对象绑定一个数组绑定三元表达式 :style 绑定变量绑定对象绑定函数返回值绑定三元表达式个人简 ...

理解vue(vue.js_bootstrap)

参考

使用hbuilder

创建

首页

定义组件

Home.vue

Form.vue

Table.vue

使用

定义首页

定义路由

效果

IDE浏览

tomcat

理解vue(vue.js_bootstrap)相关推荐

最新文章

热门文章