2018-03-20

Vue实例与数据绑定

2018-03-20 - 简书.png

var app = new Vue({
  //选项
  })

变量app就代表了这个Vue实例
必不可少的选项el
el用于指定一个页面中已存在的DOM元素来挂载Vue实例，它可以是HTMLElement，也可以是CSS选择器

<div id="app"></div>

var app = new Vue({
  el: document.getElementByI('app')
  })

挂载成功后，通过app.$el来访问该元素。

生命周期

var app = new Vue({
  el: '#app',
  data: {
    a: 2
  },
  created: function (){
    console.log(this.a);
  },
  mounted: function (){
    console.log(this.$el);
  }
  })

Vue生命周期钩子与JQuery类似

• created 实例创建完成后调用，但尚未挂载，$el不可用
• mounted el挂载到实例上后调用，一般在这里开始第一个业务逻辑
• beforeDestroy 实例销毁之前调用，主要解绑一些使用addEventListener监听的事件等。

插值与表达式

使用双大括号{{}}是最基本的文本插值方法，它会自动将双向绑定的数据显示出来。

<div id="app">
  {{ book }}
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      book: 'Vue实战'
    }
    })
</script>

内容实时替换。

<div id="app">
  {{ date }}
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      date: new Date()
    },
    mounted: function (){
      var _this = this; //声明一个变量指向Vue实例this,保证作用域一致
      this.timer = setInterval(function(){
        _this.date = new Date();
        },1000);
    },
    beforeDestroy: function (){
      if (this.timer) {
        clearInterval(this.timer);
        //在Vue实例销毁前，清除定时器
      }
    }
    })
</script>

这里的{{ date }}输出的是浏览器默认的时间格式。
若想输出HTML，则

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

除了綁定值，还可以进行简单的运算

<div id="app">
  {{ number / 10 }}
  {{ isOK ? '确定' : '取消' }}
  {{ text.split(',').reverse().join(',') }}
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      number: 100,
      isOK: false,
      text: '123,456'
    }
    })
</script>

Vue.js只支持单个表达式，不支持语句和流控制。

过滤器

Vue.js支持在{{}}插值的尾部添加一个管道符|

<div id="app">
  {{ date | formatDate }}
</div>
<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.getMinuters());
        //将整理好的数据返回出去
        return year+'-'+month+'-'+day+''+hours+':'+minutes+':'+seconds;
      }
    },
    mounted: function () {
      var _this = this;
      //声明一个变量指向Vue实例this，保证作用域一致
      this.timer = setInterval(function() {
        _this.date = new Date();
        },1000);
    },
    beforeDestroy: function () {
      if (this.timer) {
        clearInterval(this.timer);
      }
    }
    })
</script>