第3章-Vue開(kāi)發(fā)基礎(chǔ)(下)-教學(xué)PPT

第3章Vue開(kāi)發(fā)基礎(chǔ)（下）全局API全局配置實(shí)例屬性組件進(jìn)階學(xué)習(xí)目標(biāo)掌握掌握掌握掌握掌握Vue提供的全局API12掌握Vue實(shí)例對(duì)象中的常用屬性3掌握使用render渲染函數(shù)完成頁(yè)面渲染的方法4掌握通過(guò)全局對(duì)象配置Vue的方法目錄?點(diǎn)擊查看本節(jié)相關(guān)知識(shí)點(diǎn)?點(diǎn)擊查看本節(jié)相關(guān)知識(shí)點(diǎn)實(shí)例屬性3.23.1全局API?點(diǎn)擊查看本節(jié)相關(guān)知識(shí)點(diǎn)3.3全局配置?點(diǎn)擊查看本節(jié)相關(guān)知識(shí)點(diǎn)組件進(jìn)階3.4知識(shí)架構(gòu)3.1全局API1Vue.directive2Vue.use3Vue.extend4Vue.set5Vue.mixin知識(shí)架構(gòu)3.2實(shí)例屬性1vm.$props2vm.$options3vm.$el4vm.$children知識(shí)架構(gòu)3.2實(shí)例屬性5vm.$root6vm.$slots7vm.$attrs知識(shí)架構(gòu)3.3全局配置1productionTip2silent3devtools知識(shí)架構(gòu)3.4組件進(jìn)階1mixins2render3createElementVue.directive：用來(lái)注冊(cè)自定義指令，對(duì)低級(jí)DOM元素進(jìn)行訪問(wèn)，為DOM元素添加新的特性。3.1全局API1

Vue.directive

案例展示：自定義注冊(cè)指令v-focus。3.1全局API1

Vue.directive

案例實(shí)現(xiàn)：定義根標(biāo)簽div。3.1全局API1

Vue.directive

<divid="app"><inputtype="text"v-focus="true"></div>案例實(shí)現(xiàn)：控制input文本框是否自動(dòng)獲得焦點(diǎn)。3.1全局API1

Vue.directive

Vue.directive('focus',{inserted(el,binding){if(binding.value){el.focus()}}})varvm=newVue({el:'#app'})Vue.use：Vue.use主要用于在Vue中安裝插件，通過(guò)插件可以為Vue添加全局功能。插件可以是一個(gè)對(duì)象或函數(shù)，如果是對(duì)象，必須提供install()方法，用來(lái)安裝插件；如果是一個(gè)函數(shù)，則該函數(shù)將被當(dāng)成install()方法。3.1全局API2

Vue.use

案例展示：3.1全局API2

Vue.use

案例實(shí)現(xiàn)：3.1全局API2

Vue.use

<divid="app"v-my-directive></div>varvm=newVue({el:'#app'})創(chuàng)建vm實(shí)例案例實(shí)現(xiàn)：3.1全局API2

Vue.use

<script>//定義一個(gè)MyPlugin（自定義插件）對(duì)象letMyPlugin={}</script>定義插件案例實(shí)現(xiàn)：3.1全局API2

Vue.use

//編寫插件對(duì)象的install方法MyPlugin.install=function(Vue,options){console.log(options)//在插件中為Vue添加自定義指令Vue.directive('my-directive',{bind(el,binding){//為自定義指令v-my-directive綁定的DOM元素設(shè)置style樣式el.style='width:100px;height:100px;background-color:#ccc;'}})}定義插件案例實(shí)現(xiàn)：3.1全局API2

Vue.use

Vue.use(MyPlugin,{someOption:true}使用插件3.1全局API2

Vue.use

注意Vue.js官方提供的一些插件（如vue-router）在檢測(cè)到

Vue

是可訪問(wèn)的全局變量時(shí)，會(huì)自動(dòng)調(diào)用

Vue.use()。但是在CommonJS等模塊環(huán)境中，則始終需要Vue.use()顯式調(diào)用。Vue.extend：Vue.extend用于基于Vue構(gòu)造器創(chuàng)建一個(gè)Vue子類，可以對(duì)Vue構(gòu)造器進(jìn)行擴(kuò)展。它有一個(gè)options參數(shù)，表示包含組件選項(xiàng)的對(duì)象。3.1全局API3

Vue.extend

案例展示：3.1全局API3

Vue.extend

案例實(shí)現(xiàn)：3.1全局API3

Vue.extend

<divid="app1">app1:{{title}}</div><divid="app2">app2:{{title}}</div>頁(yè)面結(jié)構(gòu)案例實(shí)現(xiàn)：3.1全局API3

Vue.extend

varVue2=Vue.extend({data(){return{title:'hello‘}}})varvm1=newVue({el:'#app1'})varvm2=newVue2({el:'#app2'})創(chuàng)建子類Vue2Vue.set：Vue的核心具有一套響應(yīng)式系統(tǒng)，簡(jiǎn)單來(lái)說(shuō)就是通過(guò)監(jiān)聽(tīng)器監(jiān)聽(tīng)數(shù)據(jù)層的數(shù)據(jù)變化，當(dāng)數(shù)據(jù)改變后，通知視圖也自動(dòng)更新。Vue.set用于向響應(yīng)式對(duì)象中添加一個(gè)屬性，并確保這個(gè)新屬性同樣是響應(yīng)式的，且觸發(fā)視圖更新。3.1全局API4

Vue.set

案例展示

：3.1全局API4

Vue.set

案例實(shí)現(xiàn)：3.1全局API4

Vue.set

頁(yè)面結(jié)構(gòu)<divid="app"><div>{{a}}</div><div>{{obj.b}}</div></div>案例實(shí)現(xiàn)：3.1全局API4

Vue.set

創(chuàng)建vm對(duì)象動(dòng)態(tài)設(shè)置屬性b<script>varvm=newVue({el:'#app',data:{a:'我是根級(jí)響應(yīng)式屬性a',obj:{}}})Vue.set(vm.obj,'b','我是Vue.set添加的響應(yīng)式屬性obj.b')</script>Vue.mixin：Vue.mixin用于全局注冊(cè)一個(gè)混入，它將影響之后創(chuàng)建的每個(gè)Vue實(shí)例。該接口主要是提供給插件作者使用，在插件中向組件注入自定義的行為。該接口不推薦在應(yīng)用代碼中使用。3.1全局API5

Vue.mixin

案例展示：Vue.mixin用于全局注冊(cè)一個(gè)混入（Mixins），實(shí)現(xiàn)插件功能。3.1全局API5

Vue.mixin

案例實(shí)現(xiàn)：myOption是一個(gè)自定義屬性。3.1全局API5

Vue.mixin

<divid="app"></div><script>varvm=newVue({myOption:'hellovue!'})</script>案例實(shí)現(xiàn)：3.1全局API5

Vue.mixin

Vue.mixin({created(){varmyOption=this.$options.myOptionif(myOption){console.log(myOption.toUpperCase())}}})Vue.mixin3.2實(shí)例屬性$props：使用vm.$props屬性可以接收上級(jí)組件向下傳遞的數(shù)據(jù)。1

vm.$props

3.2實(shí)例屬性案例：通過(guò)$props實(shí)現(xiàn)手機(jī)信息搜索。1

vm.$props

3.2實(shí)例屬性案例實(shí)現(xiàn)：定義唯一根標(biāo)簽div。1

vm.$props

<divid="app"><!--父組件--><my-parent></my-parent></div>3.2實(shí)例屬性案例實(shí)現(xiàn)：定義父組件模板。1

vm.$props

<!--父組件模板--><templateid="parent"><div><h3>手機(jī)信息搜索</h3>

手機(jī)品牌：<inputtype="text"v-model="brand"><!--子組件--><my-childv-bind:name="brand"></my-child></div></template>3.2實(shí)例屬性案例實(shí)現(xiàn)：定義子組件模板。1

vm.$props

<!--子組件模板--><templateid="child"><ul><li>手機(jī)品牌：{{show.brand}}</li><li>手機(jī)型號(hào)：{{show.type}}</li><li>市場(chǎng)價(jià)格：{{show.price}}</li></ul></template>3.2實(shí)例屬性案例實(shí)現(xiàn)：注冊(cè)父組件my-parent。1

vm.$props

Vponent('my-parent',{template:‘#parent’,

data(){return{brand:''}}})3.2實(shí)例屬性案例實(shí)現(xiàn)：注冊(cè)子組件my-child。1

vm.$props

Vponent('my-child',{template:'#child’})varvm=newVue({el:'#app',data:{}})3.2實(shí)例屬性案例實(shí)現(xiàn)：在子組件的data中定義手機(jī)的數(shù)據(jù)信息。1

vm.$props

data(){return{content:[{brand:'華為',type:'Mate20',price:3699},{brand:'蘋果',type:'iPhone7',price:2949}…（省略手機(jī)信息）],show:{brand:'',type:'',price:''}}},3.2實(shí)例屬性案例實(shí)現(xiàn)：在子組件的data中定義props用來(lái)接收name的值。1

vm.$props

props:['name'],watch:{name(){}}})3.2實(shí)例屬性案例實(shí)現(xiàn)：如果獲取到name值就查詢手機(jī)信息，否則返回。1

vm.$props

if(this.$){varfound=falsethis.show=found?found:{brand:'',type:'',price:''}}else{return}3.2實(shí)例屬性案例實(shí)現(xiàn)：通過(guò)forEach()方法對(duì)手機(jī)數(shù)據(jù)進(jìn)行查詢操作。1

vm.$props

this.content.forEach((value,index)=>{if(value.brand===this.$){found=value}})3.2實(shí)例屬性$options：Vue實(shí)例初始化時(shí)，除了傳入指定的選項(xiàng)外，還可以傳入自定義選項(xiàng)。自定義選項(xiàng)的值可以是數(shù)組、對(duì)象、函數(shù)等，通過(guò)vm.$options來(lái)獲取。2

vm.$options

3.2實(shí)例屬性案例展示：2

vm.$options

3.2實(shí)例屬性案例實(shí)現(xiàn)：2

vm.$options

<divid="app"><p>{{base}}</p><p>{{noBase}}</p></div>定義根標(biāo)簽<script>varvm=newVue({el:'#app',data:{base:'我是基礎(chǔ)數(shù)據(jù)'},})</script>創(chuàng)建vm實(shí)例3.2實(shí)例屬性案例實(shí)現(xiàn)：在vm實(shí)例配置對(duì)象中添加下面代碼。2

vm.$options

customOption:'我是自定義數(shù)據(jù)',created(){this.noBase=this.$options.customOption}$options3.2實(shí)例屬性$el：vm.$el用來(lái)訪問(wèn)vm實(shí)例使用的根DOM元素，案例展示如下。3

vm.$el

3.2實(shí)例屬性案例實(shí)現(xiàn)：3

vm.$el

<divid="app"><p>我是根標(biāo)簽結(jié)構(gòu)</p></div>根標(biāo)簽3.2實(shí)例屬性案例實(shí)現(xiàn)：3

vm.$el

<script>varvm=newVue({el:'#app'})vm.$el.innerHTML='<div>我是替換后的div標(biāo)簽</div>'</script>修改內(nèi)容3.2實(shí)例屬性$children：vm.$el用來(lái)訪問(wèn)vm實(shí)例使用的根DOM元素，案例演示如下。4

vm.$children

3.2實(shí)例屬性案例實(shí)現(xiàn)：4

vm.$children

<divid="app"><button@click="child">查看子組件</button><my-component></my-component></div>根標(biāo)簽3.2實(shí)例屬性案例實(shí)現(xiàn)：4

vm.$children

<script>Vponent('my-component',{template:'<div>myComponent</div>'})</script>定義子組件3.2實(shí)例屬性案例實(shí)現(xiàn)：4

vm.$children

<script>varvm=newVue({el:'#app',methods:{child(){console.log(this.$children)}}})</script>獲取子組件3.2實(shí)例屬性$root：vm.$root用來(lái)獲取當(dāng)前組件樹(shù)的根Vue實(shí)例，如果當(dāng)前實(shí)例沒(méi)有父實(shí)例，則獲取到的是該實(shí)例本身。5

vm.$root

3.2實(shí)例屬性案例展示：5

vm.$root

3.2實(shí)例屬性案例實(shí)現(xiàn)：5

vm.$root

<divid="app"><my-component></my-component></div><script>varvm=newVue({el:'#app'})</script>創(chuàng)建vm實(shí)例3.2實(shí)例屬性案例實(shí)現(xiàn)：5

vm.$root

Vponent('my-component',{template:'<button@click="root">查看根實(shí)例</button>',methods:{root(){console.log(this.$root)console.log(this.$root===vm.$root)}}})獲取根Vue實(shí)例3.2實(shí)例屬性$slots：Vue中的組件中使用template模板定義HTML結(jié)構(gòu)，為了方便使用template公共模板結(jié)構(gòu)。Vue提出了插槽（Slots）的概念，插槽就是定義在組件內(nèi)部的template模板，可以通過(guò)$slots動(dòng)態(tài)獲取。6

vm.$slots

3.2實(shí)例屬性案例展示：通過(guò)<slot></slot>展示組件中的內(nèi)容。6

vm.$slots

3.2實(shí)例屬性案例實(shí)現(xiàn)：6

vm.$slots

<divid="app"><my-component>你好</my-component></div><templateid="first"><div><slot></slot></div></template>定義組件模板3.2實(shí)例屬性案例實(shí)現(xiàn)：6

vm.$slots

<script>Vponent('my-component',{template:'#first'})varvm=newVue({el:'#app'})</script>注冊(cè)my-component組件3.2實(shí)例屬性案例展示：通過(guò)v-slot定義插槽對(duì)象。6

vm.$slots

3.2實(shí)例屬性案例實(shí)現(xiàn)：通過(guò)v-slot定義插槽對(duì)象。6

vm.$slots

<divid="app"><my-component>你好<templatev-slot:second><div>內(nèi)部結(jié)構(gòu)</div></template></my-component></div>3.2實(shí)例屬性案例實(shí)現(xiàn)：定義組件模板。6

vm.$slots

<templateid="first"><div><slot></slot> </p></template>3.2實(shí)例屬性案例實(shí)現(xiàn)：注冊(cè)my-component組件和打印插槽對(duì)象的文本內(nèi)容。6

vm.$slots

<script>Vponent('my-component',{template:'#first'})varvm=newVue({el:'#app'})//在控制臺(tái)查看插槽內(nèi)容console.log(vm.$children[0].$slots.second[0].children[0].text)</script>3.2實(shí)例屬性$attrs：vm.$attrs可以獲取組件的屬性，但其獲取的屬性中不包含class、style以及被聲明為props的屬性。7

vm.$attrs

3.2實(shí)例屬性案例展示：7

vm.$attrs

3.2實(shí)例屬性案例實(shí)現(xiàn)：7

vm.$attrs

<divid="app"><my-componentid="test"></my-component></div>定義id屬性3.2實(shí)例屬性案例實(shí)現(xiàn)：7

vm.$attrs

<script>Vponent('my-component',{template:'<button@click="showAttrs">查看屬性</button>',methods:{showAttrs(){console.log(this.$attrs)}}})varvm=newVue({el:'#app'})</script>查看id屬性3.3全局配置1

productionTip

VductionTip：打開(kāi)或關(guān)閉生產(chǎn)信息提示信息，默認(rèn)為打開(kāi)狀態(tài)。3.3全局配置1

productionTip

案例實(shí)現(xiàn)：設(shè)置屬性值為false，表示關(guān)閉生產(chǎn)信息提示信息。<script>VductionTip=false</script>關(guān)閉生產(chǎn)信息提示3.3全局配置1

productionTip

案例實(shí)現(xiàn)：刷新瀏覽器頁(yè)面，查看運(yùn)行結(jié)果。3.3全局配置2

silentVue.config.silent：silent可以取消Vue日志和警告，silent默認(rèn)值為false，開(kāi)啟警告功能。<script>Vue.config.silent=truevarvm=newVue({el:'#app'})</script>取消Vue日志和警告3.3全局配置2

silent案例實(shí)現(xiàn)：silent的值設(shè)置為true，可以取消Vue日志和警告。3.3全局配置3

devtoolsVue.config.devtools：表示打開(kāi)或關(guān)閉vue-devtools調(diào)試工具，默認(rèn)值為true，表示vue-devtools工具可用。<script>Vue.config.devtools=false</script>關(guān)閉vue-devtools工具3.3全局配置3

devtools案例實(shí)現(xiàn)：devtools的值設(shè)置為false，關(guān)閉vue-devtools功能。3.3全局配置3

devtools案例實(shí)現(xiàn)：刷新瀏覽器頁(yè)面，查看運(yùn)行結(jié)果。3.4組價(jià)進(jìn)階1

mixinsmixins：mixins是一種分發(fā)Vue組件中可復(fù)用功能的方式。mixins對(duì)象可以包含任何組件選項(xiàng)，將定義的mixins對(duì)象引入組件中即可使用，mixins中的所有選項(xiàng)將會(huì)混入到組件自己的選項(xiàng)中。3.4組價(jià)進(jìn)階1

mixins案例展示：<script>//定義myMixin對(duì)象varmyMixin={created(){this.hello()},methods:{hello(){console.log('hellofrommixin!')}}}</script>定義myMixin對(duì)象3.4組價(jià)進(jìn)階1

mixins案例實(shí)現(xiàn)：varComponent=Vue.extend({mixins:[myMixin]})varcomponent=newComponent()配置mixins選項(xiàng)3.4組價(jià)進(jìn)階1

mixins案例實(shí)現(xiàn)：3.4組價(jià)進(jìn)階2

renderrender()渲染函數(shù)：在Vue中可以使用Vue.render()實(shí)現(xiàn)對(duì)虛擬DOM的操作。在Vue中一般使用template來(lái)創(chuàng)建HTML，但這種方式可編程性不強(qiáng)，而使用Vue.render()可以更好地發(fā)揮JavaScript的編程能力。3.4組價(jià)進(jìn)階2

render案例展示：<divid="app"><my-component>成功渲染</my-component></div>根標(biāo)簽3.4組價(jià)進(jìn)階2

render案例實(shí)現(xiàn)：