vue学习笔记03

git page：    任何仓库 master分支，都可以发布(git page)-------------------------------------双向过滤器:    Vue.filter(name,{        read:        write:    });-------------------------------------1.02.0-------------------------------------引入 vue.js-------------------------------------bower-> （前端）包管理器    npm install bower -g        验证: bower --versionbower install <包名>bower uninstall <包名>bower info <包名> 查看包版本信息<script src="bower_components/vue/dist/vue.js"></script>-------------------------------------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);        }    ----------------------------------------vue组件:    组件: 一个大对象定义一个组件:1. 全局组件var Aaa=Vue.extend({    template:'<h3>我是标题3</h3>'});Vue.component('aaa',Aaa);    *组件里面放数据:        data必须是函数的形式，函数必须返回一个对象(json)2. 局部组件    放到某个组件内部var vm=new Vue({    el:'#box',    data:{        bSign:true    },    components:{ //局部组件        aaa:Aaa    }});--------------------------------------另一种编写方式:    Vue.component('my-aaa',{        template:'<strong>好</strong>'    });    var vm=new Vue({        el:'#box',        components:{            'my-aaa':{                template:'<h2>标题2</h2>'            }        }    });-----------------------------------配合模板:    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-devtools    ->  调试工具    https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd--------------------------------------------vue默认情况下，子组件也没法访问父组件数据--------------------------------------------组件数据传递: √1. 子组件就想获取父组件data    在调用子组件：        <bbb :m="数据"></bbb>    子组件之内:        props:['m','myMsg']        props:{            'm':String,            'myMsg':Number        }2. 父级获取子级数据    *子组件把自己的数据，发送到父级    vm.$emit(事件名,数据);    v-on:   @--------------------------------------------vm.$dispatch(事件名,数据)   子级向父级发送数据vm.$broadcast(事件名,数据)  父级向子级广播数据    配合: event:{}    在vue2.0里面已经，报废了--------------------------------------------slot:    位置、槽口    作用: 占个位置    类似ng里面 transclude  （指令）--------------------------------------------vue-> SPA应用，单页面应用    vue-resouce 交互    vue-router  路由    根据不同url地址，出现不同效果    咱上课: 0.7.13主页  home新闻页 newshtml:    <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. 关联    router.map({        'home':{            component:Home        },        'news':{            component:News        }    });    //5. 启动路由    router.start(App,'#box');跳转:    router.redirect({        ‘/’:'/home'    });--------------------------------------路由嵌套(多层路由):    主页  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:    其他loader ->  css-loader、url-loader、html-loader.....    后台: nodeJs  ->  require  exports    broserify  模块加载，只能加载js    webpack   模块加载器， 一切东西都是模块, 最后打包到一块了    require('style.css');   ->   css-loader、style-loader    vue-loader基于webpack.css.js.html.php.....a.vueb.vue    .vue文件:        放置的是vue组件代码        <template>            html        </template>        <style>            css        </style>        <script>            js  （平时代码、ES6）  babel-loader        </script>-------------------------------------简单的目录结构:    |-index.html    |-main.js   入口文件    |-App.vue   vue文件，官方推荐命名法    |-package.json  工程文件(项目依赖、名称、配置)        npm init --yes 生成    |-webpack.config.js webpack配置文件ES6: 模块化开发    导出模块：        export default {}    引入模块:        import 模块名 from 地址--------------------------------------------webpak准备工作:    cnpm install webpack --save-dev    cnpm install webpack-dev-server --save-dev    App.vue -> 变成正常代码       vue-loader@8.5.4    cnpm install vue-loader@8.5.4 --save-dev    cnpm install vue-html-loader --save-dev    vue-html-loader、css-loader、vue-style-loader、    vue-hot-reload-api@1.3.2    babel-loader    babel-core    babel-plugin-transform-runtime    babel-preset-es2015    babel-runtime最最核心：