2018-03-20

Vue实例与数据绑定

2018-03-20 - .png

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

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

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监听的事件等。

插值与表达式

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

  {{ book }}

内容实时替换。

  {{ date }}

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

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

  {{ number / 10 }}
  {{ isOK ? '确定' : '取消' }}
  {{ text.split(',').reverse().join(',') }}

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

过滤器

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

  {{ date | formatDate }}