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 整合
- 下一篇： 九江田家炳中学的国防生是什么