摘要:用法如下注冊(cè)全局的指令注冊(cè)一個(gè)全局自定義指令當(dāng)綁定元素插入到中。具體代碼如下當(dāng)組件中需要用到其他的組件時(shí),需要使用屬性去創(chuàng)建一個(gè)哈希表。具體用法如下包含組件引入組件在中添加組件的哈希表收尾除了上面這些屬性,還有一些雜項(xiàng)詳情請(qǐng)看官網(wǎng)
后來(lái)我才知道,生活就是個(gè)緩慢受錘的過(guò)程,人一天天老下去,奢望也一天天消失,最后變得像挨了錘的牛一樣。
——王小波
三、組件對(duì)象
在組件中被包裹的代碼可以看成是一個(gè)對(duì)象,也就是vue實(shí)例。下面將簡(jiǎn)單介紹vue實(shí)例的屬性:
1. 數(shù)據(jù)
這里的數(shù)據(jù)可以看做是MVVM中的model層,用于封裝與應(yīng)用程序的業(yè)務(wù)邏輯相關(guān)的數(shù)據(jù)以及對(duì)數(shù)據(jù)的處理方法。
關(guān)于MVVM,可閱讀此文章:
http://www.cnblogs.com/SanMao...
按照vue官網(wǎng)的歸類,可將以下屬性歸類到數(shù)據(jù)類屬性當(dāng)中:
data
Vue 實(shí)例的數(shù)據(jù)對(duì)象。Vue 將會(huì)遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter,從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化。(是通過(guò)getter和setter來(lái)修改和獲取數(shù)據(jù)的)。
注意:angular中雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理是對(duì)DOM或xhr事件做了定制,在里面觸發(fā)digest(臟檢查)流程,去檢查所有的watcher,從而更新數(shù)據(jù)。VUE則是使用ES5提供的Object.defineProperty() 方法,監(jiān)控對(duì)數(shù)據(jù)的操作,從而可以自動(dòng)觸發(fā)數(shù)據(jù)同步,更加的精準(zhǔn),省事。
props
props 可以是數(shù)組或?qū)ο螅糜诮邮諄?lái)自父組件的數(shù)據(jù)。也就是之前說(shuō)過(guò)的父?jìng)髯拥膒rop方法。
propsData
此屬性只用于 new 創(chuàng)建的實(shí)例中。在創(chuàng)建實(shí)例時(shí)傳遞 props。主要作用是方便測(cè)試。
/*通過(guò)VUE實(shí)例創(chuàng)建一個(gè)子類Comp,這個(gè)子類有一個(gè)props屬性*/ var Comp = Vue.extend({ props: ["msg"], template: "{{ msg }}" }) /*new一個(gè)Cmop對(duì)象的時(shí)候,我希望把props傳過(guò)去(模仿父級(jí)的操作),但是又沒(méi)有父級(jí),就可以以下面的方式實(shí)現(xiàn)*/ var vm = new Comp({ propsData: { msg: "hello" } })
computed
計(jì)算屬性,此屬性是一個(gè)對(duì)象,用于定義對(duì)data中的數(shù)據(jù)進(jìn)行操作的方法。分為讀取和設(shè)置,也就對(duì)應(yīng)了data的getter和setter。這個(gè)對(duì)象的方法中的this都是指向vue實(shí)例的data屬性。
var vm = new Vue({ data: { a: 1 }, computed: { // 僅讀取,值只須為函數(shù) aDouble: function () { return this.a * 2 }, // 讀取和設(shè)置 aPlus: { get: function () { // get方法返回處理后的數(shù)據(jù),不會(huì)改變?cè)镜膁ata return this.a + 1 }, set: function (v) { this.a = v - 1 } } } }) vm.aPlus // -> 2 vm.aPlus = 3 vm.a // -> 2 vm.aDouble // -> 4
methods
methods和computed都是用來(lái)提供操作數(shù)據(jù)的方法的屬性,兩者的區(qū)別在于computed中有在相關(guān)的數(shù)據(jù)發(fā)生改變時(shí)才會(huì)再次觸發(fā)computed,而在模版重新渲染時(shí),而相關(guān)數(shù)據(jù)沒(méi)有變化時(shí)并不會(huì)觸發(fā)。methods在重新渲染時(shí)就會(huì)觸發(fā),在應(yīng)用場(chǎng)景中提現(xiàn):
比如當(dāng)需要求和時(shí),使用計(jì)算屬性更加貼切,在angular中,通常都是直接在html中以{{a+b+c}}的形式來(lái)展示和,vue的計(jì)算屬性可以說(shuō)就是為了讓模版中不該出現(xiàn)邏輯而提供的屬性。
methods主要是事件觸發(fā)方法,表單提交,頁(yè)面控制等場(chǎng)景時(shí)使用。
watch
watch屬性用于監(jiān)聽數(shù)據(jù)的變化,當(dāng)數(shù)據(jù)發(fā)生變化時(shí),需要做什么操作。和computed(計(jì)算屬性)很相似,都是當(dāng)相關(guān)的數(shù)據(jù)發(fā)生變化時(shí)執(zhí)行。當(dāng)你想要在數(shù)據(jù)變化響應(yīng)時(shí),執(zhí)行異步操作或開銷較大的操作,應(yīng)該使用watch。使用 watch 選項(xiàng)允許我們執(zhí)行異步操作(訪問(wèn)一個(gè) API),限制我們執(zhí)行該操作的頻率,并在我們得到最終結(jié)果前,設(shè)置中間狀態(tài)。這是計(jì)算屬性無(wú)法做到的。
2.DOM
除了在*.vue文件的中聲明之外,還可以通過(guò)el"、template、render來(lái)增加模版
el
只能在創(chuàng)建一個(gè)VUE實(shí)例的時(shí)候使用
new Vue({ el: "#some-element", // 選項(xiàng) })
template
在注冊(cè)組件的時(shí)候使用,其效果和*.vue文件中的template效果是一樣樣的。
Vue.component("my-component", { template: "A custom component!" })
render
render是一個(gè)方法,讓你發(fā)揮最大的編程能力去編寫一個(gè)html模版,類似于react的jsx語(yǔ)法,減少html中冗長(zhǎng)的代碼。
Vue.component("anchored-heading", { render: function (createElement) { return createElement( "h" + this.level, // tag name 標(biāo)簽名稱 this.$slots.default // 子組件中的陣列 ) }, props: { level: { type: Number, required: true } } })
3.生命周期鉤子
咱們說(shuō),組件有他的生命周期,從創(chuàng)建到銷毀,那么我們有沒(méi)有辦法監(jiān)聽到組件的生命周期呢?答案是有的,就是生命周期鉤子。為組件增加對(duì)應(yīng)的生命周期鉤子,就可以對(duì)組件的創(chuàng)建銷毀做到可控制了。
beforeCreate: 在實(shí)例初始化之后,數(shù)據(jù)觀測(cè)(data observer) 和 event/watcher 事件配置之前被調(diào)用。
create: 實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用,在這一步,實(shí)例已完成以下的配置:數(shù)據(jù)觀測(cè)(data observer),屬性和方法的運(yùn)算, watch/event 事件回調(diào)。然而,掛載階段還沒(méi)開始,$el 屬性目前不可見。
beforeMount: 在掛載開始之前被調(diào)用:相關(guān)的 render 函數(shù)首次被調(diào)用。
mounted: el 被新創(chuàng)建的 vm.$el 替換,并掛載到實(shí)例上去之后調(diào)用該鉤子。如果 root 實(shí)例掛載了一個(gè)文檔內(nèi)元素,當(dāng) mounted 被調(diào)用時(shí) vm.$el 也在文檔內(nèi)。
beforeUpdate: 數(shù)據(jù)更新時(shí)調(diào)用,發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前。
updated: 由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁,在這之后會(huì)調(diào)用該鉤子。
activated: keep-alive 組件激活時(shí)調(diào)用。
deactivaed: keep-alive 組件停用時(shí)調(diào)用。
beforeDestory: 實(shí)例銷毀之前調(diào)用。在這一步,實(shí)例仍然完全可用。
destroyed: Vue 實(shí)例銷毀后調(diào)用。調(diào)用后,Vue 實(shí)例指示的所有東西都會(huì)解綁定,所有的事件監(jiān)聽器會(huì)被移除,所有的子實(shí)例也會(huì)被銷毀。
其中,只有beforeCreate和Create在服務(wù)器端渲染期間可以使用,而其他鉤子均不能使用。
用法如下:
export default { name: "test", methods: { goPage: function () { this.$router.push("/") } }, components: { // 同樣要注入Bus Bus }, data () { return { whiteSay: "nihao" } }, created: function() { // 在組件被創(chuàng)建時(shí)候?qū)?huì)執(zhí)行此函數(shù) 相當(dāng)于進(jìn)入頁(yè)面的自執(zhí)行 var _self = this; // 將當(dāng)前作用域保存在變量中,和$on()的作用域區(qū)分開來(lái) Bus.$on("whiteSay", function(data) { // 使用$on方法監(jiān)聽white屬性并執(zhí)行一個(gè)回調(diào)函數(shù) _self.whiteSay = data console.log(_self.whiteSay) }); } }
4.資源
在angular中,有指令、過(guò)濾器等好用的方法,VUE中同樣也存在,并把他們歸類到了資源當(dāng)中。
directive: 除了v-bind,v-model等vue自帶的指令之外,也允許注冊(cè)自定義的指令。用法如下:
注冊(cè)全局的指令:
// 注冊(cè)一個(gè)全局自定義指令 v-focus Vue.directive("focus", { // 當(dāng)綁定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() } })
注冊(cè)局部的指令:
export default { data: () { return { whiteSay: "nihao" } }, directives: { focus: { // 指令的定義--- } } }
然后在html中使用:
關(guān)于自定義指令的詳細(xì)內(nèi)容請(qǐng)參考:https://cn.vuejs.org/v2/guide...
filter:vue2.0舍棄的自帶的過(guò)濾器,提供了fitler屬性來(lái)自定義過(guò)濾器。具體代碼如下:
new Vue({ filters: { capitalize: function (value) { if (!value) return "" value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } })
components: 當(dāng)組件中需要用到其他的組件時(shí),需要使用components屬性去創(chuàng)建一個(gè)哈希表。
具體用法如下:
收尾
除了上面這些屬性,還有一些雜項(xiàng),詳情請(qǐng)看官網(wǎng):
http://cn.vuejs.org/v2/api/#p...
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/81749.html
摘要:在離開過(guò)渡被觸發(fā)時(shí)生效,在完成之后移除。可以鏈?zhǔn)降亩啻问褂煤陀梅ㄏ嗤?,但是的元素?huì)始終渲染并保存在中,只是改變值。用法如下對(duì)應(yīng)前面的數(shù)據(jù) 在我一生的黃金時(shí)代,我有好多奢望。我想愛(ài),想吃,還想在一瞬間變成天上半明半暗的云?! 跣〔ㄉ弦徽卵芯苛藇ue中組件的通信,算是對(duì)vue的組件通信有了大致的了解。綜合上三章對(duì)搭建項(xiàng)...
摘要:我在中寫了這段代碼在組件被創(chuàng)建時(shí)候?qū)?huì)執(zhí)行此函數(shù)相當(dāng)于進(jìn)入頁(yè)面的自執(zhí)行使用方法監(jiān)聽屬性并執(zhí)行一個(gè)回調(diào)函數(shù)按道理在元素被創(chuàng)建的時(shí)候,會(huì)將監(jiān)聽到的值賦給并且打印。 天地不仁以萬(wàn)物為芻狗,宇宙無(wú)義視眾生如螻蟻 ——蕭鼎和我 上一節(jié)列出了5個(gè)關(guān)鍵點(diǎn),第一個(gè)路由已經(jīng)解決了,接下來(lái)解決第二個(gè)問(wèn)題: 組件的通信問(wèn)題 一、組件的關(guān)系 組件之間的關(guān)系無(wú)非就是兩種父子關(guān)系...
摘要:先看看兼容性創(chuàng)建連接構(gòu)造函數(shù)接收兩個(gè)參數(shù)這里的不能是或者而是對(duì)應(yīng)的或者和是定義的兩種方案,類似于類似于協(xié)議名稱,是可選的。服務(wù)端和客戶端的協(xié)議名稱必須一致。協(xié)議有三種注冊(cè)協(xié)議,開放協(xié)議,自定義協(xié)議。限制以內(nèi)就是在構(gòu)造函數(shù)中選傳的參數(shù)。 愿天下所有的情侶,都是失散多年的兄妹 ——好妹妹webScoket是html5提出的一個(gè)協(xié)議,咱們用的http是無(wú)狀態(tài)...
摘要:為安裝文件,無(wú)需再配置環(huán)境變量。連接操作有以下包作者并未查到除此之外的包,但不代表沒(méi)有。等于是每個(gè)默認(rèn)配置的主鍵屬性,屬性名為可自己定義一個(gè)來(lái)覆蓋此屬性。需要注意的是,在新版本的文檔中,為。通過(guò)創(chuàng)建限于篇幅,本小節(jié)暫時(shí)寫到這里。 我的琴聲嗚咽,我的淚水全無(wú)。我把遠(yuǎn)方的遠(yuǎn)歸還草原?! ? 海子《九月》 mongodb安裝 什么是Mongodb?就是一個(gè)基...
摘要:主要表現(xiàn)在復(fù)雜的語(yǔ)句事務(wù)支持等。僅支持,在等瀏覽器中,會(huì)出現(xiàn)樣式布局混亂的情況。將群群對(duì)應(yīng)的聊天記錄保存在數(shù)據(jù)庫(kù)。用戶進(jìn)入群聊,則將其加入到對(duì)應(yīng)的中。文件大小不能超過(guò)通過(guò)模塊操作登錄注冊(cè)將用戶名作為唯一值。登錄支持自動(dòng)登錄,將密碼保存在中。 showImg(https://segmentfault.com/img/bV4jYr?w=402&h=710);showImg(https://...
閱讀 1636·2021-11-02 14:42
閱讀 531·2021-10-18 13:24
閱讀 968·2021-10-12 10:12
閱讀 1825·2021-09-02 15:41
閱讀 3211·2019-08-30 15:56
閱讀 2884·2019-08-29 16:09
閱讀 2065·2019-08-29 11:13
閱讀 3627·2019-08-28 18:06