Vue.js2.0快速入门笔记

vue.js 解耦视图与数据，可复用的组件，前端路由，状态管理，虚拟DOM。

MVVM模式：当View（视图层）变化时，会自动更新ViewModel（视图模型），View与ViewModel之间双向绑定。

【Vue.js使用第一个程序】

<div id="app">
  <p>{{ message }}p>
div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  created: function(){
    console.log(this.message); //Hello Vue.js!
  },
  mounted: function(){
    console.log(this.$el);
  },
  beforeDestroy: function(){

  },
  filters: {
    filterA:function(v){
      return v;
    }
  },
  methods: {
    close: function(){

    }
  },
  computde: {
    msg: function(){
      return this.message;
    }
  }
})
script>

【第1-3章，Vue介绍、数据绑定、计算属性】

*el：挂载DOM对象。
*data：绑定数据集。
*created：实例创建完成后调用，但尚未挂载，$el还不可用。
*mounted：el挂载到实例上后调用，一般第一个业务逻辑在这里开始。
*beforeDestroy：实例销毁之前调用。
*filters：过滤器，支持在{{}}插值的尾部添加一个管道符“|”，经常用于格式化文本，
过滤器也可以串联多个，也可以传递参数，接收第一个参数默认是数据本身,
串联{{message|filterA|filterB}}，接收参数{{message|filterA('arg1','arg2')}}。
过滤器应当用于简单的文本转换，如要实现复杂的数据变化，应使用“计算属性”。
*methods：声明所有绑定事件监听器实现的方法，每个方法以函数形式声明，
实例方法内可以通过this直接调用其他申明的方法，外部也可以通过声明实例名调用。
*computde：计算属性，复杂的逻辑都可以在这里实现，最终返回结果，
计算属性还可以返回多个Vue实例的数据，其中一个数据变化，计算属性会重新执行。
计算属性包含get和set函数，可以通过set函数进行修改数据值，一般set用的少。
计算属性可以依赖其他计算属性，也可以依赖其他实例中的数据。
计算属性缓存，所依赖的数据发生变化时，它才会重新取值。


2.1.3 {{}}：输出data中的属性值，里面还可以使用javascript表达式、三元运算等，vue.js只支持单个表达式，不支持语句和流控制，
另外，在表达式中不能使用用户自定义的全局变量，只能使用Vue自带的全局变量，如Math和Date等。

v-html：与{{}}不同的是，可以输出html，双大括号是解析后的纯文本。
这里要注意，如果使用v-html输出后，有可能导致XSS攻击，所以要在服务端对用户提交的内容进行处理。

2.2 v-：指令，vue.js中指令前缀带有“v-”，比如v-if、v-html、v-pre等，
指令主要职责就是当其表达式的值改变时，将某些行为应用到DOM上。

v-pre: 即可跳过当前元素和子元素的编译过程，可以将{{}}直接文本形式显示出来。

v-bind：动态更新HTML元素上的属性，比如id、class等，v-bind:id="id"、v-bind:class="class"。

v-on：用来绑定事件监听器，这样我们就可以做一些交互了，v-on:click="onclose"，
onclose这些方法都写在Vue实例的methods属性内，表达式除了方法名，也可以直接是一个内联语句，
v-on:click="show=false"，show是data中属性。

2.3 语法糖：
“v-bind:” 可以用：代替
“v-on” 可以用@代替

【第4章，关于样式class和style绑定】

4.2.1 绑定class对象：

以上设置对象可以动态切换class，当数据isActive和isError变化时，对应的class类名也会更新。

4.2.2 绑定class数组：

active和error直接依赖于数据，数组中也可以用三元表达式，数组中也可以包含对象。

当:class的表达式过长或逻辑复杂时，还可以绑定一个计算属性和方法，表达式用[]括起来优先级。

例：return ['btn',{['btn-'+this.size]: this.size!=='',['btn-disabled']: this.disabled}]
当数据this.size不为空时，会应用‘btn-size12’，当数据this.disabled为true时，会应用‘btn-disabled’。

备注：使用计算属性给元素动态设置类名，在业务中经常用到，尤其是在写复用的组件时，应该尽可能的优先使用计算属性。

4.2.3 组件上绑定class：
这种语法仅适用于自定义组件的最外层是一个根元素，否则会无效，需要给子元素设置类名时，应当使用组件props来传递。

4.3 绑定style内联样式：语法跟:class类似，

为了便于阅读和维护，一般写在data或computde里，应用多个样式对象时，可以使用数组语法。

【第5章，内置指令】
5.1.1 v-cloak：不需要表达式，它会在vue实例结束编译时从绑定的HTML元素上移除，经常和css的display:none配合使用。
在一般的情况下，v-cloak是一个解决初始化慢导致页面闪动的最佳实践，但使用webpack和vue-router之后，项目的HTML结构
只有一个空的div元素，剩余的内容都是由路由去挂载不同的组件来完成的，所以不再需要v-cloak。
备注：解决刚加载页面，但Vue未执行完成时，页面上会出现{{...}}显示问题。

v-once：也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。
首次渲染后，不再随着数据的变化重新渲染，将被视为静态内容。

5.2.1 v-if、v-else-if、v-else：与javascript的条件语句类似。
在渲染元素时，处于效率考虑，会尽可能的复用已有的元素，当切换后dom之前输入的值不变。
如果不希望这么做，可以使用key属性，唯一key值来控制是否要复用。

5.2.2 v-show：用法与v-if基本一致，只不过v-show是改变元素的css属性display，元素隐藏。
v-show不能在