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两个方法来手动挂载一个实例；