详解windows下vue-cli及webpack 构建网站(三)使用组件
时间:2019-03-30
本文章向大家介绍详解windows下vue-cli及webpack 构建网站(三)使用组件,主要包括详解windows下vue-cli及webpack 构建网站(三)使用组件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、本文章是建立在《windows下vue-cli及webpack 构建网站(一)环境安装》和《windows下vue-cli及webpack 构建网站(一)导入bootstrap样式》两篇文章之上的。
2、在src\components文件夹下面新建两个组件,分别为 header.vue、footer.vue,打开header.vue文件粘贴下面的代码作为网站的头部。
<template> <!-- Fixed navbar --> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ msg }}</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="/" rel="external nofollow" >首页</a></li> <li><a href="/list" rel="external nofollow" >文章</a></li> <li class="dropdown"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">会员 <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="/user/login" rel="external nofollow" >登录</a></li> <li><a href="/user/register" rel="external nofollow" >注册</a></li> </ul> </li> </ul> </div><!--/.nav-collapse --> </div> </nav> </template> <script> export default { name: 'header', data () { return { msg: 'LOGO' } } } </script>
打开footer.vue文件,粘贴以下代码作为网站底部:
<template> <div class="blog-footer"> <p>版权所有 盗版必究.</p> <p> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Back to top</a> </p> </div> </template>
保存
3、打开src文件夹下面的app.vue文件,修改模板代码为
<template> <div id="app"> <HtmlHeader></HtmlHeader> <div class="jumbotron"> <h1>hello word!</h1> </div> <HtmlFooter></HtmlFooter> </div> </template> <script> import HtmlHeader from './components/header' import HtmlFooter from './components/footer' export default { components: { HtmlHeader, HtmlFooter } } </script>
可以看到代码中我们引入了新创建的两个组件,并且加载到模板当中了,我们保存之后启动一下项目看看。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 英特尔放出Linux微代码以修复Meltdown和Spectre漏洞
- python基础(5):深入理解 python 中的赋值、引用、拷贝、作用域
- Linux SSH密码暴力破解技术及攻防实战
- 西部数据NAS设备被曝存在硬编码后门和未授权文件上传高危漏洞
- Hive & Performance 学习笔记
- 任意用户密码重置(一):重置凭证泄漏
- linux 系统监控、诊断工具之 top 详解
- 一个二进制POC的诞生之旅CVE-2018-0802
- 远程RPC溢出EXP编写实战之MS06-040
- 浮点数加法引发的问题:浮点数的二进制表示
- 新手科普 | MySQL手工注入之基本注入流程
- linux 系统监控、诊断工具之 lsof 用法简介
- 关于 SimpleDateFormat 的非线程安全问题及其解决方案
- 关于 WEB/HTTP 调试利器 Fiddler 的一些技巧分享
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ruby+watir UI测试(二)
- Python 3.7 + Selenium UI 自动化测试简单实例
- Python 3.7 + BeautifulSoup 简单爬虫实例
- 你还在用Jmeter的GUI模式进行性能测试吗?(二)
- Jenkins配置SSH Key下载代码
- 详解kubeadm安装k8s集群常见问题
- Python 3.7 + Django 2.2.5 Web项目搭建
- Flink集成数据湖之实时数据写入iceberg
- unittest简单应用
- 假如 Web 当初不支持动态化
- Spring Boot使用OpenAPI规范
- 图论-单源最短路径(Dijskal算法)
- Mysql系列第二十五讲 mysql如何确保数据不丢失?有几点值得我们借鉴
- 使用Jsch进行安全的文件上传及下载
- 你见过最烂的代码长什么样子?