Vue.js--Vue.js搬砖基础
Vue做为当今三大流行框架，如果不懂点，似乎没办法跟别人说做过前端，好吧，三个月的时间内断断续续的把基础内容熟悉并基本上敲了一遍。简单的做下笔记，方便记忆和查询:
MVVM模式是由经典的软件架构MVC衍生来的。当View(视图层)变化时，会自动更新到ViewModel(视图模型)，反之亦然。View和ViewModel之间通过双向绑定(data-binding)建立联系。
：el用户指定一个页面中已存在的DOM元素来挂载Vue实例，它可以是HTMLElement,也可以是CSS选择器；
：Vue提供了许多常用的实例属性与方法，都以$ 开头，比如$el.
：Vue的生命周期钩子，比较常用的有:
- created：实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载，$el还不可用。需要初始化处理一些数据时会比较有用。
- mounted：el挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。
- beforeDestroy 实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。
：使用双大括号{{}}是最基本的文本插值方法；
：如果有时候就是想输出html，而不是将数据解析后的纯文本，可以使用v-html;
：如果想显示{{}},而不进行替换，使用v-pre即可跳过这个元素和它的子元素的编译过程，例如:<span v-pre>{{这里的内容是不会被编译的}}</span>
：在{{}}中，除了简单的绑定属性值外，还可以使用JavaScript表达式进行简单的运算，还可以使用JavaScript表达式进行简单的运算、三元运算等；
: Vue.js只支持单个表达式，不支持语句和流控制。另外，在表达式中，不能使用用户自定义的全局变量，只能使用Vue白名单内的全局变量，例如Math和Date;
: Vue.js支持在{{}}插值的尾部添加一个管道符“（|）”对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分割等，过滤器应当用于处理简 单的文本转换，如果要实现更为复杂的数据变换，应该使用计算属性。
：指令是Vue.js模版中最常用的一项功能，它带有前缀v-，比如v-if、v-html、v-pre等。指令的主要职责就是当其表达式的值改变时，相应地将某些行为应用到DOM 上
：数据驱动DOM是Vue.js的核心理念，所以不到万不得已时不要主动操作DOM，你只需要维护好数据，DOM的事Vue会帮你优雅的处理。
：v-bind的基本用途是动态更新html元素上的属性，比如id、class等。
：另一个非常重要的指令是v-on，它用来绑定事件监听器，这样我们就可以做一些交互了；表达式除了方法名，也可以直接是一个内联语句；Vue.js将methods里的 方法也代理了，所以也可以像访问Vue数据那样来调用方法;
: Vue.js的v-bind和v-on指令都提供了语法糖，也可以说是缩写，比如v-bind,也可以省略v-bind,直接写一个冒号":",v-on可以直接用“@”来缩写；
：所有的计算属性都以函数的形式写在Vue实例内的computer选项内，最终返回计算后的结果, 每一个计算属性都包含一个getter和一个setter；
：计算属性还有两个很实用的小技巧容易被忽略：一是计算属性可以依赖其他计算属性；二是计算属性不仅可以依赖当前Vue实例的数据，还可以依赖其他实例的数据；
：使用计算属性还是methods取决你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。
：当:class的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一般当条件多于两个时，都可以使用data或computed;
: 当需要应用多个class时，可以使用数组语法，给:class绑定一个数组，应用一个class列表；
：使用v-bind:style可以给元素绑定内联样式，方法与:class类似，也有对象语法和数组语法，看起来很像直接在元素上写CSS；
：[v-clock]{display:none;}:是一个解决初始化慢导致页面闪动的最佳实践；
：v-once也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视 为静态内容。
：v-show的用法与v-if基本一致，只不过v-show是改变元素的CSS属性display.当v-show表达式的值为false时，元素会隐藏，查看DOM结构会看到元素上加载了内联样式display:none;
: 当你不想改变数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组。
：Vue提供了一个特殊变量$event,用于访问原生DOM事件;
: Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上；使用v-model时，如果是用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉子时才会触发更新。如果希望总是实时更新，可以用@input来代替v-model。事实上，v-model也是一个特殊的语法糖，只不过它会在不同的表单上智能处理。
：单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值,为真时选中，为否时不选；
：组件在使用data时，和实例稍有区别， data必须是函数，然后将数据return出去；
：在组件中，使用props来声明需要从父级接收的数据，props的值可以是两种，一种是字符串数组，一种是对象；
：由于HTML特性不区分大小写，当使用DOM模版时，驼峰命名（cameCase）的props名称要转为短横分割命名。
：有时候，使用props传递数据，传递的数据并不是直接写死的，而是来自父级的动态数据，这时可以使用指令v-bind来动态绑定props的值，当父组件的数据变化时，也会传递给子组件。
：父组件模版的内容是在父组件作用域内编译，子组件模版的内容是在子组件作用域内编译；
：具名Slot：给slot元素指定name后可以分发多个内容，具名slot可以与单个slot共存；
：Vue.js提供了一个特殊的元素<component>用来动态地挂载不同的组件，使用is特性来选择挂载的组件；
：Vue提供了另一种定义模版的方式，在<script>标签里使用text/x-template类型，并且指定一个ID，将这个ID赋给tempalate,在<script>标签里，你可以愉快地写HTML代码，不用考虑换行问题；
：在一些特殊的情况下，我们需要动态的去创建Vue.js 实例，Vue.js提供了Vue.extend和$mount两个方法来手动挂载一个实例；
: 自定义指令钩子函数：bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。unbind:只调用一次，指 令与元素解绑时调用。