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 模板而得来,不过现在大前端的范围已 ...
随机推荐
- 分享一个 SpringCloud Feign 中所埋藏的坑
背景 前段时间同事碰到一个问题,需要在 SpringCloud 的 Feign 调用中使用自定义的 URL:通常情况下是没有这个需求的:毕竟都用了 SpringCloud 的了,那服务之间的调用都是走 ...
- 每天一个 HTTP 状态码 206
206 Partial Content 206 Partial Content 是当客户端请求时使用了 Range 头部,服务器端回复的响应,表示只响应一部分内容. 实例 请求: GET /favor ...
- 浅析kubernetes中client-go Informer
之前了解了client-go中的架构设计,也就是 tools/cache 下面的一些概念,那么下面将对informer进行分析 Controller 在client-go informer架构中存在一 ...
- WPF|快速添加新手引导功能（支持MVVM）
阅读导航 前言 案例一 案例二 案例三(本文介绍的方式) 如何使用? 控件如何开发的? 总结 1. 前言 案例一 站长分享过 眾尋 大佬的一篇 WPF 简易新手引导 一文,新手引导的效果挺不错的,如下 ...
- HIPPO-4J 1.3.0 正式发布：支持 Dubbo、RibbitMQ、RocketMQ 框架线程池
文章首发在公众号(龙台的技术笔记),之后同步到个人网站:xiaomage.info Hippo-4J 距离上一个版本 1.2.1 已经过去一个月的时间.在此期间,由 8 位贡献者 提交了 170+ c ...
- 使用 content-visibility 优化渲染性能
最近在业务中实际使用 content-visibility 进了一些渲染性能的优化. 这是一个比较新且有强大功能的属性.本文将带领大家深入理解一番. 何为 content-visibility? co ...
- Apache Poi 操作word，替换字符保留样式问题，runs段落混乱问题。
关于这个问题也是刚好遇到,一通搜索也没有找到类似的或者是有效的方法.下面介绍一下. 首先apache poi的引入 <dependency> <groupId>org.apac ...
- 这不会又是一个Go的BUG吧？
hello,大家好呀,我是小楼. 最近我又双叒叕写了个BUG,一个线上服务死锁了,不过幸亏是个新服务,没有什么大影响. 出问题的是Go的读写锁,如果你是写Java的,不必划走,更要看看本文,本文的重点 ...
- BUUCTF-被劫持的礼物
被劫持的礼物 看提示用wireshark打开,找登陆流量包,过滤http .login目录的 账号密码加一起MD5小写即可. 1d240aafe21a86afc11f38a45b541a49
- vue封装手机验证码
// 获取验证码 let endMsRes = new Date().getTime() + 45000; localStorage.setItem("myEndTime", JS ...