web项目初建--Vue.js初使用

1.下载

Vue.js官网：https://cn.vuejs.org/，点击学习->教程->安装，

点击生产版本，在出现的代码页面中Ctrl+S，进行保存，默认文件名为vue.min.js，放入到项目目录中。

2.引用

html中
自己编写的使用vue的脚本文件要放在html代码的下面引用，如

... ...
  

3.bootstrap和vue.js的共同使用

用bootstrap进行页面显示设计，使用vue实现了时间显示
index.html

  
  
  
  
  
  


  

    

      

        

          
          Have Fun
        
                 
        

          

            

            
业务
            

            
监控
            

            
流程
          
          

            

              
{{ date | formatTime }}
              
{{ date | formatDate }}
            
            
个人中心
          
  
        
       
      
    
  
  
  

 

其中css/index.css是我自己设计的样式文件，就不给出代码了，可以根据自己的设计去编写。
index.js

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