Vue学习笔记(1)

 

Vue.js提供了现代的Web开发常见高级功能，比如：

1.解耦视图与数据

2.可复用的组件

3.前端路由

4.状态管理

5.虚拟DOM

与知名的前端框架Ember，angular等一样，Vue.js在设计上也使用MVVM模式。当查看变化时，会自动更新视图模型，反之亦然.View和视图模型之间双向绑定建立联系。

生命周期

Vue的生命周期：

     created   实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el还不可用。需要初始化处理一些数据时会比较有用。

     mounted  el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。

     beforeDestroy  实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。

数据双向绑定

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

    过滤器也可以串联，而且可以接收参数，如：过滤器

  Vue.js支持在{{ }}插值的尾部添加一个管道符“(|)”对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。

   

{{ message | filterA | filterB }}

{{ message | filterA('arg1', 'arg2') }}

 

语法糖

v-bind简写为：

v-on简写@

 

<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl">
<!-- 缩写为 -->
<a :href="url">链接</a>
<img :src="imgUrl">
 

<button v-on:click="handleClose">点击隐藏</button>
<!-- 缩写为 -->
<button @click="handleClose">点击隐藏</button>