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 模板而得来,不过现在大前端的范围已 ...
随机推荐
- 【Axure】母版引发事件
引发事件是指你将母版中某一元件的事件从母版中提升出来,以使其在页面的级别可用. 通过引发事件,可以对在不同页面上母版实例的同一个元件设置不同的交互. 设置引发事件 打开一个母版: 选择其中一个组件: ...
- nazo.io 通关记录
游戏网址 说在前面 答案错误页面 nazo.io/wrong 攻略 第0关 谜.io 纯粹是欢迎你来游戏. 所以他给你的start就是答案. 第1关 欢迎 它用灰体字写了key: welcome 直接 ...
- 【爬虫+情感判定+Top10高频词+词云图】"王心凌"热门弹幕python舆情分析
目录 一.背景介绍 二.代码讲解-爬虫部分 2.1 分析弹幕接口 2.2 讲解爬虫代码 三.代码讲解-情感分析部分 3.1 整体思路 3.2 情感分析打标 3.3 统计top10高频词 3.4 绘制词 ...
- django框架9
内容概要 用户名动态校验 删除二次确认 sweetalert前端插件 django自带的序列化组件 批量数据操作 分页器推导流程 自定义分页器封装代码 自定义分页器使用方法 校验性组件之forms组件 ...
- ExtJS配置TabPanel可以拖拽Tab标签页
1.环境说明 ExtJS版本:7.4.0.42 Sencha Cmd: v7.5.1.20 开发工具:WebStorm 2022.1.1 PS:如果是老版本的ExtJS,引入Ext.ux.TabReo ...
- 【Spring】AOP实现原理（二）：Advisor获取
@EnableAspectJAutoProxy @EnableAspectJAutoProxy注解可以用来开启AOP,那么就从@EnableAspectJAutoProxy入手学习一下Spring A ...
- 【万字长文】从零配置一个vue组件库
简介 本文会从零开始配置一个monorepo类型的组件库,包括规范化配置.打包配置.组件库文档配置及开发一些提升效率的脚本等,monorepo 不熟悉的话这里一句话介绍一下,就是在一个git仓库里包含 ...
- 纪念我逝去的n个小时
纪念我逝去的n个小时 某人的惨案要我擦屁股=.= #include <bits/stdc++.h> using namespace std; template<class T> ...
- 密码学系列之:在线证书状态协议OCSP详解
目录 简介 PKI中的CRL CRL的缺点 CRL的状态 OCSP的工作流程 OCSP的优点 OCSP协议的细节 OCSP请求 OCSP响应 OCSP stapling 总结 简介 我们在进行网页访问 ...
- 树莓派实战：微信机器人（itchat实现）
背景 楼主有一台树莓派4B开发板(8G内存版),是目前的顶配机型.这一年来的业余时间,除了写Java.架构方面的文章,也陆续折腾了不少树莓派上的好玩小项目,在此新开一个树莓派实战的文章系列,分享给粉丝 ...