经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
Vue.js组件的使用
来源:cnblogs  作者:策马抢  时间:2021/5/6 17:56:30  对本文有异议

Vue.js组件的使用

一.组件

  组件是可复用的vue实例,可分为局部组件和全局组件。

二.组件入门小案例

  要求定义一个组件”one“,并重复使用它。

2.1.代码实例

  1. 1 <html lang="en">
  2. 2 <head>
  3. 3 <meta charset="UTF-8">
  4. 4 <title>vue局部组件和全局组件</title>
  5. 5 <script src="./js/vue.min.js"></script>
  6. 6 </head>
  7. 7 <body>
  8. 8 <div id="app">
  9. 9 <one></one>
  10. 10 <one></one>
  11. 11 <one></one>
  12. 12 <one></one>
  13. 13 </div>
  14. 14 </body>
  15. 15 </html>
  16. 16 <script>
  17. 17 //创建vue实例对象
  18. 18 var vm = new Vue({
  19. 19 //挂载点
  20. 20 el:"#app",
  21. 21 //局部组件需要注册
  22. 22 components:{
  23. 23 //注册局部组件
  24. 24 one:{
  25. 25 //局部组件模板
  26. 26 template:"<ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>"
  27. 27 }
  28. 28 }
  29. 29 })
  30. 30 </script>

2.2.执行效果

 

三.将组件的模板写在<body>标签内

3.1.实例代码

  1. 1 <html lang="en">
  2. 2 <head>
  3. 3 <meta charset="UTF-8">
  4. 4 <title>vue局部组件和全局组件</title>
  5. 5 <script src="./js/vue.min.js"></script>
  6. 6 </head>
  7. 7 <body>
  8. 8 <div id="app">
  9. 9 <one></one>
  10. 10 <comtwo></comtwo>
  11. 11 </div>
  12. 12 <template id="two">
  13. 13 <div>
  14. 14 <p>
  15. 15 <ul>
  16. 16 <li>吃饭2</li>
  17. 17 <li>睡觉2</li>
  18. 18 <li>打豆豆2</li>
  19. 19 </ul>
  20. 20 </p>
  21. 21 </div>
  22. 22 </template>
  23. 23 </body>
  24. 24 </html>
  25. 25 <script>
  26. 26 //创建vue实例对象
  27. 27 var vm = new Vue({
  28. 28 //挂载点
  29. 29 el:"#app",
  30. 30 //局部组件需要注册
  31. 31 components:{
  32. 32 //注册局部组件
  33. 33 one:{
  34. 34 //局部组件模板
  35. 35 template:"<ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>"
  36. 36 },
  37. 37 comtwo:{
  38. 38 template:"#two"
  39. 39 }
  40. 40 }
  41. 41 })
  42. 42 </script>

3.2.效果图

 

四.局部组件数据的使用

  各个局部组件的数据是相互独立的;实现点击某个组件,相应的该组件内容数字+1的功能

4.1.实例代码

  1. 1 <html lang="en">
  2. 2 <head>
  3. 3 <meta charset="UTF-8">
  4. 4 <title>vue局部组件和全局组件</title>
  5. 5 <script src="./js/vue.min.js"></script>
  6. 6 <style>
  7. 7 *{
  8. 8 margin: 0px;
  9. 9 padding: 0px;
  10. 10 }
  11. 11 .myp{
  12. 12 width: 100px;
  13. 13 height: 100px;
  14. 14 background-color: greenyellow;
  15. 15 float:left;
  16. 16 margin-left:12px;
  17. 17 }
  18. 18 </style>
  19. 19 </head>
  20. 20 <body>
  21. 21 <div id="app">
  22. 22 <one></one>
  23. 23 <two></two>
  24. 24 <three></three>
  25. 25 <three></three>
  26. 26 <three></three>
  27. 27 </div>
  28. 28 <template id="two">
  29. 29 <div>
  30. 30 <p>
  31. 31 <ul>
  32. 32 <li>吃饭2</li>
  33. 33 <li>睡觉2</li>
  34. 34 <li>打豆豆2</li>
  35. 35 </ul>
  36. 36 </p>
  37. 37 </div>
  38. 38 </template>
  39. 39 <template id="three">
  40. 40 <p class="myp" @click="add">{{msg}}</p>
  41. 41 </template>
  42. 42 </body>
  43. 43 </html>
  44. 44 <script>
  45. 45 //创建vue实例对象
  46. 46 var vm = new Vue({
  47. 47 //挂载点
  48. 48 el:"#app",
  49. 49 //局部组件需要注册
  50. 50 components:{
  51. 51 //注册局部组件
  52. 52 one:{
  53. 53 //局部组件模板
  54. 54 template:"<ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>"
  55. 55 },
  56. 56 two:{
  57. 57 template:"#two"
  58. 58 },
  59. 59 //局部组件三
  60. 60 three:{
  61. 61 template:"#three",
  62. 62 //组件数据
  63. 63 data(){
  64. 64 return{
  65. 65 msg:1
  66. 66 }
  67. 67 },
  68. 68 methods:{
  69. 69 add(){
  70. 70 this.msg++;
  71. 71 }
  72. 72 }
  73. 73 }
  74. 74 }
  75. 75 })
  76. 76 </script>

4.2.效果图

 

 5.全局组件

  可以在任何地方使用的组件;全局组件需要通过vue的属性component去创建;

5.1.实例代码

  1. 1 <html lang="en">
  2. 2 <head>
  3. 3 <meta charset="UTF-8">
  4. 4 <title>vue局部组件和全局组件</title>
  5. 5 <script src="./js/vue.min.js"></script>
  6. 6 <style>
  7. 7 *{
  8. 8 margin: 0px;
  9. 9 padding: 0px;
  10. 10 }
  11. 11 .myp{
  12. 12 width: 100px;
  13. 13 height: 100px;
  14. 14 background-color: greenyellow;
  15. 15 float:left;
  16. 16 margin-left:12px;
  17. 17 }
  18. 18 </style>
  19. 19 </head>
  20. 20 <body>
  21. 21 <div id="app">
  22. 22 <one></one>
  23. 23 <two></two>
  24. 24 <three></three>
  25. 25 <three></three>
  26. 26 <three></three>
  27. 27 <four></four>
  28. 28 </div>
  29. 29 <template id="two">
  30. 30 <div>
  31. 31 <p>
  32. 32 <ul>
  33. 33 <li>吃饭2</li>
  34. 34 <li>睡觉2</li>
  35. 35 <li>打豆豆2</li>
  36. 36 </ul>
  37. 37 <four></four>
  38. 38 </p>
  39. 39 </div>
  40. 40 </template>
  41. 41 <template id="three">
  42. 42 <p class="myp" @click="add">{{msg}}</p>
  43. 43 </template>
  44. 44 <template id="four">
  45. 45 <p>么么哒~~~</p>
  46. 46 </template>
  47. 47 </body>
  48. 48 </html>
  49. 49 <script>
  50. 50 //vue的全局组件
  51. 51 //全局组件可以在任意地方使用,需要使用vue实例的component属性创建
  52. 52 Vue.component("four",{
  53. 53 template:"#four"
  54. 54 });
  55. 55 //创建vue实例对象
  56. 56 var vm = new Vue({
  57. 57 //挂载点
  58. 58 el:"#app",
  59. 59 //局部组件需要注册
  60. 60 components:{
  61. 61 //注册局部组件
  62. 62 one:{
  63. 63 //局部组件模板
  64. 64 template:"<ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>"
  65. 65 },
  66. 66 two:{
  67. 67 template:"#two"
  68. 68 },
  69. 69 //局部组件三
  70. 70 three:{
  71. 71 template:"#three",
  72. 72 //组件数据
  73. 73 data(){
  74. 74 return{
  75. 75 msg:1
  76. 76 }
  77. 77 },
  78. 78 methods:{
  79. 79 add(){
  80. 80 this.msg++;
  81. 81 }
  82. 82 }
  83. 83 }
  84. 84 }
  85. 85 })
  86. 86 </script>

5.2.效果图

 

原文链接:http://www.cnblogs.com/runner-up/p/14727919.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号