vue笔记

-----全局配置
keyCodes

• 类型：{ [key: string]: number | Array<number> }

• 默认值：{}

• 用法：

Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // camelCase 不可用
  mediaPlayPause: 179,
  // 取而代之的是 kebab-case 且用双引号括起来
  "media-play-pause": 179,
  up: [38, 87]
}
<input type="text" @keyup.media-play-pause="method">
给 v-on 自定义键位别名。

productionTip

设置为 false 以阻止 vue 在启动时生成生产提示。
-----全局API

Vue.extend( options )

关于组件，写的非常好------https://cn.vuejs.org/v2/guide/components.html
博文--http://blog.csdn.net/u013778905/article/details/53864289
关于vue-router----https://router.vuejs.org/zh-cn/essentials/getting-started.html
------------------------https://router.vuejs.org/zh-cn/
命名视图
有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置（带上 s）：

const router = new VueRouter({
  routes: [
    {
      path: '/',//同一个路由
      components: {
        default: Foo,
        a: Bar,//多个视图
        b: Baz
      }
    }
  ]
})

router-link:
https://router.vuejs.org/zh-cn/api/router-link.html

1516157723(1).jpg
路由对象：
https://www.cnblogs.com/avon/p/5943008.html
在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。

路由对象暴露了以下属性：

$route.path
字符串，等于当前路由对象的路径，会被解析为绝对路径，如 "/home/news" 。
$route.params
对象，包含路由中的动态片段和全匹配片段的键值对
$route.query
对象，包含路由中查询参数的键值对。例如，对于 /home/news/detail/01?favorite=yes ，会得到$route.query.favorite == 'yes' 。
$route.router
路由规则所属的路由器（以及其所属的组件）。
$route.matched
数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name
当前路径的名字，如果没有使用具名路径，则名字为空。

[vue 的$http用法]：

1.引入一个叫vue-resource.js的文件，因为vue.js中没有$http服务
2.在main.js/index.js中配置import VueResource from 'vue-resource'; 然后用Vue.use(VueResource) 方法启用插件

//get
  new Vue({  
                  
                el:"#app",  
                methods:{  
                    get:function(){  
                        this.$http.get('get.php',{  
                            a:10,  
                            b:1  
                        }).then(function(res){  
                            alert(res.data);  
                              
                        },function(res){  
                            alert(res.status)  
                        });  
                    }  
                }  
                  
            }) 
//post
 new Vue({  
                  
                el:"#app",  
                methods:{  
                    get:function(){  
                        this.$http.post('post.php',{  
                            a:2,  
                            b:3  
                        },{  
                            emulateJSON:true  
                        }).then(function(res){  
                            alert(res.data);  
                              
                        },function(res){  
                            alert(res.status)  
                        });  
                    }  
                }  
                  
            })  

vue实力的生命周期：

lifecycle.png