VUE举例
适合后端开发人员，某一个页面的编写，简单引用即可
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>superTv</title>
<script src="js/jquery-2.1.3.min.js"></script>
简单引入
<script src="js/vue.min.js"></script>
路由引用
<script src="js/vue-router.min.js"></script>
http请求
<script src="js/vue-resource.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/home.css">
<script src="https://res.suning.cn/project/ssa/script/f6fa2c0f/ssa.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<div class="container">
<a id="href_true" style="display: none;"></a>
<input type="text" value="0" id="flg" name="flg">
<div class="title"></div>
<div class="rules fl">
<div class="rules-btn" id="rules-btn"></div>
<div class="rules-box boxs" id="rules-box">
<div class="rules-txt-box">
<div class="rules-txt">
页面引入到这里，路由之间的跳转也是替换这里
<div id="app">
<router-view></router-view>
</div>
</div>
<div class="rules-bar">
<div class="bar"></div>
</div>
</div>
</div>
</div>
</div>
下面要被引用的ID
<script type="x-template" id="registerAgreement">
<div id="path" data-from="/registerAgreement">
<div class="superTvBackground">
<div class="button-list">
<button class="buts superTvBackgroundLeftBtn" id="superTvBackgroundLeftBtn"></button>
<button class="buts superTvBackgroundCenterBtn" id="superTvBackgroundCenterBtn"></button>
<button class="buts superTvBackgroundRightBtn" id="superTvBackgroundRightBtn"></button>
</div>
</div>
</div>
</script>
<script>
function getParam(key) {
return decodeURIComponent((new RegExp('[?|&]' + key + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null;
}
var actId = getParam('actId');
var sevenActUrl = '';
var prizeActUrl = '';
var lowPriceActUrl = '';
var jump = '';
var jumpParams = '';
var registerAgreement = {
// 当前路由的内容ID
template: '#registerAgreement',
data: function () {
return {}
},
mounted: function () {
$(".title").html("注册协议");
JSONP请求
var _v=this;
_v.$http.jsonp('*/activity/activity_5002_getTemplate',{
params: {
actId:actId,
format : 'jsonp',
cb: 'callback'
},
jsonp : 'callback',
jsonpCallback : 'callback'
}).then(function(res){
if(res.data.statuSCode==10000){
var result = res.data.result.list;
$.each(result, function(i, sale){
if(i == 0) {
sevenActUrl = sale.redirectUrl;
} else if(i == 1) {
prizeActUrl = sale.redirectUrl;
} else if(i == 2) {
lowPriceActUrl = sale.redirectUrl;
jump = JSON.parse(lowPriceActUrl);
jumpParams = {
'position': -1,
'jump': jump
};
}
});
}
}),function(){
};
}
};
路由列表
var routes = [
{path: '/', redirect: '/registerAgreement'},
{path: '/registerAgreement', component: registerAgreement, name: 'registerAgreement'},
];
var router = new VueRouter({routes: routes});
var app = new Vue({router: router}).$mount('#app');
计算当前页面的字体大小，rem
!(function (win) {
var setBasicFontSize = function () {
var element = win.document.documentElement;
element.style.fontSize = element.clientWidth / 7.2 + 'px';
};
setBasicFontSize();
win.addEventListener("DOMContentLoaded", setBasicFontSize, false);
win.addEventListener("resize", setBasicFontSize, false);
})(window);
</script>
</body>
</html>
VUE全家桶npm webpack打包 完整的,适合大的前端项目，比如营销活动
安装NPM
这个URL是看到比较全的教程 https://www.cnblogs.com/goldlong/p/8027997.html
npm run start 项目即可启动
上线打包前npm run build
《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读总结
- 上一篇： shiro+thymeleaf 整合
- 下一篇： restful总结