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>
