意必固我_LRL
意必固我_LRL

《Vue.js实战》读书笔记

嗯,加油啦!!都是书里的东西,整理了一下,以后复习的时候看.

摘些最近看书的句子：

    阳光之下，人各有份  ------《传道书》

    迪安却不一样，他为了面包和性爱在社会上使劲打拼。

    我不知道自己究竟是谁了,我远离家乡，旅途劳顿，疲倦不堪，寄身在一个从未讲过的旅馆房间，听到的是外面蒸汽的嘶嘶声....,在最初的奇特的十五分钟里，我真的不知道自己是谁。我并不惊恐；只觉得自己仿佛是另一个人，一个陌生人，我一生困顿，过着幽灵般的生活，

   正因为没有立足之地，他对任何地方都不会感到厌倦，正应为无处可去，他任何地方都可以去，他老是在星光下进行。

                                                                                                                                                                       -------------《在路上》

 

第1章初识Vuejs

Vue特点:简单小巧,渐进式.

简单小巧是指 Vue.js 压缩后大小仅有 17KB。

所谓渐进式（Progressive），就是你可以一步一 步、有阶段性地来使用 Vue.js，不必一开始就使用所有的东西。Vue 最独特的特性之一，是其非侵入性的响应式系统。比如你可以直接用脚本插入，也可以构建一个前端工程vue-cil。

Vue特性:解耦视图和数据,可复用的组件,前端路由,状态管理,虚拟的DOM技术

MWM 模式:Model-view-viewModel.模式.mvvm模式是由经典的ＭＶＣ模式演变而来，。当 View （视图层）变化时，会自动更新到 ViewModel （视图模型），反之亦然。 View 和 ViewModel 之间通过双向绑定（tdata-binding）建立 联系．

Vｕe.js 是一个渐进式的 JavaScript 框架，根据项目需求，你可以选择从不同的维度来使用它。 

第2章数据绑定和第一个Vue应用

el 用于指定一个页面中己存在的 DOM 元素来挂载 Vue 实例，它可以是 HTMLElement ，也可以是 css 选择器.

Vue 实例的 data 选项，可以声明应用内需要双向绑定的数据.

生命周期:

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

• mounted el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始。 一般用于页面初始数据的展示.

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

插值与表达式:

使用双大括号（Mustache 语法）“｛｛｝｝”是最基本的文本插值方法，它会自动将我们双向绑 定的数据实时显示出来,在｛｛｝｝中，除了简单的绑定属性值外，还可以使用 JavaScript 表达式进行简单的运算、 三元运算

v-pre＞｛｛这里的内容是不会被编译的＜／ span>

过滤器:

Vue. js支持在｛｛｝｝插值的尾部添加一个管道符 “ ( | )  ” 对数据进行过滤，经常用于格式化文 本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的， 通过给 Vue 实例添 加选项 filters 来设置， 
 

指令与事件:

指令的主要职责就是当其表达式的值改变时，相应地将某些行为应用到 DOM 上,数据驱动 DOM 是 Vue.js 的核心理念，所以不到万不得已时不要主动操作 DOM，你只需要维护好数据， DOM 的事 Vue 会 帮你优雅的处理。Vue. 内置了很多指令，帮助我们快速完成常见的 DOM 操作，比如循环渲染、显示与隐藏等.

v-bind 的基本用途是动态更新 HTML 元素上的属性，比如 id、 class 等，

 v-on 可以监 昕原生的 DOM 事件，除了 click 外，还有 dblclick、 keyup, mousemove 等。表达式可以是一个方 法名，这些方法都写在 Vue 实例的 methods 属性内，并且是函数的形式


第3章计算属性

在模板中双向绑定一些数据 或表达式了。但是表达式如果过长，或逻辑更为复杂时，就会变得雕肿甚至难以阅读和维护，所以在遇到复杂的逻辑时应该使用计算属性。 

每一个计算属性都包含一个 getter 和一个 setter，我们上面的两个示例都是计算属性的默认用 法， 只是利用了 getter 来读取。在你需要时，也可以提供一个 setter 函数， 当手动修改计算属性的 值就像修改一个普通数据那样时，就会触发 setter 函数，执行一些自定义的操作，

计算属性除了上述简单的文本插值外，还经常用于动态地设置元素的样式名称 class 和内联样 式 style.

计算属性还有两个很实用的小技巧容易被忽略：一是计算属性可以依赖其他计算属性： 二是 计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据.

计算属性缓存:

调用 methods 里的方法也可以与计算属性起到同样的 作用,计算属性是基于它的依赖缓存的。 一个计算属性所依赖的数据发生变化时，它才会重新取值，所以 text 只要不改变，计算属性也就不更新，对于一个获取当前时间的计算属性,即Data.now(),不是响应式依赖,计算属性的值不会更新,但对于methods的则不同,只要重新渲染,就会被执行.

第4章v-bind及class与style绑定

对象中也可以传入多个属性，来动态切换 class。另外，：class 可以与普通 class 共存.

当需要应用多个 class 时， 可以使用数组语法， 给：class 绑定一个数组，应用一个 class 列表.

如果直接在自定义组件上使用 class 或：class， 样式规则会直接应用到这个组件的根元素上，例 如声明一个简单的组件：
 

使用 v-bind:style （即：style） 可以给元素绑定内联样式，方法与：class 类似，也有对象语法和 数组语法，看起来很像直接在元素上写 CSS


第5章内置指令

v-cloak 

不需要表达式，它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除， 经常和 css 的 display: none；配合使用.避免{{}}闪现

v-once

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

条件渲染指令:v-if、 v-else-if、 v-else:

与 JavaScript 的条件语句 if else、 else if类似， Vue.js 的条件指令可以根据表达式的值在 DOM 中渲染或销毁元素／组件;

v-else-if 要紧跟 v-if, v-else 要紧Rli! v-else-if 或 v-if，表达式的值为真时， 当前元素／组件及所 有子节点将被渲染，为假时被移除。如果一次判断的是多个元素，可以在 Vue.js内置的＜template> 元素上使用条件指令，最终渲染的结果不会包含该元素，

Vue 在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染， 

如果你不希望这样做，可以使用 Vue.jd提供的 key 属性，它可以让你自己决定是否要复用元 素， key 的值必须是唯一的

v-show 的用法与 v-if基本一致，

只不过 v-show 是改变元素的 css 属性 display。当 v-show 表 达式的值为 false 时， 元素会隐藏，查看 DOM 结构会看到元素上加载了内联样式 display: none;,

v-if 与 v-show 的选择

v-if和 v-show 具有类似的功能，不过 v-if 才是真正的条件渲染，它会根据表达式适当地销毁 或重建元素及绑定的事件或子组件。若表达式初始值为 false，则一开始元素／组件并不会渲染，只 有当条件第一次变为真时才开始编译。而 v-show 只是简单的 css 属性切换，无论条件真与否，都会被编译。相比之下， v-if更适合 条件不经常改变的场景，因为它切换开销相对较大，而 v-show 适用于频繁切换条件。

列表渲染指令 v-for:

当需要将一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令 v-for。它的表达式需结合 in 来使用，类似 item in items 的形式.遍历对象属性时，有两个可选参数，分别是键名和索引.

数组更新

Vue 的核心是数据与视图的双向绑定，当我们修改数组时， Vue 会检测到数据变化，所以用 v-for 渲染的视图也会立即更新。 Vue 包含了一组观察数组变异的方法，使用它们改变数组也会触 发视图更新：
 push() pop()  shift()  unshift（）splice() shift（）reverse() 

有些方法不会改变原数组，
filter() concat() slice() 

它们返回的是一个新数组，在使用这些非变异方法时，可以用新数组来替换原数组

Vue 在检测到数组变化时，并不是直接重新渲染整个列表，而是最大化地复用 DOM 元素。替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆地用新数组来替换旧数组，不用担 心性能问题

有些变动 Vue 是不能检测到的，也不会触发视图更新：
• 通过索引直接设置项，比如 app.books[3] = { ... }. 

解决第一个问题可以用两种方法实现同样的效果，第一种是使用 Vue 内置的 set 方法：
Vue .set(app.books, 3, { name: ’ 《css 揭秘》 ’， author ：’［希］ Lea Verou ’ ., ) } 
如果是在 webpack 中使用组件化的方式,这时 可以使用$set ，例如：
this.$set(app.books, 3, { name: ’《css 揭秘》’， author ：’［希］ Lea Verou ’ )}
另一种方法：
app.books . splice(3, 1 , { name : ’《css 揭秘》’， author ： ’ ［希J Lea Verou ’ }) 
• 修改数组长度，比如叩p.books.length = 1. 

直接用 splice 来解决：app.books.splice(l); 

过滤与排序

当你不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性 来返回过滤或排序后的数组，计算属性 依赖于列表 ，但是不会修改列表。实现排序也是类似的，

方法与事件

@click

的表达式可以直接使用 JavaScript 语句，也可以是一个在 Vue 实例中 methods 选项内 的函数名

在 methods 中定义了我们需要的方法供＠click 调用， 需要注意的是，＠click 调用的方法名后 可以不跟括号“（）” 。 此时，如果该方法有参数，默认会将原生事件对象 event 传入，

这种在 HTML 元素上监昕事件的设计看似将 DOM 与 JavaScript 紧藕合，违背分离的原理，实 则刚好相反。因为通过 HTML 就可以知道调用的是哪个方法，将逻辑与 DOM 解藕，便于维护。 最重要的是， 当 ViewModel 销毁时，所有的事件处理器都会自动删除，无须自己清理。 Vue 提供了一个特殊变量$event，用于访问原生 DOM 事件

修饰符

在上例使用的 event.preventDefault（）也可以用 Vue 事件的修饰符来实现，在＠绑定的事件后加 小圆点“．”，再跟一个后缀来使用修饰符。 Vue 支持以下修饰符：

  • ＜ ！一阻止单击事件冒泡 一〉
  • ＜ ！一提交事件不再重载页面 一〉
    Vue 还提供了一些快捷名称，以下是全部的别名：

    • .enter • .tab • .delete （捕获“删除”和“退格”键）• .esc • .space • .up • .down • .left • .right 
    这些按键修饰符也可以组合使用，或和鼠标一起配合使用：

    • .ctrl • .alt • .shift • .meta (Mac 下是 Command 键， Windows 下是窗口键）
    例如：

    • Do something
       

    第6章表单与v-model

    基本用法

    Vue.js提供了 v-model 指令，用于在表单类元素上双向绑定数据，

    使用 v-model 后，表羊控件显示的值只依赖所绑定的数据，不再关心初始化时的 value 属性，对于在＜textarea> 之间插入的值，也不会生效． 使用 v-model 时，如果是用中文输入法输入中文，一般在没有选定饲组前，也就是在 拼音阶段， Vue 是不会更新数据的，当敲下汉字时才会触发更新。 如果希望总是实时更新，可以用＠input 来替代 v-model. 事实上， v-model 也是一个特殊的语法糖，只 不过它会在不同的表单上智能处理。

    单选按钮在单独使用时，不需要 v-model，直接使用 v-bind 绑定一个布尔类型的值， 为真时 选中， 为否时不选

     
 

     
 


    如果是组合使用来实现互斥选择的效果，就需要 v-model 配合 value 来使用：

    

  

     

 
     

     

    复选框：

    复选框也分单独使用和组合使用，不过用法稍与单选不同。复选框单独使用时，也是用 v-model 来绑定一个布尔值

    在选时，数据 checked 的值变为了 true, label 中渲染的内容也会更新。 组合使用时，也是 v-model 与 value 一起，多个勾选框都绑定到同一个数组类型的数据， value 的值在数组当中，就会选中这一项。这一过程也是双向的，在勾选时， value 的值也会自动 push 到 这个数组中，

    绑定值:

    v-model 绑定的值是一 个静态字符串或布尔值， 但在业务中，有时需要绑定一个动态的数据， 这时可以用 v-bind 来实现。

    
 

     { { picked }} 
     

    {{ value }}
     
       

修饰符:

.lazy: 
在输入框中， v-model 默认是在 input 事件中同步输入框的数据（除了提示中介绍的中文输入 法情况外），使用修饰符 .lazy 会转变为在 change 事件中同步，message 并不是实时改变的，而是在失焦或按回车时才更新。
.number: 
使用修饰符.number 可以将输入转换为 Number 类型，否则虽然你输入的是数字，但它的类型 其实是 String，比如在数字输入框时会比较有用

.trim: 
修饰符 .trim 可以自动过滤输入的首尾空格，

第7章组件详解

组件（Component）是 Vue. 最核心的功能，也是整个框架设计最精彩的地方.

组件注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册后， 任何 Vue 实例都可以使用。全局注册示例代码如下：
Vue.component (’my- component ’, { }) 
my-component 就是注册的组件自定义标签名称，推荐使用小写加减号分割的形式命名。 要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用＜my-component> 的形式来使用组件了，

template的 DOM 结构必须被一个元素包含， 如果直接写成 “这里是组件的内容”， 不带 “

在组件选项中添加 template 就可以显示组件内容了， 示例代码如下：
Vue . component (’my-component ’, { template: ’ ＜div＞这里是组件的内容＜／div> '
}) ; 

在 Vue 实例中，使用 components选项可以局部注册组件，注册后的组件只有在该实例作用域 下有效。组件中也可以使用 components 选项来注册组件，使组件可以嵌套。

Vue 组件的模板在某些情况下会受到 HTML 的限制，比如＜table＞内规定只允许是〈tr〉、＜td＞、 可以使用特殊的 is 属性来挂载组件.tbody 在渲染时， 会被替换为组件的内容。常见的限制元素还有＜ul＞、＜ol＞、＜select> 。 


is=”my-component” > 
 
 
 

组件中声明了数据 count， 它在组件初始化时会获取来自父组件的 initCount， 之后就与之无关 了，只用维护 count， 这样就可以避免直接操作 initCount。 另一种情况就是 prop 作为需要被转变的原始值传入。这种情况用计算属性


 
 
 

在javaScript中对象和数组是引用类型，指向同一个内存空间，所以 props是对象和数组时，在子组件内改变是会影响父组件的。 props 选项的值是对象时，当 prop 需要验证时，就需要对象写法。 一般当你的组件需要提供给别人使用时，推荐都进行数据验证，比如某个数据必须是数字类型，如果传入字符串，就会在控制台弹出警告。 以下是几个 prop 的示例：

Vue.component （ ’ my-component ’， ｛
props : { 
／／必须是数字类型
propA: Number, 
／／必须是字符串或数字类型
propB : [String, Number] , 
／／布尔值，如果没有定义，默认值就是 true
propC: { type : Boolean, default : true} 
／／数字，而且是必传 
propD: { type: Number, required: true }
／／如果是数组或对象，默认值必须是一个函数来返回 
propE: { type : Array, default : function () { return [] ; }
／／自定义一个验证函数 
propF: { validator: function (value) { return value > 10;  ) } 

验证的 type 类型可以是：• String • Number • Boolean • Object • Array • Function 

rpe 也可以是一个自定义构造器，使用 instanceof 检测。 当 prop 验证失败时，在开发版本下会在控制台抛出一条警告。
 

组件通信:

《Vue.js实战》读书笔记_第1张图片

组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信.

自定义事件:

子组件用$emit（）来触发事件，父组件用$on（）来 监听子组件的事件。 父组件也可以直接在子组件的自定义标签上使用 v-on 来监听子组件触发的自定义事件，

 
 
 

 
 

除了用 v-on 在组件上监听自定义事件外，也可以监听DOM 事件，这时可以用.native 修饰符 表示监听的是一个原生事件，监听的是该组件的根元素，

 

使用 v-model
Vue2.x 可以在自定义组件上使用 v-model 指令，我们先来看一个示例：


  
 
 Vue . component (
’my-component’,
{ template :’’, 
data : function () { return { counter: 0 }},
methods : { handleClick: function () { this.counter++; this . $emit （’input ’， this.counter);
.})}
} 
var app =new Vue({ el :’#app’, 
data: { 
total : 0 
})


仍然是点击按钮加 1 的效果， 不过这次组件$emit（）的事件名是特殊的 input， 在使用组件的父 级，井没有在＜my-component>上使用＠input= “handler”，而是直接用了 v-model 绑定的一个数据 total。这也可以称作是一个语法糖，因为上面的示例可以间接地用自定义事件来实现：

 

非父子组件通信:

在 Vue. 2.x 中 ， 推荐使用一个空的 Vue 实例作为中央事件总线（bus），也就是一个中介。 

 {{message )) 
 
 
 

首先创建了 一个名为 bus 的空 Vue 实例，里面没有任何内容；然后全局定义了组件 component-a；最后创建 Vue 实例 app，在 app 初始化时，也就是在生命周期 mounted 钩子函数里监 听了来自 bus 的事件 on-message，而在组件 component-a 中，点击按钮会通过 bus 把事件 on-message 发出去，此时 app 就会接收到来自 bus 的事件，进而在回调里完成自己的业务逻辑。

父链

在子组件中，使用 this.$parent 可以直接访问该组件的父实例或组件，父组件也可以通过 this.$children 访问它所有的子组件，而且可以递归向上或向下无线访问， 直到根实例或最内层的组 件。

 ( ( message } }  

子组件索引

当子组件较多时， 通过 this.$children 来一一遍历出我们需要的一个组件实例是比较困难的， 尤其是组件动态渲染时，它们的序列是不固定的。 Vue 提供了子组件索引的方法，用特殊的属性 ref 来为子组件指定一个索引名称

 
 

在父组件模板中，子组件标签上使用 ref指定一个名称，井在父组件内通过 this.$refs 来访问指 定名称的子组件。 

当需要让组件组合使用，混合父组件的内容与子组件的模板时，就会用到 slot，

这个过程叫作 内容分发（transclusion）。

以＜app＞为例，它有两个特点： • 编译的作用域。

父组件模板的内容是在父组件作用域内编译，子组件模板的内容是在子组件作用域内编译。 

单个 Slot
在子组件内使用特殊的＜slot>元素就可以为这个子组件开启一个 slot （插槽），在父组件模板 里，插入在子组件标签内的所有内容将替代子组件的＜slot> 标签及它的内容

子组件＜slot>内的备用内容，它的作用域是子组件本身．

具名 Slot
给＜slot>元素指定一个 name 后可以分发多个内容，具名 Slot 可以与单个 Slot 共存

作用域插槽
作用域插槽是一种特殊的 slot，使用一个可以复用的模板替换己渲染元素。

 


第8章自定义指令

第9章Render函数

 

Vue.js 2.x 与 Vue扣 1.x 最大的区别就在于 2.x 使用了 Virtual Dom （虚拟 DOM）来更新 DOM 节点，提升擅染性能。 

React 和 Vue 2 都使用了 Virtual Dom 技术， Virtual Dom 并不是真正意义上的 DOM，而是一 个轻量级的 JavaScript 对象，在状态发生变化时， Virtual Dom 会进行 Diff 运算，来更新只需要被 替换的 DOM，而不是全部重绘。 与 DOM 操作相比， Virtual Dom 是基于 JavaScript 计算的，所以开销会小很多

 

《Vue.js实战》读书笔记_第2张图片

 

在 Vue.js 2 中， Virtual Dom 就是通过一种 VNode 类表达的，每个 DOM 元素或组件都对应一 个 VNode 对象



第10章使用webpack

web pack 的主要适用场景是单页面富应用（SPA） 。 SPA 通常是由一个 html 文件和一堆按需 加载的 js 组成，它的 html 结构可能会非常简单

export 和 import 是用来导出和导入模块的。 一个模块就是一个js 文件，它拥有独立的作用域， 

II config.js 
var Conf ig = { version :’1. 0. 0 ’ 
export { Config }; 
或：
II config.js 
export var Conf ig = { version:’1. 0. 0 ’ 
其他类型（ 比如函数、数组、常量等）也可以导出 ，比如导出一个函数：
II add.js 
export function add(a, b) { 
return a + b; 

模块导出后，在需要使用模块的文件使用 import 再导入，就可以在这个文件内使用这些模块 了

，导入的模块名称都是在 export 的文件中设置的，也就是说用户必须预先知道 这个名称叫什么，比如 Config、 add。而有的时候，用户不想去了解名称是什么，只是把模块的功能 拿来使用，或者想自定义名称，这时可以使用 export default 来输出默认的模块.

 

单页面富应用（SPA) ，

而 SPA 的核心就是前 端路由。那什么是路由呢？通俗地讲，就是网址，比如 https://www.iviewui.com/docs/ guide/introduce; 再专业一点， 就是每次 GET.或者 POST 等请求在服务端有一个专门的正则配置列表，然后匹配到具 体的一条路径后，分发到不同的 Controller， 进行各种操作，最终将 htrr 或数据返回给前端，这就完 成了一次 IO。 当然，目前绝大多数的网站都是这种后端路由，也就是多页面的，这样的好处有很多，比如 页面可以在服务端渲染好直接返回给浏览器，不用等待前端加载任何js 和 css 就可以直接显示网页 内容，再比如对 SEO 的友好等。后端路由的缺点也是很明显的，就是模板是由后端来维护或改写 的。 前端开发者需要安装整套的后端服务，必要时还得学习像 Php或 Java 这些非前端语言来改写 html 结构，所以 html 和数据、逻辑混为一谈，维护起来既脆肿又麻烦。 然后就有了

前后端分离的开发模式，后端只提供 API 来返回数据，前端通过 Ajax 获取数据后， 再用一定的方式渲染到页面里，这么做的优点就是前后端做的事情分得很清楚，后端专注在数据上， 前端专注在交互和可视化上，如果今后再开发移动 App，那就正好能使用一套 API 了 。当然，缺 点也很明显，就是首屏渲染需要时间来加载 css 和 js.

在 Node.js 出现后，这种现象有了改善，就是所谓的大前端，得益于 Node.js 和 JavaScript 的语 言特性， html 模板可以完全由前端来控制，同步或异步渲染完全由前端自由决定，并且由前端维 护一套模板，这就是为什么在服务端使用 artTemplate、 React 以及 Vue2 的原因。说了这么多，到 底怎样算是 SPA 呢？

其实就是在前后端分离的基础上，加一层前端路由。 前端路由，即由前端来维护一个路由规则。实现有两种，

一种是利用 url 的 hash， 就是常说的 锚点， JavaScrip／通过 hashChange 事件来监听 url 的改变， IE7 及以下需要用轮询：

另一种就是 HTML5 的 History 模式，它使 url 看起来像普通网站那样，以“／”分剖，没有＃，但页面并没有 跳转，不过使用这种模式需要服务端支持，服务端在接收到所有的请求后，在fl指向同一个 html 文 件，不然会出现 404。因此， SPA 只有一个 html时，整个网站所有的内容都在这一个 html 里，通过 JavaScript 来处理。 前端路由的优点有很多，比如页面持久性，像大部分音乐网站，你都可以在播放歌曲的同时 跳转到别的页面，而音乐没有中断。再比如前后端彻底分离。

在 ES 6 中，使用 let 和 const 命令来声明变量，代替了 var. let 和 const 的作用域是“块”， 比女口：
let a = l ; var b = 2; 
console . log (b); I I 2 console . log(a); ／／报错： a is not defined 
con st 与 let 的主要区别是， const 用于声明常量，也就是声明后不能再修改． 如果一时还不了解它们的其他区别，可以先把 let 和 const 当作 var 来理解．
 

， webpack 会把每一个路由都打包为一个js 文件，在请求到该页面时，才去加载这个页面的 js, 也就是异步实现的懒加载（按需加载）


第11章插件

跳转

vue-router 有两种跳转页面的方法，

第一种是使用内置的＜router-link＞组件，它会被渲染为一个 标签：

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。



它的用法与一般的组件一样， to 是一个 prop，指定需要跳转的路径，当然也可以用 v-bind 动 态设置。使用＜router-link＞，在 HTML5 的 History 模式下会拦截点击，避免浏览器重新加载页面。

  • • tag tag 可以指定渲染成什么标签，比如＜router-link to="/about” tag＝”Ii”〉渲染的结果就是＜Ii> 。
  • • replace 使用 replace 不会留下 History 记录，所以导航后不能用后退键返回上一个页面，。
  • • active-class 当＜router-link>对应的路由匹配成功时，会自动给当前元素设置一个名为 router-link-active 的 class，设置 prop: active-class 可以修改默认的名称。在做类似导航栏时，可以使用该功 能高亮显示当前页面对应的导航菜单项，但是一般不会修改 active-class，直接使用默认值 router-link-active 就可以．

有时候，跳转页面可能需要在 JavaScript 里进行，类似于 window.location.href。这时可以用第 二种跳转方法，使用 router 实例的方法。

。 vue-router 提供了导航钩子 beforeEach 和 afterEach， 它们会在路由即将改变前和改变后触发，所以设置标题可以在 beforeEach 钩子完成。

导航钩子有 3 个参数：
• to 即将要进入的目标的路由对象。 • form 当前导航即将要离开的路由对象。 • next 调用该方法后，才能进入下一个钩子。
路由列表的 meta z字段可以自定义一些信息，比如我们将每个页面的 title 写入了 meta 来统一 维护， beforeEach 钩子可以从路由对象 to 里获取 meta 信息，从而改变标题。 有了这两个钩子，还能做很多事情来提升用户体验。比如一个页面较长，滚动到某个位置， 再跳转到另一个页面，滚动条默认是在上一个页面停留的位置，而好的体验肯定是能返回顶端。通 过钩子 afterEach 就可以实现：
。

仓库 store 包含了应用的数据（状态）和操作过程。

Vuex 里的数据都是响应式的，任何组件使 用同－ store 的数据时，只要 store 的数据变化，对应的组件也会立即更新。

数据保存在 Vuex 选项的 state 字段内，比如要实现一个计数器，定义一个数据 count，初始值
为 0:

const store= new Vuex.Store({ 
state: { 
count: 0 
., ) } 


在任何组件内，可以直接通过$store.state.count 读取：