08_生命周期.html 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="../vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="app" >
  10. <p id="content">{{message}}</p>
  11. </div>
  12. </body>
  13. <script>
  14. var jsonParam = {
  15. el: "#app",
  16. data: {
  17. message:"hello world"
  18. },
  19. methods:{
  20. },
  21. watch:{
  22. },
  23. // 1.实例创建之前
  24. "beforeCreate":function(){
  25. console.log("beforeCreate:"+this.message);
  26. },
  27. // 2.实例创建完成
  28. "created":function(){
  29. console.log("created:"+this.message);
  30. },
  31. // 3.数据挂载前
  32. "beforeMount":function(){
  33. console.log("beforeMount:"+document.getElementById("content").innerText);
  34. },
  35. // 4.数据已经挂载
  36. "mounted":function(){
  37. console.log("mounted:"+document.getElementById("content").innerText);
  38. },
  39. }
  40. var vue = new Vue(jsonParam);
  41. //watch 监听属性 属性变化
  42. //computed 计算属性 计算 价格
  43. //method 方法 事件
  44. </script>
  45. </html>