个人尝试 第一次使用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">×</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>
完善了一下卡片 取消了模态框 发现模态框有问题:
html部分:
第二种方法直接设置图片
- 上运行图片:
- 接下来是响应式布局原生的消失和鼠标放上图片出现动画效果的css
- 下次应该可以写更加好的吧 记录一下自己的心路崩溃历程~