首页 > 博客列表 > vue组件与路由

博主信息

博文 41

粉丝 2

访问量 37568

专题推荐

更多>

1.vue组件

（1）全局组件

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局组件</title>
</head>
<body>
<div class="app">
    <button-inc></button-inc>
</div>
<div class="root">
    <button-inc></button-inc>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //全局组件，声明在Vue实例的外部，全局可见
    //全局组件：在多个Vue实例中均有效，所以它是全局的
    //不推荐使用全局，尽可能用局部组件
    Vue.component('button-inc',({
        template: `
        <div><button @click="count++">点赞：{{count}}</button></div>
        `,
        data() {
            return {
                count: 0
            }
        }
    }))
    new Vue({
        el : '.app'
    })
    new Vue({
        el : '.root'
    })
</script>
</body>
</html>

效果图

（2）局部组件

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部组件</title>
</head>
<body>
<div class="app">
    <hello></hello>
</div>
<div class="root">
    <hello></hello>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<template id="hello">
    <p>hello{{site}}</p>
</template>
<script>
    const hello =   {
        //可以将大段的html字符串写到html文档的template标签中，并用id进行关联
        template : "#hello",
            data(){
            return {
                site:'world'
            }
        }
    };
    //局部组件必须声明在Vue实例中
    new Vue({
        el : '.app',
        components : {
            // 可以同时声明多个局部组件
            //hello: 组件名称，它的值是一个对象
            // hello : {
            //     template : `<p>Hello {{site}}</p>`,
            //     data(){
            //         return {
            //             site:'world'
            //         }
            //     }
            // }
            // hello : hello,
            // 当属性值变量与属性名相同时，同在一个作用域中则可以省去值变量名称
            hello,
        }
    });
</script>
</body>
</html>

效果

（3）父组件 —>子组件传参

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>传参：父组件 --》 向子组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div class="app">
    <btn-inc v-bind:my-name="username" :my-count="count"></btn-inc>
    </div>
    <script>
        //父组件向自定义组件是通过自定义属性穿参
        const vm = new Vue({
            el : document.querySelector('.app'),
            data() {
                return {
                    username : '为China喝彩!!!',
                    count : 0
                };
            },
            components : {
                'btn-inc' : {
                    props:['myName','myCount'],
                    template : `
                    <div class="app">
                        <button @click="num++">点赞： {{num}}</button>
                        <span>{{myName}}</span>
                    </div>
                    `,
                    data() {
                        return {
                            num : this.myCount,
                        }
                    },
                }
            }
        })
    </script>
</body>
</html>

效果

（4）子组件 —>父组件传参

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>传参：子组件 --》 向父组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="app">
    <btn-inc v-bind:my-name="username" :my-count="count" @click-count="handle"></btn-inc>
</div>
<script>
    //子组件向父组件传参是通过一个"同名事件"来传参
    //组件之间的传参，理论来说是单向的
    const vm = new Vue({
        el : document.querySelector('.app'),
        data() {
            return {
                username : '为China女足喝彩!!!',
                count : 0
            };
        },
        //局部组件
        components : {
            'btn-inc' : {
                props:['myName','myCount'],
                // 必须关联绑定click-count标签
                template : `
                    <div class="app">
                        <button @click="$emit('click-count',1)">点赞： {{myCount}}</button>
                        <span>{{myName}}</span>
                    </div>
                    `,
            }
        },
        methods : {
            handle(value) {
               this.count += value;
               this.username = '今天是个好日子';
            }
        }
    })
    //总结：
    //1.父组件 --->子组件：   自定义属性 ：name， :count
    //2.子组件 --->父组件：   自定义事件方法：
    //子组件：$emit('父组件中的自定义方法'，'附加参数值')
    //父组件：@父组件中的自定义方法='事件方法'
</script>
</body>
</html>

效果

2.路由

（1）基于锚点的路由实现模式

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于锚点实现的路由模式</title>
    <link rel="stylesheet" href="0416/style.css">
<!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
</head>
<body>
<!--选项卡-->
<div class="container">
<!--    导航-->
    <nav>
        <a href="#/list1">国际新闻</a>
        <a href="#/list2">国内新闻</a>
    </nav>
<!--    这里显示与导航对应的内容-->
    <div class="route-view">
    </div>
</div>
<script>
  //  console.log(location.hash);
    let list1 = `
        <ul>
            <li><a href="">新华国际时评:合则用不合则弃,看清美式“潜规则”本质</a></li>
            <li><a href="">新华国际时评:合则用不合则弃,看清美式“潜规则”本质</a></li>
            <li><a href="">新华国际时评:合则用不合则弃,看清美式“潜规则”本质</a></li>
        </ul>
    `;
    let list2 = `
       <ul>
            <li><a href="">重庆交通大学与四川藏区高速公路有限责任公司共建研究中心</a></li>
            <li><a href="">重庆交通大学与四川藏区高速公路有限责任公司共建研究中心</a></li>
            <li><a href="">重庆交通大学与四川藏区高速公路有限责任公司共建研究中心</a></li>
        </ul>
    `;
    const routeView = document.querySelector('.route-view');
    console.log(window.location.href);
    // onhashchange:监听url中的锚点的变化
    window.addEventListener('hashchange',show);
    //window.addEventListener('load',show);
  //推荐DOMContentLoaded 代替load，因为创建好dom树就触发了
    window.addEventListener('DOMContentLoaded',show);
    function show() {
        console.log(location.hash);
        switch (location.hash) {
            case '#/list1':
                routeView.innerHTML = list1;
                return;
            case '#/list2' :
                routeView.innerHTML = list2;
                return;
            default :
                routeView.innerHTML = list1;
        }
    }
</script>
</body>
</html>

效果

（2）vue路由原理与实现

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue路由原理与实现</title>
    <link rel="stylesheet" href="0416/style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<!--选项卡-->
<div class="container">
    <!--    导航-->
    <nav>
<!--        router-link:就是a标签-->
<!--        to : a 标签中的href-->
    <router-link to="/list1">国际新闻</router-link>
    <router-link to="/list2">国内新闻</router-link>
    </nav>
    <!--    这里显示与导航对应的内容-->
    <router-view class="route-view"></router-view>
</div>
<script>
    //  console.log(location.hash);
    let list1 = {
        template : `
        <ul>
            <li><a href="">新华国际时评:合则用不合则弃,看清美式“潜规则”本质</a></li>
            <li><a href="">新华国际时评:合则用不合则弃,看清美式“潜规则”本质</a></li>
            <li><a href="">新华国际时评:合则用不合则弃,看清美式“潜规则”本质</a></li>
        </ul>
    `,};
    let list2 = {template :`
       <ul>
            <li><a href="">重庆交通大学与四川藏区高速公路有限责任公司共建研究中心</a></li>
            <li><a href="">重庆交通大学与四川藏区高速公路有限责任公司共建研究中心</a></li>
            <li><a href="">重庆交通大学与四川藏区高速公路有限责任公司共建研究中心</a></li>
        </ul>
    `,};
    // 1.创建路由对象
    const router = new VueRouter({
        //路由配置
        routes : [
            //每一个路由参数都是一个对象，每一个对象对应着一个路由
            {path : "/list1",component:list1},
            {path : "/list2",component:list2},
        ],
    });
    // 2.注册路由
    new Vue({
        // el : '.container',
        router,
    }).$mount('.container')
</script>
</body>
</html>

效果图

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

php之类与继承

2021-05-07 22:53:35

1.vue组件

（1）全局组件

（2）局部组件

（3）父组件 —>子组件 传参

（4）子组件 —>父组件 传参

2.路由

（1）基于锚点的路由实现模式

（2）vue路由原理与实现

（3）父组件 —>子组件传参

（4）子组件 —>父组件传参