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

2021年05月04日 17:41:26阅读数:33博客 / 冰雪琉璃 / css元素选择器

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>组件的创建与注册</title>
  8. <!-- 导入vue -->
  9. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  10. </head>
  11. <body>
  12. <!-- 挂载点:根组件 -->
  13. <div id="app">
  14. <child-component></child-component>
  15. </div>
  16. <script>
  17. //组件本质上就是一组自定义标签,可以在html文档中出现
  18. //1.创建组件
  19. const childComponent=Vue.extend({
  20. template:`<h2>"hello world"</h2>`,
  21. })
  22. //2.注册组件
  23. Vue.component("child-component",childComponent);
  24. //1,2两种二合一
  25. Vue.component("child-component",{
  26. template:`<h2>"hello vue.js"</h2>`,
  27. });
  28. //3挂载组件
  29. new Vue({
  30. el:"#app",
  31. });
  32. </script>
  33. </body>
  34. </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>vue点赞案例</title>
  8. <!-- 导入vue -->
  9. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  10. </head>
  11. <body>
  12. <div id="app"><button-inc></button-inc></div>
  13. <div id="app1"><button-inc></button-inc></div>
  14. <script>
  15. //全局组件:声明在vue实例的外部,全局可见
  16. Vue.component("button-inc",{
  17. template:`<div>
  18. <button @click="count">点赞:{{count}}</buuton>
  19. </div>`,
  20. data(){
  21. return {
  22. count:0,
  23. };
  24. },
  25. });
  26. new Vue({
  27. el:"#app",
  28. });
  29. // 在创建一个vue实例,这个实例接管的是第一个#app的挂载点,可以同时访问实现同一个效果
  30. new Vue({
  31. el:"#app1",
  32. });
  33. </script>
  34. </body>
  35. </html>

局部组件

  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>Document局部组件</title>
  8. <!-- 导入vue -->
  9. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  10. </head>
  11. <body>
  12. <!-- 挂载点 -->
  13. <div id="app"><hello></hello></div>
  14. <script>
  15. //局部组件必须声明在vue实例中
  16. new Vue({
  17. el:"#app",
  18. component:{
  19. //可以同时声明多个局部组件
  20. //hello:组件名称,它的值是一个对象。
  21. hello:{
  22. template:`<p>hello {{site}}</p>`,
  23. data(){
  24. return{
  25. site:"php中文网",
  26. };
  27. },
  28. },
  29. //当属性变量与属性名相同时,并且在同一个作用域中则可以省去值变量名称。
  30. hello:hello,
  31. },
  32. });//结束的用分号,没有结束的用逗号
  33. </script>
  34. </body>
  35. </html>
  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. <!-- 导入 -->
  9. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  10. </head>
  11. <body>
  12. <template id="hello">
  13. <p>hello{{site}}</p>
  14. </template>
  15. <script>
  16. const hello={
  17. //可以将大段的html字符串写到html文档中的template标签中,并且用id进行关联
  18. template:"#hello",
  19. data(){
  20. return{
  21. site:"php中文网",
  22. };
  23. },
  24. };
  25. </script>
  26. </body>
  27. </html>

传参:父组件向子组件

  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. <!-- 导入vue-->
  9. </head>
  10. <body>
  11. <div id="app">
  12. <btn-inc :my-name="username" :my-coun="count"></btn-inc>
  13. </div>
  14. <script>
  15. const vm=new Vue({
  16. el: document.querySelector("#app"),
  17. data(){
  18. return {
  19. username:"为中国女足合成",
  20. count:0,
  21. };
  22. },
  23. //局部组件
  24. components:{
  25. "btn-inc":{
  26. props:['myName','myCount'],
  27. template:`
  28. <div>
  29. <button @click="num++">点赞: {{num}}</button>
  30. <span>{{myName}}</span>
  31. </div>
  32. `,
  33. data(){
  34. return{
  35. num:this.myCount,
  36. };
  37. },
  38. },
  39. },
  40. });
  41. </script>
  42. </body>
  43. </html>

子组件向父组件传参

  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. <!-- 导入vue-->
  9. </head>
  10. <body>
  11. <div id="app">
  12. <btn-inc :my-name="username" :my-count="count" @click-count="handle"></btn-inc>
  13. </div>
  14. <script>
  15. const vm=new Vue({
  16. el:document.querySelector('#app'),
  17. data(){
  18. return{
  19. username:"为中国女足喝彩",
  20. count:0,
  21. };
  22. },
  23. //局部组件
  24. component:{
  25. "btn-inc":{
  26. props:['myName','myCount'],
  27. template:`
  28. <div>
  29. //从1开始点赞累加。
  30. <button @click="$emit('click-count',1)">点赞:{{myCount}}</button>
  31. <span>{{myName}}</span>
  32. </div>`,
  33. data(){
  34. return{
  35. num:this.myCount,
  36. };
  37. },
  38. },
  39. },
  40. methods:{
  41. handle(value){
  42. console.log(value);
  43. this.count+=value;
  44. this.username="dnfnd";
  45. },
  46. },
  47. });
  48. </script>
  49. </body>
  50. </html>

总结:

  1. 父组件向子组件传参:自定义属性:name,:count
  2. 子组件向父组件传参:自定义事件方法
  3. 子组件:$emit(‘父组件中的自定义的方法’,’附加参数值’)
  4. 父组件:@父组件中的自定义方法=”事件方法”

    路由实例演示

    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. <style>
    9. .container{
    10. width:30em;
    11. display: flex;
    12. flex-flow: column nowrap;
    13. }
    14. nav{
    15. height:2em;
    16. line-height: 2em;
    17. padding: 0 2em;
    18. background-color: aqua;
    19. display: flex;
    20. }
    21. nav a{
    22. padding: 0 0.5em;
    23. }
    24. nav a:hover{
    25. background-color: red;
    26. color: green;
    27. }
    28. .route-view{
    29. background-color: blanchedalmond;
    30. }
    31. .route-view ul li{
    32. line-height:1.5em;
    33. }
    34. .route-view ul li a:hover{
    35. color:cornflowerblue;
    36. }
    37. </style>
    38. </head>
    39. <body>
    40. <!-- 选项卡 -->
    41. <div class="container">
    42. <!-- 导航 -->
    43. <nav>
    44. <a href="#/list1">国际新闻</a>
    45. <a href="#/list2">国内新闻</a>
    46. </nav>
    47. <!-- 路由显示与导航对应的内容 -->
    48. <div class="route-view"></div>
    49. </div>
    50. <script>
    51. let list1=`
    52. <ul>
    53. <li><a href="">国际新闻</a></li>
    54. <li><a href="">国际新闻</a></li>
    55. <li><a href="">国际新闻</a></li>
    56. </ul>
    57. `;
    58. let list2=`
    59. <ul>
    60. <li><a href="">国内新闻</a></li>
    61. <li><a href="">国内新闻</a></li>
    62. <li><a href="">国内新闻</a></li>
    63. </ul>
    64. `;
    65. const routeView=document.querySelector(".route-view");
    66. //console.log(window.location.href);//url信息
    67. //hashchang:监听url中的瞄点的变化
    68. window.addEventListener("hashchange",show);
    69. //window.addEventListener("load",show),
    70. //推荐DOMContentLoaded代替load,因为只要创建好dom就可以触发了。
    71. window.addEventListener("DOMContentLoaded",show);
    72. function show(){
    73. console.log("location.hash");
    74. switch(location.hash){
    75. case "#/list1":
    76. routeView.innerHTML="list1";
    77. return;
    78. case "#/list2":
    79. routeView.innerHTML="list2";
    80. return;
    81. default:
    82. routeView.innerHTML="list1";
    83. break;
    84. }
    85. }
    86. </script>
    87. </body>
    88. </html>
批改状态:合格

老师批语:

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

全部评论

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

条评论
  • 博主信息
    冰雪琉璃
    博文
    24
    粉丝
    0
    评论
    0
    访问量
    1053
    积分:0
    P豆:60