个人尝试菜鸟级vue组件

最新推荐文章于 2022-06-27 10:18:57 发布

不败的将军无敌

最新推荐文章于 2022-06-27 10:18:57 发布

阅读量136

点赞数

分类专栏： vue尝试文章标签： vue

本文链接：https://blog.csdn.net/qq_45031575/article/details/102827788

版权

vue尝试专栏收录该内容

6 篇文章 0 订阅

订阅专栏

个人尝试第一次使用vue的组件

看完了vue.js文档和菜鸟教程后还是一头雾水，然后各种csdn 终于完成了第一次使用组件完成一个模板只有样式没有各种传值！
因为第一次使用直接在一个html文件中全部写完争取下一次分文件解决
开始上代码：

<!DOCTYPE html>
<html lang="zh">
   <head>
   	<meta charset="UTF-8">
   	<meta name="viewport" content="width=device-width, initial-scale=1.0">
   	<meta http-equiv="X-UA-Compatible" content="ie=edge">
   	<title></title>
   	<!-- 导入bootstrap4 和 vue.js -->
   	<meta name="viewport" content="width=device-width, initial-scale=1">
   	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
   	<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
   	<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
   	<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
   	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
   </head> 
   <!-- 模板函数 声明id--> 
   <template id="muban">
   	<div class="container " id="collapsibleNavbar">
   		<div id="accordion">
   			<div class="card" id="card_7">
   				<div id="card-header"> <img class="card-img-top" src="图片/周日.jpeg" alt="Card image cap"> </div>
   				<div class="card-body">
   					<p class="card-text">不多不多，以后还可以少吃一点。——三毛</p>
   				</div>
   				<div class="card-footer text-center">
   					<!-- <p class="card-text">Sunday,I'm laobai</p> --> <a href="" class="card-text" data-toggle="modal" data-target="#Sunday_text"
   					 style="text-decoration: none;">Sunday,I'm laobai</a> </div>
   			</div>
   			<div class="modal fade" id="Sunday_text">
   				<div class="modal-dialog modal-dialog-centered modal-lg">
   					<div class="modal-content">
   						<!-- 模态框头部 -->
   						<div class="modal-header">
   							<h4 class="modal-title">Sunday</h4> <button type="button" class="close" data-dismiss="modal">&times;</button>
   						</div> <!-- 模态框主体 -->
   						<div class="modal-body"> 欢迎来到laobai的博客！ </div> <!-- 模态框底部 -->
   						<div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
   						</div>
   					</div>
   				</div>
   			</div>
   		</div>
   	</div>
   </template>
   <body>
   	<div id="app_1" style="width: 500px; height: 500px;">
   		<!-- 使用组件 必须在id="app_1"使用-->
   		<button-counter></button-counter>
   	</div>
   </body>
   <!-- 在js 里面声明 -->
   <script type="text/javascript">
   	// 声明全局组件 
   	Vue.component('button-counter', { template:'#muban' }) 
   	// 需要放后方 
   	// 绑定id 
   	var app = new Vue({ el: "#app_1", data: { }, });
   </script>
</html>

完善了一下卡片取消了模态框发现模态框有问题：
vue.js的部分实现了插入卡片
html部分：
html实现部分需要在指定vue根组件插入
第二种方法直接设置图片
在这里插入图片描述

上运行图片：
接下来是响应式布局原生的消失和鼠标放上图片出现动画效果的css
下次应该可以写更加好的吧记录一下自己的心路崩溃历程~

不败的将军无敌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
个人尝试菜鸟级vue组件

个人尝试第一次使用vue的组件看完了vue.js文档和菜鸟教程后还是一头雾水，然后各种csdn 终于完成了第一次使用组件完成一个模板只有样式没有各种传值！因为第一次使用直接在一个html文件中全部写完争取下一次分文件解决开始上代码：<!DOCTYPE html><html lang="zh"> <head> <...
复制链接

扫一扫