search

博客列表 >vue组件与路由

vue组件与路由

月光下，遗忘黑暗
月光下，遗忘黑暗原创
2021年04月17日 19:51:49651浏览

1.vue组件

（1）全局组件

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>全局组件</title>
  6. </head>
  7. <body>
  8. <div class="app">
  9.     <button-inc></button-inc>
  10. </div>
  11. <div class="root">
  12.     <button-inc></button-inc>
  13. </div>
  14. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  15. <script>
  16.     //全局组件，声明在Vue实例的外部，全局可见
  17.     //全局组件：在多个Vue实例中均有效，所以它是全局的
  18.     //不推荐使用全局，尽可能用局部组件
  19.     Vue.component('button-inc',({
  20.         template: `
  21.         <div><button @click="count++">点赞：{{count}}</button></div>
  22.         `,
  23.         data() {
  24.             return {
  25.                 count: 0
  26.             }
  27.         }
  28.     }))
  29.     new Vue({
  30.         el : '.app'
  31.     })
  32.     new Vue({
  33.         el : '.root'
  34.     })
  35. </script>
  36. </body>
  37. </html>

效果图

（2）局部组件

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>局部组件</title>
  6. </head>
  7. <body>
  8. <div class="app">
  9.     <hello></hello>
  10. </div>
  11. <div class="root">
  12.     <hello></hello>
  13. </div>
  14. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  15. <template id="hello">
  16.     <p>hello{{site}}</p>
  17. </template>
  18. <script>
  19.     const hello =   {
  20.         //可以将大段的html字符串写到html文档的template标签中，并用id进行关联
  21.         template : "#hello",
  22.             data(){
  23.             return {
  24.                 site:'world'
  25.             }
  26.         }
  27.     };
  28.     //局部组件必须声明在Vue实例中
  29.     new Vue({
  30.         el : '.app',
  31.         components : {
  32.             // 可以同时声明多个局部组件
  33.             //hello: 组件名称，它的值是一个对象
  34.             // hello : {
  35.             //     template : `<p>Hello {{site}}</p>`,
  36.             //     data(){
  37.             //         return {
  38.             //             site:'world'
  39.             //         }
  40.             //     }
  41.             // }
  42.             // hello : hello,
  43.             // 当属性值变量与属性名相同时，同在一个作用域中则可以省去值变量名称
  44.             hello,
  45.         }
  46.     });
  48. </script>
  49. </body>
  50. </html>

效果

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

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>传参：父组件 --》 向子组件</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  7. </head>
  8. <body>
  9.     <div class="app">
  10.     <btn-inc v-bind:my-name="username" :my-count="count"></btn-inc>
  11.     </div>
  12.     <script>
  13.         //父组件向自定义组件是通过自定义属性穿参
  14.         const vm = new Vue({
  15.             el : document.querySelector('.app'),
  16.             data() {
  17.                 return {
  18.                     username : '为China喝彩!!!',
  19.                     count : 0
  20.                 };
  21.             },
  22.             components : {
  23.                 'btn-inc' : {
  24.                     props:['myName','myCount'],
  25.                     template : `
  26.                     <div class="app">
  27.                         <button @click="num++">点赞： {{num}}</button>
  28.                         <span>{{myName}}</span>
  29.                     </div>
  30.                     `,
  31.                     data() {
  32.                         return {
  33.                             num : this.myCount,
  34.                         }
  35.                     },
  36.                 }
  37.             }
  38.         })
  39.     </script>
  40. </body>
  41. </html>

效果

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

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>传参：子组件 --》 向父组件</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  7. </head>
  8. <body>
  9. <div class="app">
  10.     <btn-inc v-bind:my-name="username" :my-count="count" @click-count="handle"></btn-inc>
  11. </div>
  12. <script>
  13.     //子组件向父组件传参是通过一个"同名事件"来传参
  14.     //组件之间的传参，理论来说是单向的
  15.     const vm = new Vue({
  16.         el : document.querySelector('.app'),
  17.         data() {
  18.             return {
  19.                 username : '为China女足喝彩!!!',
  20.                 count : 0
  21.             };
  22.         },
  23.         //局部组件
  24.         components : {
  25.             'btn-inc' : {
  26.                 props:['myName','myCount'],
  27.                 // 必须关联绑定click-count标签
  28.                 template : `
  29.                     <div class="app">
  30.                         <button @click="$emit('click-count',1)">点赞： {{myCount}}</button>
  31.                         <span>{{myName}}</span>
  32.                     </div>
  33.                     `,
  34.             }
  35.         },
  36.         methods : {
  37.             handle(value) {
  38.                this.count += value;
  39.                this.username = '今天是个好日子';
  40.             }
  41.         }
  42.     })
  44.     //总结：
  45.     //1.父组件 --->子组件：   自定义属性 ：name， :count
  46.     //2.子组件 --->父组件：   自定义事件方法：
  47.     //子组件：$emit('父组件中的自定义方法'，'附加参数值')
  48.     //父组件：@父组件中的自定义方法='事件方法'
  49. </script>
  50. </body>
  51. </html>

效果

2.路由

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

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>基于锚点实现的路由模式</title>
  6.     <link rel="stylesheet" href="0416/style.css">
  7. <!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
  9. </head>
  10. <body>
  11. <!--选项卡-->
  12. <div class="container">
  13. <!--    导航-->
  14.     <nav>
  15.         <a href="#/list1">国际新闻</a>
  16.         <a href="#/list2">国内新闻</a>
  17.     </nav>
  18. <!--    这里显示与导航对应的内容-->
  19.     <div class="route-view">
  21.     </div>
  22. </div>
  23. <script>
  24.   //  console.log(location.hash);
  25.     let list1 = `
  26.         <ul>
  27.             <li><a href="">新华国际时评:合则用不合则弃,看清美式“潜规则”本质</a></li>
  28.             <li><a href="">新华国际时评:合则用不合则弃,看清美式“潜规则”本质</a></li>
  29.             <li><a href="">新华国际时评:合则用不合则弃,看清美式“潜规则”本质</a></li>
  30.         </ul>
  31.     `;
  32.     let list2 = `
  33.        <ul>
  34.             <li><a href="">重庆交通大学与四川藏区高速公路有限责任公司共建研究中心</a></li>
  35.             <li><a href="">重庆交通大学与四川藏区高速公路有限责任公司共建研究中心</a></li>
  36.             <li><a href="">重庆交通大学与四川藏区高速公路有限责任公司共建研究中心</a></li>
  37.         </ul>
  38.     `;
  40.     const routeView = document.querySelector('.route-view');
  41.     console.log(window.location.href);
  43.     // onhashchange:监听url中的锚点的变化
  44.     window.addEventListener('hashchange',show);
  45.     //window.addEventListener('load',show);
  46.   //推荐DOMContentLoaded 代替load，因为创建好dom树就触发了
  47.     window.addEventListener('DOMContentLoaded',show);
  48.     function show() {
  49.         console.log(location.hash);
  50.         switch (location.hash) {
  51.             case '#/list1':
  52.                 routeView.innerHTML = list1;
  53.                 return;
  54.             case '#/list2' :
  55.                 routeView.innerHTML = list2;
  56.                 return;
  57.             default :
  58.                 routeView.innerHTML = list1;
  59.         }
  60.     }
  61. </script>
  62. </body>
  63. </html>

效果

（2）vue路由原理与实现

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue路由原理与实现</title>
  6.     <link rel="stylesheet" href="0416/style.css">
  7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8.     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  10. </head>
  11. <body>
  12. <!--选项卡-->
  13. <div class="container">
  14.     <!--    导航-->
  15.     <nav>
  16. <!--        router-link:就是a标签-->
  17. <!--        to : a 标签中的href-->
  18.     <router-link to="/list1">国际新闻</router-link>
  19.     <router-link to="/list2">国内新闻</router-link>
  20.     </nav>
  21.     <!--    这里显示与导航对应的内容-->
  22.     <router-view class="route-view"></router-view>
  23. </div>
  26. <script>
  27.     //  console.log(location.hash);
  28.     let list1 = {
  29.         template : `
  30.         <ul>
  31.             <li><a href="">新华国际时评:合则用不合则弃,看清美式“潜规则”本质</a></li>
  32.             <li><a href="">新华国际时评:合则用不合则弃,看清美式“潜规则”本质</a></li>
  33.             <li><a href="">新华国际时评:合则用不合则弃,看清美式“潜规则”本质</a></li>
  34.         </ul>
  35.     `,};
  36.     let list2 = {template :`
  37.        <ul>
  38.             <li><a href="">重庆交通大学与四川藏区高速公路有限责任公司共建研究中心</a></li>
  39.             <li><a href="">重庆交通大学与四川藏区高速公路有限责任公司共建研究中心</a></li>
  40.             <li><a href="">重庆交通大学与四川藏区高速公路有限责任公司共建研究中心</a></li>
  41.         </ul>
  42.     `,};
  43.     // 1.创建路由对象
  44.     const router = new VueRouter({
  45.         //路由配置
  46.         routes : [
  47.             //每一个路由参数都是一个对象，每一个对象对应着一个路由
  48.             {path : "/list1",component:list1},
  49.             {path : "/list2",component:list2},
  50.         ],
  51.     });
  52.     // 2.注册路由
  53.     new Vue({
  54.         // el : '.container',
  55.         router,
  56.     }).$mount('.container')
  58. </script>
  59. </body>
  60. </html>

效果图

上一条：实例演示flex容器中的四个属性的功能，参数，以及作用下一条：PHP获取访问URL指定参数值
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议