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

Vue 实例和数据绑定

  1. 通过构造函数 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 学习开始了'
  }
})
  1. 必不可少的一个选项是 el。el 用于指定页面中已存在的 DOM 元素来挂载 Vue 实例,可以是标签,也可以是 CSS 语法。
  2. 通过 Vue 实例的 data 选项,可以声明需要双向绑定的数据。建议所有会用到的数据都在 data 中声明。
  3. 挂载成功后,我们可以通过 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 可简写成 @

推荐阅读更多精彩内容

  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 1,608评论 0 6
  • 一、了解Vue.js 1.1.1 Vue.js是什么? 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 3,077评论 0 3
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 6,554评论 0 25
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 2,515评论 1 4
  • 伴着与鬃毛顺滑相反的逆脾性, 他来了,平淡又无奇。 狂野的理想,指引他狂奔,...
    燃箭滴红叶阅读 197评论 2 3
  • 最近在学习扇贝英语,其中每日一句中图片我感觉都满挺经典的,文如其图,图如其文。今天整理手机,也是看到了下图所示的照...
    绿茵少年阅读 576评论 0 1
  • 细雨飘飞万物生,花红柳绿自欣荣。 忧君夏日多狂暴,冲碎荷香面目狰。
    繁花落尽深眸阅读 406评论 4 16
  • 那是夜空中最后一丝黑暗 空气中都是狰狞的面容 恐惧把这一切记下 刻画了一张张扭曲的面容 总以为漆黑的世界恐怖 阳光...
    蓝色汪星人阅读 114评论 0 5
  • 昨天,各大网站频频转发关于“志愿者”的特大新闻:在中国志愿服务联合会第二届会员代表大会召开之际,习总书记发...
    董晓利腊梅阅读 144评论 1 0