Vue.js学习-02

2017-10-25  本文已影响32人  magic_pill

333

引入vue2.0:
    bower info vue 查看版本
    http://vuejs.org/

到了2.0以后，有哪些变化?

<div class="box">
        <aaa></aaa>
        <bbb></bbb>
        <ccc></ccc>
    </div>
    <template id="aaa">
        <div>
            <strong>我是A组件---{{a}}</strong>
            <input type="button" value="发送数据" @click="send">
        </div>
    </template>
    <template id="bbb">
        <div>
            <strong>我是B组件---{{b}}</strong>
            <input type="button" value="发送数据" @click="send">
        </div>
    </template>
    <template id="ccc">
        <div>
            <strong>我是C组件---{{c}}</strong>
            <input type="button" value="发送数据" @click="send">
            <h2>接受a数据---{{a}}</h2>
            <h2>接受b数据---{{b}}</h2>
        </div>
    </template>
    <script>
        //注册一个单一事件
        var vm = new Vue();

        var A = {
            data(){
                return {a:"我是A数据"}
            },
            methods:{
                send(){
                    vm.$emit("sendA",this.a);
                }
            },
            template:"#aaa"
        };
        var B = {
            template:"#bbb",
            methods:{
                send(){
                    vm.$emit("sendB",this.b);
                }
            },
            data(){
                return {b:"B数据"};
            }
        };
        var C = {
            template:"#ccc",
            methods:{
                send(){
                    vm.$emit("sendC",this.c);
                }
            },
            data(){
                return {a:"",b:"",c:"C数据"};
            },

            mounted(){
                vm.$on("sendA",function (daA) {
                    this.a = daA;
                }.bind(this));
                vm.$on("sendB",function (daB) {
                    this.b = daB;
                }.bind(this));
                vm.$on("sendC",function (da) {
                    this.a = da;
                    this.b = da;
                }.bind(this));
            }
        };

        new Vue({
            el:".box",
            components:{
                aaa:A,
                bbb:B,
                ccc:C
            }
        })
    </script>

broadcast和dispatch被弃

debounce    废弃
改用    ->   lodash的_.debounce(fn,时间)

vue动画

<head>
    <script src="../vue1.0.js"></script>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .anim-transition{
            transition: 1s all ease;
        }
        .anim-enter{
            opacity: 0;
        }
        .anim-leave{
            opacity: 0;
            transform: translateX(200px);
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="button" value="动画" @click="show=!show" >
        <div class="box1" v-show="show" transition="anim"></div>
    </div>
    <script>
        new Vue({
            el:".box",
            data:{
                show:false
            }
        })
    </script>
</body>

<head>
    <script src="./vue.js"></script>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .anim-enter-active,.anim-leave-active{
            transition: 1s all ease;
        }
        .anim-enter-active{
            opacity: 1;
            width: 300px;
            height: 300px;
            background-color: green;
        }
        .anim-enter{
            opacity: 0;
            width: 100px;
            height: 100px;
        }
        .anim-leave-active{
            opacity: 0;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="button" value="动画" @click="show=!show" >
        <transition name="anim" @before-enter="showMsg">
            <div class="box1" v-show="show"></div>
        </transition>
    </div>
    <script>
        new Vue({
            el:".box",
            data:{
                show:false
            },
            methods:{
                showMsg(){
                    alert("before-enter");
                }
            }
        })
    </script>
</body>

<div id="box">
    <input type="text" v-model="show">
    <transition-group enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
        <p v-show="show" v-for="(value,index) in lists" :key="1">{{value}}</p>
    </transition-group>
</div>
<script>
    new Vue({
        el:"#box",
        data:{
            show:"",
            list:["apple","banana","orange","pear"]
        },
        computed:{
            lists:function () {
                var arr = [];
                this.list.forEach(function (val) {
                    if (val.indexOf(this.show)!=-1){
                        arr.push(val);
                    }
                }.bind(this));
                return arr;
            }
        }
    })
</script>

vue2.0 路由:

关于路由的学习中文网址：http://router.vuejs.org/zh-cn/index.html
基本使用:
  1. 重定向
    之前 router.rediect 废弃了
    现在使用：{path:'*', redirect:'/home'}
<div class="box1">
    <router-link to="/home">主页</router-link>
    <router-link to="/news">新闻</router-link>
    <router-view></router-view>
</div>
<script>
    //1.首页、新闻组件
    var Home = {
        template:"<h2>我是主页</h2>"
    };
    var News = {
        template:"<h2>我是新闻</h2>"
    };

    //2.配置路由
    var routes = [
        {path:"/home",component:Home},
        {path:"/news",component:News},
        {path:"*",redirect:"/home"}
    ];

    //3.生成路由实例
    var router = new VueRouter({
        routes : routes    //可以只写成一个routes
    });

    //4.最后挂到vue上
    new Vue({
        router:router,
        el:".box1"
    })
</script>

传参：/user/strive/age/10
:id
:username
:age

<div class="box1">
    <router-link to="/home">主页</router-link>
    <router-link to="/user">用户</router-link>
    <router-view></router-view>
</div>
<script>
    //1、准备首页、新闻组件
    var Home = {
        template:"<h2>我是主页</h2>"
    };
    var Users = {
        template:"<div><h2>我是用户</h2>" +
        "<router-link to='/user/wang/age/10'>wang</router-link><br>" +
        "<router-link to='/user/ma/age/20'>ma</router-link><br>" +
        "<router-link to='/user/liu/age/30'>liu</router-link>" +
        "<router-view></router-view></div>"
    };
    var User = {
        template:"<h3>{{$route.params}}</h3>"
    };

    //2.配置路由
    var routes = [
        {path:"/home",component:Home},
        {path:"/user",component:Users,children:[
            {path:':userName/age/:age',component:User}
        ]},
        {path:"*",component:Home},
    ];

    //3.生成路由实例
    var router = new VueRouter({
        routes
    });

    //4.最后挂到vue上
    new Vue({
        router,
        el:".box1"
    });
</script>

路由实例方法:
    router.push({path:'home'});  //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个
    router.replace({path:'news'}) //替换路由，不会往历史记录里面添加

vue-cli脚手架

脚手架: vue-loader变化：
1.0  ->
new Vue({
  el: '#app',
  components:{App}
})

2.0->
new Vue({
  el: '#app',
  render: h => h(App)
})
vue2.0
vue-loader和vue-router配合

多做项目

444

<div style="display:none">
vue问题:
论坛
http://bbs.zhinengshe.com
</div>

elementUI:
按需加载相应组件: √

mint-ui -> 移动端 ui库

  1. 下载
    npm install mint-ui -S

     -S
 --save

  2. 引入：
    import Vue from 'vue';
    import Mint from 'mint-ui';
    import 'mint-ui/lib/style.css'
    Vue.use(Mint);

     按需引入:
 import { Cell, Checklist } from 'minu-ui';
 Vue.component(Cell.name, Cell);
 Vue.component(Checklist.name, Checklist);

自定义vue全局组件：

vuex

vue仿手机新闻站

做项目基本流程：
一、规划组件结构：
二、编写对应路由
三、具体编写每个组件流程。
上一篇 下一篇

猜你喜欢

热点阅读