PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > Vue:1.Vue组件的注册与挂载流程,实例演示; 2. 路由原理与注册流程,实例演示;

Vue:1.Vue组件的注册与挂载流程,实例演示; 2. 路由原理与注册流程,实例演示;

JiaJieChen
JiaJieChen 原创
2021年04月22日 17:55:13 18507浏览

Vue:1.Vue组件的注册与挂载流程,实例演示; 2. 路由原理与注册流程,实例演示;

1.Vue组件的注册与挂载流程,实例演示

组件本质上就是一组自定义的标签,可以在html文档出现,这个自定义的标签,需要用户自定义的功能,作用,行为
组件一共分为三部:1. 创建组件,2. 注册组件,3. 挂载组件

实例演示·↓

自定义标签

  1. <div class="box">
  2. <username></username>
  3. </div>

①创建组件:Vue.extend

  1. const username = Vue.extend({
  2. template: `<h2> hello 同学们</h2>`,
  3. });

②注册组件:Vue.component

  1. Vue.component("username", username);

③挂载组件:new Vue({})

  1. new Vue({
  2. el: ".box",
  3. });

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Vue组件注册</title>
  8. </head>
  9. <body>
  10. <div class="box">
  11. <username></username>
  12. </div>
  13. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  14. <script>
  15. // 组件本质上就是一组自定义的标签,可以在html文档出现
  16. // 这个自定义的标签,需要用户自定义的功能,作用,行为
  17. // 组件是可复用的vue实例,
  18. // 1. 创建组件
  19. const username = Vue.extend({
  20. template: `<h2> hello 同学们</h2>`,
  21. });
  22. // 2. 注册组件
  23. Vue.component("username", username);
  24. // 3. 挂载组件
  25. new Vue({
  26. el: ".box",
  27. });
  28. </script>
  29. </body>
  30. </html>

④全局组件:声明在Vue实例的外部,全局可见

第二个vue实例,共享了全局组件的功能,在多个Vue实例中均有效,所以它是全局的,以后推荐不要用了, 尽可能用:局部组件

代码块

  1. <script>
  2. // 全局组件: 声明在Vue实例的外部,全局可见
  3. // 全局组件: 在多个Vue实例中均有效,所以它是全局的
  4. Vue.component("buttonZdy", {
  5. template: `
  6. <div>
  7. <span >朱老师</span> <button @click='count++'>点赞: {{count}}</button>
  8. </div>
  9. `,
  10. data() {
  11. return {
  12. count: 0,
  13. };
  14. },
  15. });
  16. //第一个vue实例
  17. new Vue({
  18. el: ".box",
  19. });
  20. //第二个vue实例,共享了全局组件的功能
  21. new Vue({
  22. el: ".class",
  23. });
  24. </script>

⑤局部组件:局部组件必须声明在Vue的实例中

局部组件不能共享,系统会报错,

代码块

  1. <script>
  2. //局部组件
  3. new Vue({
  4. el: ".box",
  5. components: {
  6. //components 可以同时声明多个局部组件
  7. username: {
  8. template: `<p style='color:blue'>我是{{text}}组件</p>`,
  9. data() {
  10. return {
  11. text: "局部",
  12. };
  13. },
  14. },
  15. },
  16. });
  17. new Vue({
  18. el: ".item",
  19. });
  20. </script>

⑥传参: 父组件 向 子组件

父组件向子组件传参是通过自定义属性传参,props[]: 子组件接收自定义属性

代码块

  1. <script>
  2. //父组件向子组件传参是通过自定义属性传参
  3. new Vue({
  4. el: "#root",
  5. data() {
  6. return {
  7. username: "日本向大海投向核废水",
  8. count: 0,
  9. };
  10. },
  11. //局部子组件
  12. components: {
  13. btnIon: {
  14. //props 子组件接收自定义属性:username-a :count-a
  15. props: ["usernameA", "countA"],
  16. template: `
  17. <div>
  18. <button @click='num++'>鄙视:{{num}}</button>
  19. <span>{{usernameA}}</span>
  20. </div>
  21. `,
  22. data() {
  23. return {
  24. num: this.countA,
  25. };
  26. },
  27. },
  28. },
  29. });
  30. </script>

⑥传参: 子组件 向 父组件

子组件向父组件传参是通过声明一个”同名事件”来实现,$emit() 实现对父组件进行呼叫传递参数

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>传参: 父组件 向 子组件</title>
  8. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  9. </head>
  10. <body>
  11. <div id="root">
  12. <!-- 自定义属性 :username-a :count-a -->
  13. <!-- 自定义方法:click-count 子组件给夫组件传递参数 -->
  14. <btn-ion
  15. :username-a="username"
  16. :count-a="count"
  17. @click-count="data"
  18. ></btn-ion>
  19. </div>
  20. <script>
  21. //父组件向子组件传参是通过自定义属性传参
  22. new Vue({
  23. el: "#root",
  24. data() {
  25. return {
  26. username: "日本向大海投向核废水",
  27. count: 0,
  28. };
  29. },
  30. //局部子组件
  31. components: {
  32. btnIon: {
  33. //props 子组件接收自定义属性:username-a :count-a
  34. props: ["usernameA", "countA"],
  35. //$emit 实现对父组件进行呼叫传递参数
  36. template: `
  37. <div>
  38. <button @click="$emit('click-count',1)">鄙视:{{countA}}</button>
  39. <span>{{usernameA}}</span>
  40. </div>
  41. `,
  42. },
  43. },
  44. //methods 创建方法
  45. methods: {
  46. data(value) {
  47. this.count += value;
  48. },
  49. },
  50. });
  51. </script>
  52. </body>
  53. </html>

2. 路由原理与注册流程,实例演示

①路由原理:原生ES6锚点选项卡,实例

代码块:可看注释

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>锚点ES6选项卡</title>
  8. <style>
  9. a {
  10. text-decoration: none;
  11. color: #666;
  12. font-weight: bold;
  13. }
  14. a:hover {
  15. color: lightcoral;
  16. font-size: 1.1em;
  17. }
  18. li {
  19. list-style: none;
  20. margin: 10px;
  21. }
  22. li > a {
  23. color: white;
  24. font-weight: bolder;
  25. }
  26. .box {
  27. margin: 40px auto;
  28. background-color: lightseagreen;
  29. height: 400px;
  30. width: 500px;
  31. }
  32. .box > nav {
  33. background-color: lightskyblue;
  34. height: 40px;
  35. display: flex;
  36. justify-content: space-evenly;
  37. align-items: center;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <!-- 选项卡 -->
  43. <div class="box">
  44. <!-- 选项卡导航区 -->
  45. <nav>
  46. <a href="#/list1">省内新闻</a>
  47. <a href="#/list2">国内新闻</a>
  48. <a href="#/list3">国际新闻</a>
  49. </nav>
  50. <!-- 选项卡内容区 -->
  51. <div class="content">
  52. <!-- <ul>
  53. <li><a href="">五一出行将迎来“史上最堵”?江西避堵</a></li>
  54. <li><a href="">“五一”假期临近 红色旅游成今年热门</a></li>
  55. <li><a href="">江西已连续419天无新增本地确诊病例报告</a></li>
  56. </ul> -->
  57. </div>
  58. </div>
  59. <script>
  60. //省内新闻
  61. let list1 = `
  62. <ul>
  63. <li><a href="">五一出行将迎来“史上最堵”?江西避堵</a></li>
  64. <li><a href="">“五一”假期临近 红色旅游成今年热门</a></li>
  65. <li><a href="">江西已连续419天无新增本地确诊病例报告</a></li>
  66. </ul>
  67. `;
  68. //国内新闻
  69. let list2 = `
  70. <ul>
  71. <li><a href="">外交部:敦促日方停止危害海洋环境的危险行径</a></li>
  72. <li><a href="">特斯拉事件女车主:我只想问为什么会刹车失灵</a></li>
  73. <li><a href="">习近平在清华大学考察</a></li>
  74. </ul>
  75. `;
  76. //国际新闻
  77. let list3 = `
  78. <ul>
  79. <li>
  80. <a href="">美国前副总统沃尔特·蒙代尔逝世 外交部:对他的逝世深表哀悼</a>
  81. </li>
  82. <li>
  83. <a href="">外交部:中方愿为印方控制疫情提供必要的支持和帮助</a>
  84. </li>
  85. <li><a href="">联合国秘书长呼吁国际社会共同努力使地球恢复健康</a></li>
  86. </ul>
  87. `;
  88. //拿到内容区域
  89. const Content = document.querySelector(".content");
  90. // hashchange: 监听url中的锚点的变化
  91. window.addEventListener("hashchange", show);
  92. //页面创建好后直接加载
  93. window.addEventListener("DOMContentLoaded", show);
  94. //创建show方法
  95. function show() {
  96. console.log(location.hash);
  97. //hash等于url 中的 锚点
  98. //如果location.hash,锚点等于list变量则添加到页面中去
  99. switch (location.hash) {
  100. case "#/list1":
  101. Content.innerHTML = list1;
  102. return;
  103. case "#/list2":
  104. Content.innerHTML = list2;
  105. return;
  106. case "#/list3":
  107. Content.innerHTML = list3;
  108. return;
  109. default:
  110. Content.innerHTML = list1;
  111. return;
  112. }
  113. }
  114. </script>
  115. </body>
  116. </html>

②路由原理:Vue选项卡,实例

代码块:可看注释

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>锚点ES6选项卡</title>
  8. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  9. <script src="vue-router-dev/dist/vue-router.js"></script>
  10. <style>
  11. a {
  12. text-decoration: none;
  13. color: #666;
  14. font-weight: bold;
  15. }
  16. a:hover {
  17. color: lightcoral;
  18. font-size: 1.1em;
  19. }
  20. li {
  21. list-style: none;
  22. margin: 10px;
  23. }
  24. li > a {
  25. color: white;
  26. font-weight: bolder;
  27. }
  28. .box {
  29. margin: 40px auto;
  30. background-color: lightseagreen;
  31. height: 400px;
  32. width: 500px;
  33. }
  34. .box > nav {
  35. background-color: lightskyblue;
  36. height: 40px;
  37. display: flex;
  38. justify-content: space-evenly;
  39. align-items: center;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <!-- 选项卡 -->
  45. <div class="box">
  46. <!-- 选项卡导航区 -->
  47. <nav>
  48. <!-- router-link: 就是a标签 -->
  49. <!-- to : a 标签 中 的href -->
  50. <router-link to="/list1">省内新闻</router-link>
  51. <router-link to="/list2">国内新闻</router-link>
  52. <router-link to="/list3">国际新闻</router-link>
  53. <!-- 选项卡内容区 -->
  54. </nav>
  55. <!-- router-view 内容显示标签 -->
  56. <router-view class="text"></router-view>
  57. </div>
  58. <script>
  59. //省内新闻
  60. let list1 = {
  61. template: `
  62. <ul>
  63. <li><a href="">五一出行将迎来“史上最堵”?江西避堵</a></li>
  64. <li><a href="">“五一”假期临近 红色旅游成今年热门</a></li>
  65. <li><a href="">江西已连续419天无新增本地确诊病例报告</a></li>
  66. </ul>
  67. `,
  68. };
  69. //国内新闻
  70. let list2 = {
  71. template: `
  72. <ul>
  73. <li><a href="">外交部:敦促日方停止危害海洋环境的危险行径</a></li>
  74. <li><a href="">特斯拉事件女车主:我只想问为什么会刹车失灵</a></li>
  75. <li><a href="">习近平在清华大学考察</a></li>
  76. </ul>
  77. `,
  78. };
  79. //国际新闻
  80. let list3 = {
  81. template: `
  82. <ul>
  83. <li>
  84. <a href="">美国前副总统沃尔特·蒙代尔逝世 外交部:对他的逝世深表哀悼</a>
  85. </li>
  86. <li>
  87. <a href="">外交部:中方愿为印方控制疫情提供必要的支持和帮助</a>
  88. </li>
  89. <li><a href="">联合国秘书长呼吁国际社会共同努力使地球恢复健康</a></li>
  90. </ul>
  91. `,
  92. };
  93. //1. VueRouter 创建路由对象
  94. const router = new VueRouter({
  95. //routes 路由配置 必须是这个属性
  96. routes: [
  97. // 每一个路由参数都是一个对象,每一个对象对应着一个路由
  98. { path: "/list1", component: list1 },
  99. { path: "/list2", component: list2 },
  100. { path: "/list3", component: list3 },
  101. ],
  102. });
  103. // 2. 注册路由
  104. new Vue({
  105. //挂载点
  106. el: ".box",
  107. // 注册路由
  108. router,
  109. });
  110. </script>
  111. </body>
  112. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议