vue过渡(动画)
本质走的css3: transtion ,animation
<div id="div1" v-show="bSign" transition="fade"></div> 动画: .fade-transition{ } 进入： .fade-enter{ opacity: 0; } 离开： .fade-leave{ opacity: 0; transform: translateX(200px); } 也可以使用animation.css动画库，并且vue实例还有一个transition配置项 <div class="animated" transition="bounce" v-show="bSign"></div> new Vue({ el:'', data:{}, methods:{}, transitions:{ bounce:{ enterClass:'zoonInLeft', leaveClass:'zoomOutRight' } } })
vue组件
组件：一个大对象，定义一个组件
var Aaa=Vue.extend({ template:'<h3>我是标题3</h3>' });
注册组件：
1、全局组件，通过Vue的方法component注册到全局类Vue上
Vue.component('aaa',Aaa); //挂在全局Vue对象上的
//全局组件可以在以后的通过new出来的vue实例中使用
*组件里面放数据:
组件里面的data必须是函数的形式，函数必须返回一个对象(json数据)
2、局部组件
放到某个组件内部，通过components配置项，注册到（组件）实例中
var vm=new Vue({
el:'#box',
data:{
bSign:true
},
components:{ //局部组件 挂在vue实例内的
aaa:Aaa
}
});
另一种定义注册方式.（推荐）；上面是定义和注册分步进行，这种方式是定义和注册合为一步了
全局： Vue.component('my-aaa',{ template:'<strong>好</strong>' }); 局部： var vm=new Vue({ el:'#box', components:{ 'my-aaa':{ template:'<h2>标题2</h2>' } } });
组件配合模板使用
将组件中的模板字符串，抽出模板（多个标签）到html中
1. template:'<h2 @click="change">标题2->{{msg}}</h2>' 2. 单独放到某个地方 a). <script type="x-template" id="aaa"> <h2 @click="change">标题2->{{msg}}</h2> </script> b). 推荐
<template id="aaa"> <h1>标题1</h1> <ul> <li v-for="val in arr"> {{val}} </li> </ul> </template>
动态组件：（可以做选择卡）
<component :is="组件名称"></component>
组件间通信
vue默认情况下，子组件也没法访问父组件数据
1. 子组件就想获取父组件data a、在调用子组件：绑定属性 <bbb :m="数据"></bbb> b、子组件之内:通过props获取以上绑定的属性 props:['m','myMsg'] 也可以指定类型的props props:{ 'm':String, 'myMsg':Number }
c、之后就可以在子组件的methods里面或者html插值里面使用了 2. 父级获取子级数据 *子组件实例主动把自己的数据，发送到父级，父级通过v-on:自定义事件监听，捕获到发送的事件触发，并接收到数据 vm.$emit(事件名,数据); v-on: @事件名=“自己的方法”
另外还有一种传值方法（2.0中已经废除）：
vm.$dispatch(事件名,数据) 子级向父级发送数据
vm.$broadcast(事件名,数据) 父级向子级广播数据
配合: event:{}
vue中的slot
位置、插槽；作用就是占个位置
就是在使用组件时，为组件里面的内容能留有渲染的位置
多个slot可以是用name进行区分
类似ng里面 transclude （指令）
vue路由
vue--->单页面（SPA）应用，是根据不同的路由（url地址），展示不同的效果（组件）
用到插件vue-router
html: <a v-link="{path:'/home'}">主页</a> 跳转链接 展示内容: <router-view></router-view> js: //1. 准备一个根组件 var App=Vue.extend(); //2. Home News组件都准备 var Home=Vue.extend({ template:'<h3>我是主页</h3>' }); var News=Vue.extend({ template:'<h3>我是新闻</h3>' }); //3. 准备路由 var router=new VueRouter(); //4. 关联(将组件名与定义的组件关联，之后就可以在html中通过v-link使用了) router.map({ 'home':{ component:Home }, 'news':{ component:News } }); //5. 启动路由 router.start(App,'#box'); 跳转（路由重定向）: router.redirect({ ‘/’:'/home' });
路由多层嵌套：在map关联的路由名称后的配置项subRoutes里进行配置次级路由
主页 home 登录 home/login 注册 home/reg 新闻页 news subRoutes:{ 'login':{ component:{ template:'<strong>我是登录信息</strong>' } }, 'reg':{ component:{ template:'<strong>我是注册信息</strong>' } } }
路由其他信息:可以通过路由后面的参数传递，并在当前路由组件的模板中使用
/detail/:id/age/:age
{{$route.params | json}} -> 当前参数
{{$route.path}} -> 当前路径
{{$route.query | json}} -> 查询字符串数据
vue-loader（.vue文件加载器）
通过路由实现页面切换，项目实现单文件组件，即使用.vue文件，.vue文件的编译需要vue-loader处理
其他loader-> css-loader、url-loader、html-loader、file-loader.....
后台: nodeJs -> require exports
browserify 模块加载，只能加载js
webpack 模块加载器， 一切东西都是模块, 最后打包到一块了 （包括图片、css）
require('style.css'); -> css-loader、style-loader
vue-loader基于webpack
.vue文件
vue单文件组件，放置的是vue组件代码，结构包括三部分
<template> html </template> <style> css </style> <script> //js （平时代码、ES6） babel-loader（编译es6）
export default{
//里面像组件使用一样的
data(){
return {
msg:'welcome Vue'
}
}
} </script>