经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue生命周期中的组件化你知道吗
来源:jb51  时间:2022/3/8 16:55:16  对本文有异议

引出生命周期

此时调用change,定时器回调修改opacity,数据修改,模板重新解析,再次调用change。

销毁流程

解绑(自定义)事件监听器

生命周期

生命周期总结

  1. <div id="root">
  2. <!-- <h2 :style="{opacity}">hello,{{name}}</h2> -->
  3. <h2 :style="{opacity:opacity}">hello,{{name}}</h2>
  4. <button @click="stop">click stop</button>
  5. <button @click="opacity = 1">opacity 1</button>
  6. </div>
  7. <script type="text/javascript">
  8. Vue.config.productionTip = false;
  9. new Vue({
  10. el: "#root",
  11. data: {
  12. name: "atguigu",
  13. opacity: 1,
  14. },
  15. methods: {
  16. stop(){
  17. this.$destroy();
  18. }
  19. },
  20. beforeDestroy() {
  21. clearInterval(this.timer);
  22. },
  23. //vue完成模板解析,并把初始的真实的dom元素放入页面后(挂载完毕),会调用该函数。
  24. mounted() {
  25. this.timer = setInterval(() => {
  26. this.opacity -= 0.01;
  27. if (this.opacity <= 0) { this.opacity = 1 }
  28. }, 16);
  29. },
  30. });
  31. </script>

组件化 

template:

整个root容器当作模板

会直接替换掉root,把template当作模板进行解析。 

 

 非单文件组件

data需要用函数式写法

  1. <div id="root">
  2. <h2>{{msg}}</h2>
  3. <!--组件标签-->
  4. <school>
  5. </school>
  6. <hr>
  7. <student>
  8. </student>
  9. <student>
  10. </student>
  11. <hello>
  12. </hello>
  13. </div>
  14. <div id="root2">
  15. </div>
  16. <script type="text/javascript">
  17. Vue.config.productionTip = false;
  18. //创建school组件
  19. const school = Vue.extend({
  20. template:`
  21. <div>
  22. <h2>schoolname:{{schoolname}}</h2>
  23. <h2>schoolage{{schoolage}}</h2>
  24. <button @click='show'>点击提示</button>
  25. </div>
  26. `,
  27. data(){
  28. return{
  29. schoolname: "atguigu",
  30. schoolage:20,
  31. }
  32. },
  33. methods: {
  34. show(){
  35. alert(this.schoolname);
  36. }
  37. },
  38. });
  39. //创建stu组件
  40. const student = Vue.extend({
  41. template:`
  42. <div>
  43. <h2>stuname:{{stuname}}</h2>
  44. <h2>stuage{{stuage}}</h2>
  45. </div>
  46. `,
  47. data(){
  48. return{
  49. stuname:'tom',
  50. stuage:18,
  51. }
  52. },
  53. });
  54. //创建hello组件
  55. const hello = Vue.extend({
  56. template:`
  57. <div>
  58. <h2>stuname:{{stuname}}</h2>
  59. <h2>stuage{{stuage}}</h2>
  60. </div>
  61. `,
  62. data(){
  63. return{
  64. stuname:'tom',
  65. stuage:18,
  66. }
  67. },
  68. });
  69. //全局注册组件
  70. Vue.component('hello',hello);
  71. new Vue({
  72. el: "#root",
  73. data:{
  74. msg:'this is msg'
  75. },
  76. //局部注册组件
  77. components:{
  78. school:school,
  79. student,
  80. }
  81. });
  82. </script>

 组件的几个注意点 

 组件的嵌套 

  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. <script type="text/javascript" src="../js/vue.js"></script>
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. <div id="root">
  12. </div>
  13. <script type="text/javascript">
  14. Vue.config.productionTip = false;
  15. //创建student组件
  16. const student = Vue.extend({
  17. template:`
  18. <div>
  19. <h2>stuname:{{stuname}}</h2>
  20. <h2>stuage{{stuage}}</h2>
  21. </div>
  22. `,
  23. data(){
  24. return{
  25. stuname:'tom',
  26. stuage:18,
  27. }
  28. },
  29. });
  30. //创建school组件
  31. const school = Vue.extend({
  32. template:`
  33. <div>
  34. <h2>schoolname:{{schoolname}}</h2>
  35. <h2>schoolage{{schoolage}}</h2>
  36. <button @click='show'>点击提示</button>
  37. <student></student>
  38. </div>
  39. `,
  40. data(){
  41. return{
  42. schoolname: "atguigu",
  43. schoolage:20,
  44. }
  45. },
  46. methods: {
  47. show(){
  48. alert(this.schoolname);
  49. }
  50. },
  51. components:{
  52. student:student,
  53. }
  54. });
  55. //创建hello组件
  56. const hello = Vue.extend({
  57. template:`
  58. <div>
  59. <h2>{{msg}}</h2>
  60. </div>
  61. `,
  62. data(){
  63. return{
  64. msg:'hello!'
  65. }
  66. },
  67. });
  68. const app = Vue.extend({
  69. template:`
  70. <div>
  71. <hello></hello>
  72. <school></school>
  73. </div>
  74. `,
  75. components:{
  76. school,
  77. hello,
  78. }
  79. })
  80. //vue
  81. new Vue({
  82. template:'<app></app>',
  83. el: "#root",
  84. //局部注册组件
  85. components:{
  86. app,
  87. }
  88. });
  89. </script>
  90. </body>
  91. </html>

 VueComponent

每次调用extend,都返回了一个VueComponent

  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. <script type="text/javascript" src="../js/vue.js"></script>
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. <div id="root">
  12. <!--组件标签-->
  13. <school>
  14. </school>
  15. <hello>
  16. </hello>
  17. </div>
  18. <div id="root2">
  19. </div>
  20. <script type="text/javascript">
  21. Vue.config.productionTip = false;
  22. //创建school组件
  23. const school = Vue.extend({
  24. template: `
  25. <div>
  26. <h2>schoolname:{{schoolname}}</h2>
  27. <h2>schoolage{{schoolage}}</h2>
  28. <button @click='show'>点击提示</button>
  29. </div>
  30. `,
  31. data() {
  32. return {
  33. schoolname: "atguigu",
  34. schoolage: 20,
  35. }
  36. },
  37. methods: {
  38. show() {
  39. console.log(this)//VueComponent实例对象 vc
  40. alert(this.schoolname);
  41. }
  42. },
  43. });
  44. //创建hello组件
  45. const hello = Vue.extend({
  46. template: `
  47. <div>
  48. <h2>hello:{{hello}}</h2>
  49. </div>
  50. `,
  51. data() {
  52. return {
  53. hello: "hello",
  54. }
  55. },
  56. });
  57. console.log(school);//一个构造函数
  58. console.log(hello);//一个构造函数
  59. console.log(school === hello);//false
  60. new Vue({
  61. el: "#root",
  62. data: {
  63. },
  64. //局部注册组件
  65. components: {
  66. school: school,
  67. hello:hello,
  68. }
  69. });
  70. </script>
  71. </body>
  72. </html>

 Vue实例与组件实例

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注w3xue的更多内容!  

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

本站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号