入门-vue实例与数据绑定

插值表达式

​

<div id="app">
   {{book}}
</div>
      
<script>
      var app=new Vue({
          el:"#app",
          data:{
              book:"《vue入门》"
          }
       
      })
</script>    
      


​

v-html

<div id="app">
        <p>{{link}}</p>           //输出 ： <a href="">这是一个链接</a>
        <p v-html="link"></p>    //输出：这是一个链接
</div>

var app=new Vue({
      el:"#app",
      data:{
        link:'<a href="">这是一个链接</a>'
      }
})

如果想显示{{}}标签，而不进行替换 使用v-pre即可跳过这个元素和它的子元素的编译过程

<span v-pre>{{这里的内容是不会被编译的}}</span>

过滤器

vue.js支持在{{}}插值的尾部添加一个管道符“（|）”对数据进行过滤，例如用于格式化文本 字母大小写、货币千位使用逗号分隔等。过滤的规则是自定义的，通过给vue实例添加选项filter来设置。

<script>
     var padDate=function(value){
        return value<10?'0'+value:value
     }
    var app=new Vue({
      el:"#app",
      data:{
        date:new Date()
      },
      filters:{
        formatDate:function(value) {  // value需要过滤的数据
          var  date=new Date(value);
          var year=date.getFullYear();
          var month=padDate(date.getMonth()+1);
          var day=padDate(date.getDate());
          var hours=padDate(date.getHours());
          var minutes=padDate(date.getMinutes());
          var seconds=padDate(date.getSeconds());
          return year+'-'+month+'-'+day+' '+hours+':'+minutes+':'+seconds;
        }
      },
      mounted:function(){
        var _this=this;
        this.timer=setInterval(function(){
          _this.date=new Date();
        },1000)
      }
    })
</script>

过滤器也可以串联，而且可以接收参数

{{message|filterA|filterB}} //串联

<!-- 接收参数 -->

{{message|filterA('arg1','arg2')}} //arg1,arg2将分别传给过滤器的第二个和第三个参数 第一个参数是数据本身