web项目初建--Vue.js初使用
2019-03-06 本文已影响0人
李姗姗_8ef1
1.下载
Vue.js官网：https://cn.vuejs.org/，点击学习->教程->安装，
点击生产版本，在出现的代码页面中Ctrl+S，进行保存，默认文件名为vue.min.js，放入到项目目录中。
2.引用
html<head>中引用vue,<script src="xxx/vue.min.js"></script>
自己编写的使用vue的脚本文件要放在html代码的下面引用，如
... ...
</div>
<script type="text/javascript" src="/static/js/main.js"></script>
</body>
</html>
3.bootstrap和vue.js的共同使用
用bootstrap进行页面显示设计，使用vue实现了时间显示
main.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/vue.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
</head>
<body>
<div>
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div>
<image id="titleImg" class="navbar-header img-circle" src="/static/image/title.jpg"/>
<a class="navbar-brand" herf="javascript:;">Have Fun</a>
</div>
<div id="nav_list" class="navbar-collapse">
<ul id="menu_list" class="nav navbar-nav">
<li tag="movie"><a href="javascript:;"><image class="img-circle" src="/static/image/movie.jpg"/>电影</a></li>
<li tag="book"><a href="javascript:;"><image class="img-circle" src="/static/image/book.jpg"/>书籍</a></li>
</ul>
<ul id="app" class="nav navbar-nav navbar-right">
<li>
<p id="timeP">{{ date | formatTime }}</p>
<p id="dateP">{{ date | formatDate }}</p>
</li>
<li><a href="#">个人中心</a></li>
</ul>
</div>
</nav>
</div>
</div>
<script type="text/javascript" src="/static/js/main.js"></script>
</body>
</html>
其中main.css是我自己设计的样式文件，就不给出代码了，可以根据自己的设计去编写。
main.js，调用vue实现时间显示
var myData = {
date: new Date()
};
var padDate = function(value) {
return value < 10 ? '0' + value:value;
};
var app = new Vue ({
el: '#app',
data: myData,
filters: {
formatTime: function(value) {
var date = new Date(value);
var hours = padDate(date.getHours());
var minutes = padDate(date.getMinutes());
var seconds = padDate(date.getSeconds());
return hours + ':' + minutes + ':' + seconds;
},
formatDate: function(value) {
var date = new Date(value);
var year = date.getFullYear();
var month = padDate(date.getMonth()+1);
var day = padDate(date.getDate());
var a = new Array("日", "一", "二", "三", "四", "五", "六");
var dayofweek = date.getDay();
return year + '/' + month + '/' + day + ' ' + "星期" + a[dayofweek];
}
},
created:function() {
},
mounted:function() {
var _this = this;
this.timer = setInterval(function() {
_this.date = new Date();
},1000)
},
beforeDestroy:function() {
if(this.timer) {
clearInterval(this.timer);
}
}
})
4.vue生命周期
上面的代码中有new Vue、created、mounted、beforeDestroy的函数，而且上面也提到了一点：自己编写的使用vue的脚本文件要放在html代码的下面引用，这些都是生命周期相关的知识，在网上找了一些博客，下面给出一个链接，帮助理解。
https://www.cnblogs.com/happ0/p/8075562.html
