VUE基础知识：第二课数据绑定、指令、事件，语法糖先写一个代码过滤器过滤器如何使用 {{date

先写一个代码

<div id="dateApp">
        {{date}}
    </div>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script>
/*需求：在页面中实时显示当前时间*/
var app = app Vue({
el:"#dateApp",
data:{
  date:new Date()
  },
  mounted:function(){
  var _this = this; //this代表的就是vue实例
  this.timer = setInterval(function(){ //加上定时器，美1000ms，this里面的date就会更新一次。
  _this.date = new Date();
  },1000)
  },
  beforeDestory:function(){ //在vue销毁之前，清除定时器
  if(this.timer){
  clearInterval(this.timer)
  }
  }
  })
  </script>

过滤器

过滤器如何使用 {{date | formatDate }},管道符“|”后面加上要定义的过滤器的名字。

<body>
    <div id="dateApp">
        {{date | formatDate}}
    </div>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
      
    <script>
        //在月份，日期，小时小于10的时候补0
        var plusDate = function(value){
            return value<10 ? '0'+value :value
        }
        var app = new Vue ({
            el:'#dateApp',
            data:{
                date:new Date()
            },
            //定义过滤器
            filters:{
                //默认的value就是要过滤的内容
               formatDate: function(value){
                   //将字符串转换为date类型
                   var date = new Date(value)
                   var year  = date.getFullYear();
                   var month = plusDate(date.getMonth()+1);
                   var day = plusDate(date.getDate());
                   var hours = plusDate(date.getHours());
                   var min = plusDate(date.getMinutes());
                   var sec = plusDate(date.getSeconds());
                   //将整理好的数据返回；
                   return year + '--'+month +'--'+day+'  '+hours+'--'+min+'--'+sec;
               }
            },
            mounted:function(){
                var _this = this;
                this.timer = setInterval(function(){
                    _this.date = new Date();
                },1000)
            },
            beforeDestroy:function(){
                if(this.timer){
                    clearInterval(this.timer)
                }
            }

        })
    </script>

指令和事件

指令，它带有前缀v-，能帮我们快速完成DOM操作，循环渲染，显示和隐藏。本节目标v-text,v-html,v-blind,v-on;

v-text:解析文本；和{{}}的功能一样； {{apple}}和
v-html:解析html,
v-bind:基本用途是动态更新HTML元素上的属性，比如id、class等；绑定活得属性,下面这个就是活属性。

<style>
.transRed{
background-color:red;}
</style>
<div v-bind:class = "ClassName"></div>
var app = new Vue({
el:
data:{
className:'transRed'},})

v-on:他用来绑定事件监听器，为按钮添加监听事件， {{countnum}}//执行这个count方法，这个方法写在：

var app = new Vue({
el:
datda:{
countnum:0
}
methods:{
count:function(){
this.countnum = this.countnum +1;
}
},})
### 语法糖：备注
v-on可以直接用@符号来代替；
v-bind可以用：符号来代替；