Vue 入门基础

Vue 实例和数据绑定

1. 通过 Vue 构造函数创建 Vue 实例，并启动 Vue 应用入口；
2. el 用于指定页面中已经存在的DOM元素来挂载 Vue 实例，可以是标签也可以是 CSS 语法；
3. data 声明应用中需要双向绑定的数据，建议需要用到的所有数据都预先在 data 中声明，不至于将数据散落到业务逻辑中难以维护，也可以指向一个已经存在的变量；
4. 挂载成功之后，可以通过 实例.$属性名 来访问 Vue 实例中的属性，例如：app.$el 来访问该元素，app.$data 来访问 data；可以通过 实例.属性名 来访问 data 中的属性，例如：app.msg

var app = new Vue({
  // element 用于指定页面中已经存在的DOM元素，挂载到 DOM 中（也可以时CSS）
  el: '#app',
  // 声明应用内需要双向绑定的数据
  data: {
	msg: '我的第一个 vue 实例'
  }
})

生命周期钩子

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

文本插值和表达式

{{双大括号}} 为基本的语法，会自动将双向绑定的数据实时地显示出来；

还可以使用 JS 单行表达式进行简单的运算和三元运算等；

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

过滤器

Vue 支持在文本插值的的尾部添加 | 对数据进行过滤，经常用于格式化文本。过滤器规则是自定义的，通过给 vue 实例添加 filters 属性来设置。一个文本插值可能存在多个过滤器(过滤器串联)。过滤器可以传参，传递的参数对应 filters 属性中方法中的第二个以后的参数。

{{date | formatDate(argus)}}
...

filters: {
  formatDate: function(value, argus) {
  	...
  }
}

指令和事件

指令，带有前缀 v-，能快速完成 DOM 操作，循环渲染，显示和隐藏

v-text 解析文本，效果和文本插值一样 {{}}

{{msg}}

<span v-text='msg'></span>

v-html 解析 html，将 data 中的 html 解析渲染出来

v-bind 动态更新 html 元素上的属性，id / class 等

v-on 绑定事件监听器，事件处理方法以函数形式写在 Vue 实例的 methods 属性内，函数内的 this 指向的是当前 vue 实例本身，可以直接使用 this.xxx 的形式来访问或修改数据。

语法糖

可以在动态属性前加一个 : 简写 v-bind，例如：:class="className"

可以在事件前加一个 @ 简写 v-on，例如： @click="changeText"