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