vue03

2017-09-20 本文已影响0人追卓2018

vue03

vue过渡

自带

<div id="div1" v-show="bSign" transition="fade"></div>

动画:
.fade-transition{
transition: 1s all ease;
}
进入：
.fade-enter{
opacity: 0;
}
离开：
.fade-leave{
opacity: 0;
transform: translateX(200px);
}

animate.css

  引入animate.css (接着用上面标签)然后在标签里加上class='animated',然后设置vue里的transtions属性
              transitions:{ //定义所有动画名称
                  fade:{
                      enterClass:'zoomInLeft',(animate.css的类)
                      leaveClass:'zoomOutRight'
                  }
              }

vue组件

全局组件

    var Aaa=Vue.extend({
        template:'<h3>我是标题3</h3>'
    });
    Vue.component('aaa',Aaa);
        *组件里面放数据:
            data必须是函数的形式，函数必须返回一个对象(json)
            var Aaa=Vue.extend({
                data(){
                    return {
                        msg:'我是标题^^'
                    };
                },
                template:'<h3>{{msg}}</h3>'
            });
            Vue.component('aaa',Aaa);

局部组件

    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>
    js里边:template:'#aaa'

    b). <template id="aaa">
        <h1>标题1</h1>
        <ul>
            <li v-for="val in arr">
                {{val}}
            </li>
        </ul>
    </template>

动态组件

<component :is="组件名称"></component>

组件数据传递

子组件就想获取父组件data

  在调用子组件：
      父组件模版里给子组件绑定个属性<bbb :mmm="数据"></bbb>

  父组件的components:{
      子组件'bbb':{
              props:['mmm'],
              template:'<h3>我是bbb组件->{{mmm}}</h3>'
              }
          }

props两种参数:

    props:['m','myMsg']
    props:{
        'm':String,
        'myMsg':Number
    }

父级获取子级数据
子组件methods里定义方法,方法内部this.$emit('child-msg',this.a),父组件的模版中绑定传递的时间名@child-msg=父组件的一个方法,该方法接收一个参数,即为子组件传过来的参数

  <template id="aaa">

        <span>我是父级 -> {{msg}}</span>
        <bbb @child-msg="get"></bbb>
    </template>
    <template id="bbb">
        <h3>子组件-</h3>
        <input type="button" value="send" @click="send">

  </template>

    var vm=new Vue({
        el:'#box',
        data:{
            a:'aaa'
        },
        components:{
            'aaa':{
                data(){
                    return {
                        msg:111,
                        msg2:'我是父组件的数据',
                    }
                },
                template:'#aaa',
                methods:{
                    get(msg){
                        // alert(msg);
                        this.msg=msg;
                    }
                },
                components:{
                    'bbb':{
                        data(){
                            return {
                                a:'我是子组件的数据'
                            }
                        },
                        template:'#bbb',
                        methods:{
                            send(){
                                this.$emit('child-msg',this.a);
                            }
                        }
                    }
                }
            }
        }
    });

vm.$dispatch(事件名,数据) 子级向父级发送数据
vm.$broadcast(事件名,数据) 父级向子级广播数据
配合: event:{}

在vue2.0里面已经，报废了

插槽slot

类似ng里面 transclude （指令）
给模版中slot标签添加属性name='slotname',
然后在dom里的模版里添加属性slot='slotname'
就可以插入到对应位置了

    <aaa>
        <ul slot="ul-slot">
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
        </ul>
        <ol slot="ol-slot">
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ol>
    </aaa>
<template id="aaa">
    <h1>xxxx</h1>
    <slot name="ol-slot">这是默认的情况</slot>
    <p>welcome vue</p>
    <slot name="ul-slot">这是默认的情况2</slot>
</template>
    var vm=new Vue({
        el:'#box',
        data:{
            a:'aaa'
        },
        components:{
            'aaa':{
                template:'#aaa'
            }
        }
    });

viewrouter 0.7.13+vue1.0

<div id="box">
    <ul>
        <li>
            <a v-link="{path:'/home'}">主页</a>
        </li>
        <li>
            <a v-link="{path:'/news'}">新闻</a>
        </li>
    </ul>
    <div>
        <router-view></router-view>
    </div>  
</div>
    //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');
    //6. 跳转
    router.redirect({
        '/':'home'
    });

多层路由

  <div id="box">
      <ul>
          <li>
              <a v-link="{path:'/home'}">主页</a>
          </li>
          <li>
              <a v-link="{path:'/news'}">新闻</a>
          </li>
      </ul>
      <div>
          <router-view></router-view>
      </div>  
  </div>
  <template id="home">
      <h3>我是主页</h3>
      <div>
          <a v-link="{path:'/home/login'}">登录</a>
          <a v-link="{path:'/home/reg'}">注册</a>
      </div>
      <div>
          <router-view></router-view>
      </div>
  </template>
  <template id="news">
      <h3>我是新闻</h3>
      <div>
          <a v-link="{path:'/news/detail/001'}">新闻001</a>
          <a v-link="{path:'/news/detail/002'}">新闻002</a>
      </div>
      <router-view></router-view>
  </template>
  <template id="detail">
      {{$route.params | json}}
      <br>
      {{$route.path}}
      <br>
      {{$route.query | json}}
  </template>

  //1. 准备一个根组件
  var App=Vue.extend();
  //2. Home News组件都准备
  var Home=Vue.extend({
      template:'#home'
  });
  var News=Vue.extend({
      template:'#news'
  });
  var Detail=Vue.extend({
      template:'#detail'
  });
  //3. 准备路由
  var router=new VueRouter();
  //4. 关联
  router.map({
      'home':{
          component:Home,
          subRoutes:{
              'login':{
                  component:{
                      template:'<strong>我是登录信息</strong>'
                  }
              },
              'reg':{
                  component:{
                      template:'<strong>我是注册信息</strong>'
                  }
              }
          }
      },
      'news':{
          component:News,
          subRoutes:{
              '/detail/:id':{
                  component:Detail
              }
          }
      }
  });
  //5. 启动路由
  router.start(App,'#box');
  //6. 跳转
  router.redirect({
      '/':'home'
  });

扩展

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>

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

vue03

vue03

vue过渡

vue组件

组件数据传递

插槽slot

viewrouter 0.7.13+vue1.0

扩展

猜你喜欢

热点阅读