附近裝修公司電話號(hào)碼seo排名首頁(yè)
生命周期
-
生命周期又叫生命周期鉤子，生命周期函數(shù)
-
生命周期是，Vue在關(guān)鍵的時(shí)刻幫我們調(diào)用的一些特殊名字的函數(shù)
-
生命周期的this指向vm或者組件實(shí)例對(duì)象
-
mounted會(huì)將初始化的Dom掛載到頁(yè)面上
-
<template><div class="hello"><!-- 第一個(gè)是css樣式,第二個(gè)變量名 opacity為指定一個(gè)元素的不透明度--><h3 :style="{opacity:opacity}">會(huì)變化的字體</h3><!-- 縮寫(xiě)形式 --><!-- <h3 :style="{opacity}"></h3> --></div> </template> ? <script> export default {name: 'Select',data () {return {opacity: 1}},// mounted是生命周期函數(shù)。用于把初始化的DOM元素放到頁(yè)面后(也叫做掛載完畢后),就調(diào)用mountedmounted(){// 設(shè)置定時(shí)器setInterval(()=>{this.opacity -= 0.01if(this.opacity <= 0)this.opacity = 1},16)} } </script>組件
-
組件是用來(lái)實(shí)現(xiàn)局部功能效果的代碼集合（html/css/js/image...)
-
組件的作用為： 復(fù)用編碼,簡(jiǎn)化項(xiàng)目編碼，提高運(yùn)行效率
-
模塊化和組件化的區(qū)別：當(dāng)應(yīng)用中的js都以模塊化編寫(xiě)時(shí)，這個(gè)應(yīng)用為模塊化應(yīng)用。當(dāng)應(yīng)用中的功能都是多組件方式編寫(xiě)。這個(gè)應(yīng)用就是組件化的應(yīng)用
-
關(guān)于VueComponent
-
School組件本質(zhì)上是一個(gè)名為Component的構(gòu)造函數(shù)，且不是程序員定義的，是Vue.extend生成的
-
我們只需要寫(xiě)< school/>(這個(gè)只有腳手架有效)或者< school>< /school>。Vue解析時(shí)會(huì)幫我們創(chuàng)建school組件的實(shí)列對(duì)象。
-
注意：每次調(diào)用Vue.extend。返回的都是一個(gè)全新的VueCompon
-
關(guān)于this指向：
-
1、組件配置中：
-
data函數(shù)、methods中的函數(shù)、watch中的函數(shù)、computed中的函數(shù)它們的this均是VueComponent實(shí)例對(duì)象
-
2、new.Vue()配置中：
-
data函數(shù)、methods中的函數(shù)、watch中的函數(shù)、computed中的函數(shù)它們的this均是Vue實(shí)例對(duì)象
-
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><!-- root為容器,注冊(cè)成功即可使用School組件 --><div id="root"><School></School></div> ? </body><script type="text/javascript">Vue.config.productionTip = false// 定義school組件,extends為繼承的意思。但這里少了s。用于定義VueComponentconst School = Vue.extend({name: 'School',// 用``而不是''這樣的好處是可以換行書(shū)寫(xiě)，''只能單行書(shū)寫(xiě)代碼。換行則報(bào)錯(cuò)template: `// 錯(cuò)誤寫(xiě)法，// <h2>{{name}}<h2>// <h3>{{address}}<h3>// 正確的寫(xiě)法,需要加入div將所有模塊包起來(lái)。符合模塊化開(kāi)發(fā)<div><h2>{{name}}<h2><h3>{{address}}<h3></div>`,data(){return {name: 'school',address: '廣東'}},})// vm是一個(gè)構(gòu)造函數(shù)，{}為配置項(xiàng)new Vue({el:'#root',// vm管理所有的組件,故每個(gè)組件都要來(lái)vm這里注冊(cè)才能使用。//為方便管理，為vm設(shè)置一個(gè)管理者(app)，vm直接管理app。而app管理所有的組件。以下代碼可以認(rèn)為School就是管理者components:{School}})</script> </html>