Vue 引出声明周期 && 组件的基本使用

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8" />
 5         <title>Vue 引出生命周期</title>
 6         <script type="text/javascript" src="../js/vue.js"></script>
 7         <script type="text/javascript" src="../js/day.min.js"></script>
 8     </head>
 9     <body>
10         <!--
11             常用的声明周期：
12                 1.mounted：发送ajax请求、启动定时器、绑定自定义时间、订阅消息等初始化操作
13                 2.beforDestroy：清楚定时器、解除绑定事件、取消订阅消息等收尾工作
14             关于销毁Vue实例：
15                 1.销毁后借助Vue开发者工具看不到任何信息
16                 2.销毁后自定义事件会失效，但原生事件依然有效
17                 3.一般不会在beforeDestroy操作数据，因为及时操作数据，也不会再触发更新界面的流程了
18
19          -->
20         <div id="root" v-cloak>
21             <h2 :style="{opacity}">BaiYeShu</h2>
22             <button @click="opacity=1">透明度设置为1</button>
23             <button @click="stop">点我停止变换</button>
24         </div>
25     </body>
26
27     <script type="text/javascript" >
28         Vue.config.productionTip = false;//     阻止 vue 在启动时生成生产提示。
29
30         let vm = new Vue({
31             el: "#root",
32             data:{
33                 opacity: 1,
34             },
35             methods:{
36                 stop(e){
37                     if (this.timerID) {
38                         clearInterval(this.timerID);
39                         this.timerID = 0;
40                     }
41
42                 }
43             },
44             mounted(){
45                 this.timerID = setInterval(() => {
46                     this.opacity -= 0.1;
47                     if (this.opacity < 0) {
48                         this.opacity = 1;
49                     }
50                 },50);
51             },
52             beforeDestroy(){
53                 clearInterval(this.timerID);
54             }
55
56         });
57     </script>
58 </html>

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8" />
  5         <title>Vue 组件的基本使用</title>
  6         <script type="text/javascript" src="../js/vue.js"></script>
  7         <script type="text/javascript" src="../js/day.min.js"></script>
  8     </head>
  9     <body>
 10         <!--
 11             Vue中使用组件的三大步骤：
 12                 1.定义组件（创建组件）
 13                     .使用Vue.extend(options)创建，其中Options和new Vue(options)时传入的那个options几乎一样，但也有区别
 14                         .el不要写，因为最终所有的组件都要经过一个vm的管理，有vm中的el决定服务那个容器
 15                         .data必须协程函数，为了避免组件被复用时，数据存在引用关系
 16                     .备注：使用template可以配置组件结构。
 17                 2.注册组件
 18                     .局部注册：靠new Vue的时候传入components选项
 19                     .全局注册：开Vue.component('组件名', 创建的组件对象)
 20                 3.使用组件（直接html插入标签）
 21                     <组件名></组件名>
 22             关于组件的命名：
 23                 1.一个单词组成
 24                     第一种写法（首字母小写）：school
 25                     第二种写法（首字母大写）：School
 26                 2.多个单词组成
 27                     第一种写法(kabab-case命名)：my-school
 28                     第二种写法(CamelCase命名)：MySchool
 29                 备注：
 30                     .组件名尽可能回避HTML中已有的元素名称，例如：h2,H2都不行
 31                     .可以使用name配置项指定组件在开发者工具中呈现名字
 32             关于组件标签：
 33                 1.第一种写法：<school></school>
 34                 2.第二种写法：<school />
 35                 备注：不使用脚手架时，<school />会导致后续组件不能渲染
 36             简写方式：
 37                 const school = Vue.extend(options); 可简写为： const school = options;
 38             关于VueComponent：
 39                 1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
 40                 2.我们只需要写<school/>或者<school></school>，Vue解析式会自动创建school组件的实例对象，即Vue帮我们执行：New VueComponent(options)
 41                 3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！
 42                 4.关于this指向
 43                     .组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均指向【VueComponent实例对象】
 44                     .new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均指向【Vue实例对象】
 45                 5.一个重要的内置关系：
 46                     .VueComponent.prototype.__proto__ === Vue.prototype
 47                     .这样组件实例化对象(VueComponent)就可以访问到Vue原乡上的属性和方法，这也是全局注册组件的原理
 48          -->
 49         <div id="root" v-cloak>
 50             <!-- 如何使用组件 -->
 51             <hello></hello>
 52             <h1>{{msg}}</h1>
 53             <hr>
 54             <school></school>
 55             <hr>
 56             <student></student>
 57             <hr>
 58         </div>
 59
 60         <div id="root2" v-cloak>
 61             <hello></hello>
 62         </div>
 63     </body>
 64
 65     <script type="text/javascript" >
 66         Vue.config.productionTip = false;//     阻止 vue 在启动时生成生产提示。
 67
 68         // 创建组件
 69         const hello = Vue.extend({
 70             name:'hello1',  // Vue开发环境中显示的名字
 71             template:`<h1>你好啊！</h1>`
 72         });
 73
 74         const school = Vue.extend({
 75             template:`
 76                 <div>
 77                     <hello></hello> <!-- 嵌套组件，可以是全局组件、也可以是components申明的局部组件 -->
 78                     <h3>学校名字：{{schoolName}}</h3> <br />
 79                     <h3>学校地址：{{schoolAddress}}</h3>
 80                 </div>
 81             `,
 82             data(){
 83                 return {
 84                     schoolName: 'BayYeShu',
 85                     schoolAddress: '深圳'
 86                 }
 87             },
 88             components:{ // 局部嵌套组件
 89                 hello
 90             }
 91         });
 92
 93         const student = Vue.extend({
 94             template:`
 95                 <div>
 96                     <h3>学生名字：{{studentName}}</h3> <br />
 97                     <h3>学生地址：{{schoolAddress}}</h3>
 98                 </div>
 99             `,
100             data(){
101                 return {
102                     studentName: 'Tom',
103                     schoolAddress: '深圳-罗湖'
104                 }
105             }
106         });
107
108         // 全局注册
109         Vue.component('hello',hello);
110
111         new Vue({
112             el: "#root",
113             data:{
114                 msg: 'Hello world!'
115             },
116             // 局部注册
117             components:{
118                 school: school,
119                 student
120             }
121
122         });
123         new Vue({
124             el: "#root2",
125         });
126     </script>
127 </html>