vue笔记-路由，组件

Posted 2020-10-04 lanlanDong

git page：
    任何仓库 master分支，都可以发布(git page)
-------------------------------------
双向过滤器:
    Vue.filter(name,{
        read:
        write:
    });
-------------------------------------
1.0
2.0
-------------------------------------
引入 vue.js
-------------------------------------
bower-> （前端）包管理器
    npm install bower -g
        验证: bower --version

bower 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
新闻页    news


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. 关联
    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.vue
b.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    -> 变成正常代码        [email protected]
    cnpm install [email protected] --save-dev

    cnpm install vue-html-loader --save-dev
    
    vue-html-loader、css-loader、vue-style-loader、
    [email protected]

    babel-loader
    babel-core
    babel-plugin-transform-runtime
    babel-preset-es2015
    babel-runtime

最最核心：