《VUE-REVIEW》 day4

day04_01 路由的基本使用

<head>

<title>Document</title>

</head>

<body>

<router-link to="/login">登陆</router-link>

<router-link to="/register">注册</router-link>

<router-view></router-view>

</div>

var login = {

template : '<h1>登陆组件</h1>'

}

var register = {

template : '<h1>注册组件</h1>'

}

//创建一个路由对象，并且可以向构造函数传一个配置对象

var routerObj = new VueRouter({

//路由配置规则

routes:[

//每个路由规则都是单独的对象，每个对象中有两个必须的属性

//属性1:path

//属性2：component

{path:'/login',component:login},

{path:'/register',component:register}

]

})

var vm = new Vue({

el: '#app',

data: {},

methods: {},

router:routerObj

});

</script>

</body>

day04_02 路由的重定向

在路由规则中添加如下设置：

//用户一开始打开页面时，默认重定向到登陆页面
{path:'/',redirect:'/login'},

day04_03 设置选中路由高亮

1、用router-link 替换 a标签

2、vueRouter在router-link标签上提供了router-link-active这个class名称，可以根据这个class名称来设置元素样式

<router-link to="/login">登陆</router-link>
<router-link to="/regist">注册</router-link>

<style>
    /* vueRouter在router-link标签上提供了router-link-active这个class名称，可以根据这个class名称来设置元素样式 */
    .router-link-active{
        font-size: 80px;
        background-color: blue;
    }
</style>

day04_04 设置高亮切换时添加动画

1、给router-view 添加动画属性

<transition mode="out-in">
     <router-view></router-view>
</transition>

2、style中添加动画样式

.v-enter,
.v-leave-to{
    opacity: 0;
    transform: translateX(100px);
}
.v-enter-active,
.v-leave-active{
     transition: all 0.5s ease;
}

最终效果：

day04_05 路由传参-使用query方式传递参数

1、在登陆路由请求中添加 id 和 name参数

<router-link to="/login?id=10&name=张三">登陆</router-link>

2、在子组件模板在页面上渲染完以后打印一下当前路由对象

created(){
      console.log(this.$route)
}

3、会发现route 对象中有query对象中存放了请求的参数数据。

4、可以通过路由对象中的query对象传递参数，将参数在子组件模板中打印出来，代码如下

var login = {
    template :'<h1>登陆模板----{{this.$route.query.id}}------{{this.$route.query.name}}</h1>', 
　　created(){ 
　　　　console.log(this.$route.query.id) 
　　} 
}

打印结果:

day04_06 路由传参-使用params方式传递参数

1、修改路由规则

var routerObj = new VueRouter({
            routes:[
                {path:'/login/:id/:name',component:login}
            ]
        })

2、在登陆路由请求中按照对应的规则添加 id 和 name参数

<router-link to="/login/10/张三">登陆</router-link>

3、在子组件模板中获取参数

template :'<h1>登陆模板----{{this.$route.params.id}}---{{this.$route.params.name}}</h1>'

效果如下：

day04_07 路由-使用chiledren属性实现路由嵌套

<body>
    <div id="app">
         <router-link to="/sy">进入首页</router-link>
        <router-view></router-view>
    </div>
    <template id = 'temp'>
        <div>
            <h1>-----------------欢迎来到首页---------------</h1>
            <router-link to="/sy/login">登陆</router-link>
            <router-link to="/sy/regist">注册</router-link>
            <router-view></router-view>
        </div>
    </template>
    <script>
        var sy = {
            template:'#temp'
        }  
        
        var login = {
            template:'<h1>===欢迎来到登陆页面====</h1>'
        } 
        var regist = {
            template:'<h1>===欢迎来到到注册页面====</h1>'
        } 
        var routerObj = new VueRouter({
            routes:[
                {path:'/sy',component:sy,
                    children:[
                        {path:'/sy/login',component:login},
                        {path:'/sy/regist',component:regist}
                    ]
                }
                
            ]
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router:routerObj
        });
    </script>
</body>

效果如下：

day04_08 watch属性的使用

1、watch属性可以监听dom元素数据的改变

    <body>
        <div id="app">
            <input type="text" v-model="a">+
            <input type="text" v-model="b"> =
            <input type="text" v-model="c">
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    a:'',
                    b:'',
                    c:''
                },
                methods:{

                },
                //watch属性可以监听dom元素数据的改变
                watch:{
                    a:function(){
                        this.c = this.a + this.b
                    },
                    b:function(){
                        this.c = this.a + this.b
                    }
                }
            })
        </script>
    </body>

2、watch属性来监听路由地址的变化

watch的好处:watch还可以监听到非dom元素的改变，使用keyup事件只能用于dom元素的改变

    <body>
        <div id="app">
            <router-link to="/login">登陆</router-link>
            <router-link to="/register">注册</router-link>

            <router-view></router-view>
        </div>
        <script>
            //创建子组件
            var login = {
                template:'<h1>这是登陆模板</h1>'
            }
            var register = {
                template:'<h1>这是注册模板</h1>'
            }
            //创建路由对象
            var routerObj = new VueRouter({
                routes:[
                    {path:'/',redirect:'/login'},
                    {path:'/login',component:login},
                    {path:'/register',component:register}
                ]
            })
            var vm = new Vue({
                el: '#app',
                data: {

                },
                methods:{

                },
                router:routerObj,
                //使用watch属性来监听路由地址的变化
                //watch的好处:watch可以监听到非dom元素的改变，使用keyup事件只能用于dom元素的改变
                watch:{
                    //this.$route.path 可以查看
                    '$route.path':function(newVal,oldVal){
                        console.log('监听到路由地址的改变，新地址是：'+newVal+'旧地址是：'+oldVal)
                    }
                }
            })
        </script>
    </body>

day04_09 computed计算属性的使用和3个特点

计算属性对象的使用：

    <body>
        <div id="app">
            <input type="text" v-model="a">+
            <input type="text" v-model="b">=
            <input type="text" v-model="c">
            
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    a:'',
                    b:''
                },
                methods:{

                },
                //计算属性对象
                computed:{
                    //在computed中可以定义一些属性，这些属性叫做【计算属性】，计算属性的本质是
                    //一个方法，但是我们在使用这些计算属性的时候需要当作一个属性来使用，不会当作
                    //方法去调用

                    //注意1：计算属性，在引用的时候一定不要加（），直接当作普通属性去调用、
                    //注意2：计算属性的function内部的数据一旦发生变化，就会立即重新计算这个 计算属性的值
                    //注意3：计算属性的求值结果会被缓存起来，方便下次直接使用，如果计算属性方法中所用的数据
                    //      都没发生变化，则不会重新对计算属性进行求值
                    c:function(){
                        return this.a+this.b
                    }
                }
            })
        </script>
    </body>