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 模板而得来,不过现在大前端的范围已 ...
随机推荐
- 层层剖析一次 HTTP POST 请求事故
vivo 互联网服务器团队- Wei Ling 本文主要讲述的是如何根据公司网络架构和业务特点,锁定正常请求被误判为跨域的原因并解决. 一.问题描述 某一个业务后台在表单提交的时候,报跨域错误,具体如 ...
- 2.0 vue2+tinymce实现图片上传与回显
1.效果 2.配置 2.1 在init中添加图片上传函数 // 图片上传 images_upload_handler: (blobInfo, success, failure) => { // ...
- 带你学习MindSpore中算子使用方法
摘要:本文分享下MindSpore中算子的使用和遇到问题时的解决方法. 本文分享自华为云社区<[MindSpore易点通]算子使用问题与解决方法>,作者:chengxiaoli. 简介 算 ...
- 运筹学笔记12 大M法
引入M,其中M是一个充分大的正数.由此,目标函数也改变为zM. 如此构造的线性规划问题我们记作LPM,称之为辅助线性规划问题,也即在原来的线性规划问题的基础上,改造了其等式约束条件,然后有对目标函数施 ...
- Node.js精进（2）——异步编程
虽然 Node.js 是单线程的,但是在融合了libuv后,使其有能力非常简单地就构建出高性能和可扩展的网络应用程序. 下图是 Node.js 的简单架构图,基于 V8 和 libuv,其中 Node ...
- 【翻译】驯服野兽：Scylla 如何利用控制理论来控制压实
教程翻译自Seastar官方文档:https://www.scylladb.com/2018/06/12/scylla-leverages-control-theory/ 转载请注明出处:https: ...
- 一篇文章带你使用Typescript封装一个Vue组件
一.搭建项目以及初始化配置 vue create ts_vue_btn 这里使用了vue CLI3自定义选择的服务,我选择了ts.stylus等工具.然后创建完项目之后,进入项目.使用快捷命令code ...
- 让我们用Vue cli全家桶搭建项目
一般项目都会用到这几个,这里不在详细介绍概念,只是简单的使用.一.搭建cli 1.事先安装好cnpm(淘宝镜像) npm install -g cnpm --registry=https://regi ...
- Canal搭建
目录 搭建环境 MySQL环境 Canal环境 客户端 总结 需求:解决私有环境数据库的基础数据同步问题,每当中心库基础数据发生改变时,其他私有库都会增量同步 Canal主要用途是基于 MySQL 数 ...
- UiPath手把手教程
UiPath下载安装与激活 链接: https://pan.baidu.com/s/1o5Ur-QNTxsnlhi97-losJQ 提取码: 9dmf 复制这段内容后打开百度网盘手机App,操作更方便 ...