Vue.js 数据绑定、指令、事件

Vue 实例和数据绑定

通过构造函数 Vue 就可以创建一个 Vue 的根实例，并启动 Vue 应用。
Vue 实例是使用 Vue 的入口。
HTML

<div id="app">
  {{message}}
</div>

JavaScript

var app = new Vue({
  // element，用于指定页面中已经存在的 DOM 元素，挂载到 DOM 中，也可以是 css
  el: '#app',
  // 可以声明应用内需要双向绑定的数据
  data: {
    message: 'Vue 学习开始了'
  }
})

必不可少的一个选项是 el。el 用于指定页面中已存在的 DOM 元素来挂载 Vue 实例，可以是标签，也可以是 CSS 语法。
通过 Vue 实例的 data 选项，可以声明需要双向绑定的数据。建议所有会用到的数据都在 data 中声明。
挂载成功后，我们可以通过 app.$el 来访问该元素。
i. 访问 Vue 实例的属性：app.$ + 选项名，例如 app.$data
ii. 访问 data 的属性：app. + 属性名，例如 app.message

生命周期钩子

created 在实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el 还不可用。需要初始化处理一些数据时会比较有用。
mounted el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
beforeDestroy 实例销毁之前调用。主要用来解绑一些使用 addEventListener 监听的事件等。

文本插值和表达式

使用双大括号 {{}} 是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来。
在 {{}} 中除了简单的绑定属性值外，还可以使用 JavaScript 表达式进行简单的运算、三元运算等。
只支持单个表达式，不支持语句和流控制。

过滤器

Vue 支持在 {{}} 插值的尾部添加 | 对数据进行过滤，常用于格式化文本，如字母全部大写、货币千位分隔符等。
过滤的规则是自定义的，通过给 Vue 实例添加选项 filters 来设置。
过滤器可以串联 {{ data | filter1 | filter2 | ··· }}
过滤器可以传参数 {{ data | filter(a, b) }}，a、b 作为 filters 中过滤规则函数的第二、第三个参数（第一个参数是要过滤的 data）
HTML

<div id="dateApp">
  {{date | formatDate}}
</div>

JavaScript

var app = new Vue({
  el: '#dateApp',
  data: {
    date: new Date()
  },
  mounted(){
    var timer = setInterval(() => {
      this.date = new Date()                          
    }, 1000)
  },
  beforeDestroy(){
    clearInterval(this.timer)
  },
  filters: {
    formatDate(value){
      var date = new Date(value)
      var year = date.getFullYear()
      var month = plusDate(date.getMonth() + 1)
      var day = plusDate(date.getDay())
      var hour = plusDate(date.getHours())
      var minute = plusDate(date.getMinutes())
      var second = plusDate(date.getSeconds())
      return year + '年' + month + '月' + day + '日 ' + hour + '时' + minute + '分' + second + '秒'
    }
  }
})

var plusDate = function(value){
  if (value < 10) {
    value = '0' + value
  }
  return value
}

指令

v-text 解析文本，和 {{}} 作用一样。
v-html 解析 HTML
v-bind 动态更新 HTML 元素上的属性，如 id、class 等
v-on 绑定事件监听器

语法糖

指在不影响功能的情况下，添加某种简介方法实现同样的效果，从而更加方便程序开发。
v-bind 可简写成 :
v-on 可简写成 @