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