本文章为Vue2.0学习笔记：

学习路线：（先看的腾讯课堂vue精讲视频，视频能够快速大概了解vue是什么、怎么使用），vue2.0官方文档基础部分

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

VUE2.0官方文档--基础部分：

 1.VUE简介

　　Vue是一个基于MVVM的框架，其中M代表数据处理层，V代表视图层即我们在Vue组件中的html部分，VM即M和V的结合层，处理M层相应的逻辑数据，在V层实现渲染。Vue让我们把精力更多的放在VM层上，即更多的关注业务逻辑，把DOM操作交给系统。

　　1）声明式渲染：在vue实例对象中进行数据声明，在V层响应式的进行DOM渲染。

　　2）条件与循环：v-if、v-for

　　3）处理用户输入：v-model

　　4）构建组件化应用：在大型应用中将应用程序划分为小型、独立和可复用的组件，使开发更易管理

　　　　　vue自定义组件和Web组件规范中自定义元素的关系：

　　　　　　Vue组件语法部分参考了Web组件规范，有几个关键差别：

　　　　　　a）Web Components 规范未被所有浏览器原生实现，但是Vue组件被所有浏览器支持，且Vue组件可以包装于原生自定义元素之内。

　　　　　　b）Vue组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

2.Vue实例

　　1）Vue实例创建：一个Vue应用由一个通过new Vue 创建的根Vue实例，以及可选的嵌套的、可复用的组件数组成。所有的Vue组件都是Vue实例，并且接受相同的选项对象（一些根实例特有的选项除外）。

　　2）Vue实例中允许在data对象中添加属性，且这些属性是响应式的。Vue还有一些有用的属性和方法，以$为前缀

　　3）实例生命周期钩子：

　　 Vue2.0 学习笔记 随笔

3.模板语法： 

　　1）插值

　　　　a.文本插值：{}

　　　　b.解析HTML：v-html，会将数据解析为HTML代码渲染，但是不能使用v-html来复合局部模板。（站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值）

　　　　c.绑定属性：v-bind

　　　　d.可以使用JS表达式：每个绑定只能包含单个表达式。（模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量）

　　2）指令

　　　　a）指令的职责：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

　　　　b）参数：一些指令能够接受一些参数，在指令名称之后用冒号表示（如：v-bind：href=“url”）

　　　　c）动态参数：从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数

　　　　　　<a v-bind:[attributeName]="url"> ... </a>

　　　　　　（注：attributeName为null是可以用于显示的去除属性的绑定，且attributeName中不能包含引号、空格，大写会被转换成小写）

　　　　d）修饰符：以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

　　　　　　例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

　　　　　　<form v-on:submit.prevent="onSubmit">...</form>

　　　　e）缩写：v-bind： =》 ：

　　　　　　　　  v-on：=> @　

4.计算属性（computed）和侦听器（watch）

　　模板中表达式非常便利，但是它设计的初衷是用于简单运算，而不是处理复杂逻辑。在处理复杂逻辑是我们使用计算属性。

　　1）计算属性（computed）：

　　计算属性和事件绑定的区别：计算属性存在缓存，只有当它的依赖发生变化时才会重新执行，但是事件绑定在每次访问都是会重新执行的。（这同时意味着如果计算属性中不存在依赖，那么计算属性的值将永远不变。）

　　getter:（默认只有getter），计算属性获取值

　　setter：根据计算属性反过来去改变其依赖的值

　　2）侦听器 watch:当需要在数据变化时执行异步或开销较大的操作时，使用侦听器更好。

5.Class与Style绑定

　　针对class列表和内联样式，v-bind做了专门的增强，值除了可以是字符串外，还可以是对象或者数组。

　　v-bind:class、v-bind:style : 通常有两种使用方式 -- 对象语法和数组语法

　　对象语法： 

　　　　　　　1)<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div>
　　　　　　　　　　data:{
　　　　　　　　　　　　isActive:true,
　　　　　　　　　　　　hasError:false
　　　　　　　　　　}
　　　　　　　2)<div v-bind:class="classObject"></div>
　　　　　　　　data: {
  　　　　　　　　classObject: { 　　　　　　　　active: true, 　　　　　　　　'text-danger': false 　　　　　　　　 } 　　　　　　　　}
              3)同时可以使用计算属性改改变classObject值
　　　　　　 <div v-bind:class="classObject"></div>
　　　　　　　　data: { isActive: true, error: null },
　　　　　　　　computed: { 
　　　　　　　　　　classObject: function () { 
　　　　　　　　　　　　return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } 
　　　　　　　　　　} 
　　　　　　　　}

　数组语法：
　　　　　　1)<div v-bind:class="[activeClass, errorClass]"></div>
　　　　　　data: {
  　　　　　　activeClass: 'active', 　　　　　　errorClass: 'text-danger' 　　　　　　}
　　　　　　2)可以使用三元表达式：
　　　　　　<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
　　　　　　3）在数组语法中也可以使用对象语法
　　　　　　<div v-bind:class="[{ active: isActive }, errorClass]"></div>

　　v-bind:style 使用需要添加浏览器前缀的css属性时，vue会自动添加。

　　从2.3.0 开始，v-bind：style 绑定的属性中可以提供一个包含多个值的数组，常用于提供多个带前缀的值，如：<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>，这样写只会渲染数组中最后一个被浏览器支持的值。

6.条件渲染

　　1）v-if

　　　  v-if-else（2.1.0新增）

　　      v-else

　　      用key 解决元素复用：vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头渲染，这常常会造成元素不更新的情况，如果想避免这种问题，可以用key解决

　　2）v-show

　　　　v-show不同于v-if，v-show的元素始终会被渲染并保留在DOM中，它操作的是元素的display属性，同时v-show不支持<template>元素。

　　3）v-if 和 v-show 比较

　　　　v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

　　　　v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

　　　　相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

　　　　一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

7.列表渲染

　　1)v-for

　　数组遍历：v-for = “（item，index）in items”

　　对象遍历：v-for ="（value，key，index）in object"

　　key:v-for情况下尽量使用绑定key属性

　　2)数组更新检测

　　　　a）变异方法(会改变数组的方法)：push（）、pop（）、shift（）、unshift（）、splice（）、sort（）、reverse（），这些方法都会触发数组的更新

 　   　　b）由于JavaScript的显示，vue不能检测一下变动的数组　　

    1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
    2. 当你修改数组的长度时，例如：vm.items.length = newLength

　　　　但是有解决方法：

　　　　　　vm.items[indexOfItem] = newValue 的解决方法 => 1) Vue.set(vm.items, indexOfItem, newValue)

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  2) Vm.items.splice(indexOfItem, 1, newValue)

　　　　　　vm.items.length = newLength 的解决方法 => vm.items.splice(newLength)

　　　　这些方法就会触发更新了

　　3）对象的更新检测

　　　　a) vue不能检测对象属性的添加和删除，对于已经创建的实例，vue不能动态添加跟级别的相应，但是可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。列如：

　　　　var vm = new Vue({

　　　　　　 data: { userProfile: {

　　　　　　　　 　　　　name: 'Anika'

　　　　　　　　　　}

　　　　　　　　　 }

　　　　})

　　　　Vue.set(vm.userProfile, 'age', 27)

　　　　b) 在为嵌套对象添加多个新属性时，应该这样做：

　　　　　　vm.userProfile = Object.assign({}, vm.userProfile, {

　　　　　　　age: 27,

　　　　　　    favoriteColor: 'Vue Green'

　　　　　　 })

　　4）一段取值范围的v-for

　　　　　　<div> <span v-for="n in 10">{{ n }} </span> </div>  结果：1 2 3 4 5 6 7 8 9 10

　　5）v-for 和 v -if 同时使用：v-for 的优先级高于 v-if

　　6）组件中使用v-for：数据不会自动传递到组件中，因为组件有自己的作用域，为了把迭代数据传到组件里，我们需要使用props

8.事件处理

　　1）监听事件 ：v-on

　　2）事件处理：通常配合methods使用

　　3）事件修饰符:.stop    .prevent   .capture   .self   .once   .passive

　　4）按键修饰符（按键码：尽量不适用按键码）

　　5）系统修饰键：.ctrl  .alt  .shift  .meta   .exact（精准修饰符）

　　6）鼠标修饰符： .left  .right  .middle

　　在HTML中设置事件监听的原因（这样能做是不是违背了我们希望把关注点放在VM层的原则，没有），因为vue都把这些（事件处理方法和表达式）绑定到了VM层了。同时使用v-on有如下好处：

  1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

  2. 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。

  3. 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们

9.表单输入绑定

　　1）基本用法：v-model，在相应元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。

　　　　处理的元素包括：文本、多行文本、复选框（单个复选框绑定布尔值，多个复选框绑定到数组）、单选按钮、选择框（单选框和复选框）

　　2）修饰符：.lazy  .number   .trim

10.组件基础

　　1）组件是可复用的Vue实例，所以与new Vue 接受相同的选项（除了根实例特有的选项外）。

　　2）组件复用：组件是可以复用的，但是其中维护的数据，复用的组件都会有自己相应独立的数据，因为没用一次组件，就会有一个新实例被创建。

　　　　

　　

　　

　　

　　

 

 

 

 

 

 

 

 

 

　　　　

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄