任何想法为什么我的Vue.js应用程序在codepen中工作但在本地jekyll网站上没有?

时间:2016-12-27 16:49:57

标签: javascript jekyll vue.js

我使用带有codepen的Vue.js创建了一个定价计算器,并在此处重新创建。 它似乎工作正常,但当我将它添加到我的jekyll网站并在本地运行时,没有显示vue数据。我没有收到任何错误,并尝试使用vue dev工具,数据似乎在那里显示。我还尝试用

在本地包装js代码



  $(document).ready(function() {
  //code in here
  });




有什么我公然缺席的吗?这是我第一次使用Vues.js.提前致谢



var vm = new Vue({
  el: '#app',
  data: {
    // starting values
    analysisDeployment: 0,
    remoteOfficesPhysical: 0,
    remoteOfficesVirtual: 0,
    largeOffices: 0,
    dataCenters: 0,
    additionalApps: 0,
    totalLocations: 0,
    totalApps: 0
  },
  computed: {
    totalMonth: function() {
      var remoteOfficesPhysicalAmount = parseInt(this.remoteOfficesPhysical * 292);
      var remoteOfficesVirtualAmount = parseInt(this.remoteOfficesVirtual * 292);
      var largeOfficesAmount = parseInt(this.largeOffices * 742);
      var dataCentersAmount = parseInt(this.dataCenters * 2150);
      var additionalAppsAmount = parseInt(this.additionalApps * 29);
      var totalApps = parseInt(additionalAppsAmount * this.totalLocations);
      var totalByMonth = parseInt(remoteOfficesPhysicalAmount + remoteOfficesVirtualAmount + largeOfficesAmount + dataCentersAmount + totalApps);
      return totalByMonth;
    },
    totalYear: function() {
      var totalByYear = parseInt(this.totalMonth * 12);
      return totalByYear;
    },
    totalLocations: function() {
      var totalOfficePhyscial = parseInt(this.remoteOfficesPhysical);
      var totalOfficeVirtual = parseInt(this.remoteOfficesVirtual);
      var totalLargeOffice = parseInt(this.largeOffices);
      var totalDataCenter = parseInt(this.dataCenters);
      var grandTotalLocations = parseInt(totalOfficePhyscial + totalOfficeVirtual + totalLargeOffice + totalDataCenter);
      return grandTotalLocations;
    },
    totalHardware: function() {
      var remoteOfficesPhysicalAmount = parseInt(this.remoteOfficesPhysical * 299);
      var remoteOfficesVirtualAmount = parseInt(this.remoteOfficesVirtual * 99);
      var largeOfficesAmount = parseInt(this.largeOffices * 599);
      var dataCentersAmount = parseInt(this.dataCenters * 2199);
      var totalHardwarePoints = parseInt(remoteOfficesPhysicalAmount + remoteOfficesVirtualAmount + largeOfficesAmount + dataCentersAmount);
      return totalHardwarePoints;
    },
    grandTotalCosts: function () {
      var totalCostYear =  parseInt(this.totalYear);
      var totalDeployment = parseInt(this.analysisDeployment);
      var grandTotal = parseInt(totalCostYear + totalDeployment);
      return grandTotal;
    }
  }

});

[type=range] {
  -webkit-appearance: none;
  margin: 15px 0;
  width: 100%;
}
[type=range]:focus {
  outline: none;
}
[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0px 0px 0px #333, 0 0 0px #404040;
  background: #ccc;
  border: 0px solid #333;
  border-radius: 50px;
}
[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #111, 0 0 0px #1e1e1e;
  border: 3px solid #2691a4;
  height: 30px;
  width: 30px;
  border-radius: 50px;
  background: #2ba3b9;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -12.5px;
}
[type=range]:focus::-webkit-slider-runnable-track {
  background: #cccccc;
}
[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0px 0px 0px #333, 0 0 0px #404040;
  background: #ccc;
  border: 0px solid #333;
  border-radius: 50px;
}
[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #111, 0 0 0px #1e1e1e;
  border: 3px solid #2691a4;
  height: 30px;
  width: 30px;
  border-radius: 50px;
  background: #2ba3b9;
  cursor: pointer;
}
[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  transition: all .2s ease;
  background: transparent;
  border-color: transparent;
  border-width: 15px 0;
  color: transparent;
}
[type=range]::-ms-fill-lower {
  box-shadow: 0px 0px 0px #333, 0 0 0px #404040;
  background: #cccccc;
  border: 0px solid #333;
  border-radius: 100px;
}
[type=range]::-ms-fill-upper {
  box-shadow: 0px 0px 0px #333, 0 0 0px #404040;
  background: #ccc;
  border: 0px solid #333;
  border-radius: 100px;
}
[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #111, 0 0 0px #1e1e1e;
  border: 3px solid #2691a4;
  height: 30px;
  width: 30px;
  border-radius: 50px;
  background: #2ba3b9;
  cursor: pointer;
  margin-top: 0;
}
[type=range]:focus::-ms-fill-lower {
  background: #ccc;
}
[type=range]:focus::-ms-fill-upper {
  background: #cccccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.7/vue.js"></script>
<div id="app" class="container">
   Remote Offices (physical): <input type="range" min="0" step="1" max="100" v-model="remoteOfficesPhysical"> {{ remoteOfficesPhysical }}<br><br>

   Remote Offices (virtual): <input type="range" min="0" step="1" max="100" v-model="remoteOfficesVirtual"> {{remoteOfficesVirtual}}<br><br>

     Large Offices: <input type="range" min="0" step="1" max="100" v-model="largeOffices"> {{largeOffices}}<br><br>

       Data Centers: <input type="range" min="0" step="1" max="100" v-model="dataCenters"> {{dataCenters}}<br><br>
  
  
       Additional Apps: <input type="range" min="0" step="1" max="100" v-model="additionalApps"> {{additionalApps}}<br><br>

  Analysis deployment:
  <select name="analysis" v-model="analysisDeployment">
  <option value="0">Public</option>
  <option value="0">Shared / Public</option>
  <option value="24000">Dedicated / Private</option>
  <option value="39000">Virtual / Private</option>
  <option value="41000">Private, virtual + hardware</option>
</select>
  <span> + ${{ analysisDeployment }}</span>
  
  <h3 class="ui header">Total locations: {{ totalLocations }}</h3>
   <h3 class="ui header">Total monitoring service cost per month: ${{ totalMonth }}</h3>
  <h3 class="ui header">Total monitoring service cost per year: ${{ totalYear }}</h3>
   <h3 class="ui header">Monitoring points hardware costs (one-time cost): ${{ totalHardware}}</h3>
  
    <h3 class="ui header">Grand Total: ${{ grandTotalCosts }}</h3>
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案