Vue 实例和数据绑定
- 通过 Vue 构造函数创建 Vue 实例,并启动 Vue 应用入口;
- el 用于指定页面中已经存在的DOM元素来挂载 Vue 实例,可以是标签也可以是 CSS 语法;
- data 声明应用中需要双向绑定的数据,建议需要用到的所有数据都预先在 data 中声明,不至于将数据散落到业务逻辑中难以维护,也可以指向一个已经存在的变量;
- 挂载成功之后,可以通过
实例.$属性名
来访问 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"