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>
Vue 引出声明周期 && 组件的基本使用的更多相关文章
- Vue的声明周期
以下简单介绍,以自己的理解进行分析.如有不好,请大牛勿喷!!!!!! new Vue() 创建 Vue 实例 beforeCreate(){}: 第一生命周期 表示实例完全创建出来,此函数执行是,da ...
- python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- 6. Vue - 声明周期
一.官方vue生命周期流程图 二.vue声明周期介绍 beforeCreate执行时:data和el均未初始化,值为undefined created执行时:Vue 实例观察的数据对象data已经配置 ...
- Vue环境搭建-项目的创建-启动生命周期-组件的封装及应用
vue项目环境的搭建 """ node >>> python:node是用c++编写用来运行js代码的 npm(cnpm) >>> p ...
- vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)
第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...
- vue.js2.0 自定义组件初体验
理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...
- vue之生命周期
vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 1.vue实例的生命周期(vue2.0) 2.生命周期描述:(参考截图) 3.例子 window.vm = ...
- vue之生命周期的一点总结
vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 一.vue实例的生命周期(vue2.0) 二.生命周期描述:(参考截图) 三.例子 window.vm = ...
- 大话大前端时代(一) —— Vue 与 iOS 的组件化
序 今年大前端的概念一而再再而三的被提及,那么大前端时代究竟是什么呢?大前端这个词最早是因为在阿里内部有很多前端开发人员既写前端又写 Java 的 Velocity 模板而得来,不过现在大前端的范围已 ...
随机推荐
- 阿里云OSS + PicGo搭建图床
1.阿里云 OSS 登录阿里云,进入控制台. 打开侧边栏,找到对象存储 OSS. 右侧找到 Bucket 管理,点击创建 Bucket. 根据引导配置 Bucket 其他同城冗余存储和版本控制等增值服 ...
- 爬取豆瓣喜剧类热门TOP60的电影
学习任务:爬取豆瓣喜剧类热门TOP60的电影并保存在douban.txt文件中. 代码示例: import requests url="https://movie.douban.com/j/ ...
- 【单片机】CH32V103v8t6 - PA5-外部中断测试程序
main.c文件内容 /* *@Note 外部中断线例程: EXTI_Line5(PA5) PA5设置上拉输入,下降沿触发中断. */ #include "debug.h" /** ...
- 深度学习与CV教程(6) | 神经网络训练技巧 (上)
作者:韩信子@ShowMeAI 教程地址:http://www.showmeai.tech/tutorials/37 本文地址:http://www.showmeai.tech/article-det ...
- 使用Redis实现购物车功能
增加购物车商品 假设ID为1001的向购物车中存放了3个商品,产品ID分别为10021.10025.10079 hset cart:1001 10021 1 hset cart:1001 10025 ...
- 第一章：Python的数据结构、函数和文件
list list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: >>> classmates = ['Michael', ...
- Operator介绍
一.Operator简介 在Kubernetes中我们经常使用Deployment.DaemonSet.Service.ConfigMap等资源,这些资源都是Kubernetes的内置资源,他们的创建 ...
- labelimg使用指南
labelimg使用指南 From RSMX - https://www.cnblogs.com/rsmx/ 目录 labelimg使用指南 1. 确保已经安装了 Python 环境 2. 使用pip ...
- MySQL十种锁，一篇文章带你全解析
MySQL有两个核心的知识点,索引和锁.前几篇文章已经详细讲解了MySQL索引实现机制,今天再一起学习一下MySQL的锁. 1 为什么要加锁? 当多个事务并发操作同一批数据的时候,如果不加锁,就无法保 ...
- # Vue3 toRef 和 toRefs 函数
Vue3 toRef 和 toRefs 函数 上一篇博文介绍了 vue3 里面的 ref 函数和 reactive 函数,实现响应式数据,今天主要来说一下 toRef 函数和 toRefs 函数的基本 ...