一些vue的知识点

1、v-model指令：在input及textarea元素上进行双向绑定，v-model会忽略所有表单元素的value，checked，selected特性的初始值而总是将vue实例的数据作为原数据。

我认为就是只能显示vue实例中data中的数据。

2、v-bind指令：将元素节点的属性和vue实例属性保持一致。

动态的绑定属性，或者组件prop到表达式

2.1、class于style绑定：可以传给v-bind：class一个对象，以动态的切换class，可以在对象中传入更多属性来动态切换多个class，而且v-bind：class可以和class属性共存

例：<div class="static"  v-bind:class="{active:isActive,'text-danger':has}"></div>

data：{

　　isActive:true,

　　has:false

}

3、v-if指令：显示和隐藏一个元素

v-if的隐藏和显示，是销毁和重建。如果要是切换多个元素，使用<template>元素包裹，在<template>元素上使用v-if

3.1、v-else指令：用来表示v-if的“else”块，v-else必须紧跟着在带v-if或者v-else-if的元素后面

3.2、v-else-if指令：充当v-if的“else-if”块

4、v-for指令：绑定数组的数据来渲染一个项目列表，在v-for中，我们有父作用域属性的完全访问权限，v-for还可以支持一个可选的第二个参数当前项的索引

第二个参数为健名：v-for=“（value，key）in object”

第三个参数为索引

5、v-on指令：绑定事件，当事件触发时执行。。。

类似于按钮，摁下按钮，触发。。。

6、计算属性：额，文档说的是对于任何复杂逻辑，都应当使用计算属性

我感觉是就是把复杂的代码封装了起来？

7、v-show指令：显示和隐藏一个元素

v-if和v-show的区别：v-show的元素会始终被渲染并保留在DOM中，v-show只是简单的切换元素的CSS属性display

v-if是真正的渲染，它会对监听器和子组件适当的销毁和重建，如果频繁的切换使用v-show

8、单向数据流：所有的prop都是父子prop之间形成一个单向向下行绑定；父级prop的更新会向下流动到子组件中，但反过来不行；

每次父组件发生更新时，子组件中所有的prop都会刷新到最新值

9、两种试图改变一个prop的情形：

9.1：这个prop用来传递一个初始值，这个子组件接下来希望作为一个本地的prop数据来使用，在这种情况下，最好定义一个本地的data属性并将这个prop用作初始值

props：[‘ initialCounter ’]，

　　　　data function（）{

　　　　  return {

　　　　　　counter：this.initialCounter

　　　　　　}

　　　　}

9.2：这个prop以一种原始的值传入且需要进行转换，在这种情况下，做好使用这个prop的值来定义一个计算属性；

props：[‘ size ’]，

computed：{

　　normalizedSize：function{

　　　　return this.size.trim().toLowerCase()

　　}

}

10、动态参数：用方括号括起来的JavaScript表达式作为一个指令的参数：<a v-bind:[attributeName]="url">...</a>

这里的attributeName会被作为一个JavaScript表达式进行动态求值，求值的值将会作为最终的参数来使用，这个绑定将介于v-bind值。

11、动态组件：在一个多标签的界面中使用is特性来切换不同的组件，每次切换之后都不是你之前选择的内容，是因为每次切换的时候，Vue都创建了一个新的实例，可以使用

<keep-alive>元素将动态组件包裹起来。

12、路由：

路由中有三个基本概念：route、routes、router

1、route，它是一条路由，由这个英文单词也可以看出来，它是单数。Home按钮=>Home内容，这是一条路由，about按钮=>about内容，这是另一条路由

2、routes，是一组路由，把上面的每一条路由组合起来，形成一个数组，[{home按钮=>home内容}，{about按钮=>about内容}]

3、router是一个机制，相当于一个管理者， 他来管理路由，它到routers中去查找，去找到对应的home内容，所以页面中就显示了home的内容。

4、客户端的路由，实际上就是dome元素的显示和隐藏，当页面中显示home内容的时候，about中的内容全部隐藏。

Vue-router路由也是基于上面的内容来实现的。

1、vue-router中，两个标签<router-link>和<router-view>来对应点击和显示部分，<router-link>就是定义页面中点击的部分

<router-view>定义显示部分，就是点击后，区配的内容显示在什么地方，所以<router-link>还有一个属性to，定义点击之后，要到哪里去。

2、js中配置路由

首先要定义route，一条路由实现，它是一个对象，由两个部分组成：path和component，path指路径，component指的是组件或者routes，最后创建router对路由进行管理，它是由构造函数，new vueRouter创建，接受routes参数。

配置完成后，把router实例注入到vue根实例中，就可以使用路由了。

执行过程：当用户点击router-link标签时，会去寻找它的to属性，它的to属性和JS中配置的路径{path：'/home',component：Home}从而找到了匹配的组件，最后把组件渲染

到<router-view>标签所在的地方，所有的这些实现基于Hash实现的。