vue基礎知識

vue基礎回顧

指令：指令是vue内置屬性

v-model

資料雙項綁定,用在input元素中.input的值發生改變會影響js中資料模型的值，資料模型發生改變會影響頁面。

v-for(item,index)

,顧名思義循環。那個元素需要循環生成給那個加。v-for能周遊數組，對象，數字，字元串.第一個參數是周遊中的每個元素,第二個參數是索引。

v-on

綁定事件，全等于

@

；例如

v-onclick='fn' @click="fn"

v-bind

動态綁定屬性，全等于

:

; 例如 v-bind:src=“變量” === :src=“變量”

v-cloak

頁面中有小胡子文法，頁面加載是從上到下。沒有加載js的時候會出現{{}}

在樣式中讓包含這個屬性的元素display:none;就會屏蔽掉，當vue記載完畢後就會自動變為block

axios

ajax請求要下載下傳相應的包,文法

axios.get('url').then(()=>{}),

時間修飾符 .stop阻止冒泡、.prevent 阻止浏覽器預設事件、.capture 變為捕獲模式、.self 隻有點自己的的時候才執行 .once觸發一次事件 .passive 滾動事件

filters

Vue允許你自定義過濾器,可被用于一些常用的文本格式化。過濾器可以用在兩個地方:雙括号插值和一些常見文本格式化 :雙括号插和v-bind表達式。過濾器應該被添加在JavaScript表達式的尾部 用管道符" | "

v-if,v-else

操作的是dom元素,

v-show

操作的是css樣式 用法 v-show=“boolean值”

<div id='app'>
    <span>{{"好好學習" | addHeader}}</span>  //龍飛曰：好好學習
    <span>{{"天天向上" | addHeader}}</span>//龍飛曰：天天向上
    {{9000 | monty}}
</div>
Vue.filter("addHeader",function(val){//val就是傳遞需要過濾處理的值
            return "龍飛曰:"+val;//處理完之後傳回出去
    })
           

computed

計算屬性，computed裡資料模型随着依賴的資料變化而變化。data裡面的寫過的資料模型在computed裡面不能再次出現。計算屬性裡面的資料模型都有兩個方法一個是get一個是set。預設是走get。隻要寫了這兩個方法。屬性擷取值的時候就會預設走get。在設定值的時候預設走set(val),val是設定的值。computed不支援異步操作

watch

監聽data裡面指定資料模型的變化。和computed的用法一樣。但是watch支援異步。

template

對v-show不起作用。相同的元件要加上key值重新渲染，template在渲染的時候會去掉template标簽隻顯示内部子元素。

Vue的生命周期：beforeCreate()執行個體建立之前、created()執行個體建立之後、beforeMount()挂載dom元素之前、mounted()挂載dom之後、beforeUpdate()資料改變之前、updated()資料改變之後、beforeDestroy()銷毀之前、destroyed銷毀之後

Class

動态綁定：

1.對象形式,{active:isActive} {className:資料模型}

2.數組文法,[activeClass,hasError]數組裡面寫資料模型。

3.表達式: " isActive ? ‘active’ : ‘’ " 三元運算符

style

動态綁定：

1.對象形式。{key:value}

2.數組形式，[]數組裡面寫多個樣式對象。

ref

屬性： 被用來給元素或子元件注冊引用資訊。

引用資訊将會注冊在父元件的

$refs

對象上。如果在普通的 DOM 元素上使用，

引用指向的就是 DOM 元素；如果用在子元件上，引用就指向元件執行個體

$nextTick

,下一個嘀答.比如在點選事件的時候需要擷取值,但是你會發現根本沒有擷取到。那是因為點選之後代碼執行完了，頁面還沒渲染完畢是以沒有擷取到。頁面渲染也是異步操作。

component元件，元件其實就是一個對象,每個元件裡面都有一個template屬性。局部元件的聲明和定義變量一樣。var tem={}; 因為元件是可複用的 Vue 執行個體，是以它們與 new Vue 接收相同的選項，例如computed、watch、methods 以及生命周期鈎子等。僅有的例外是像 el 這樣根執行個體特有的選項data()要寫成函數。元件嵌套那個組建需要就在那哥裡面注冊components

元件之間的通信：父傳子是通過 給父元素動态動态屬性，子元件用props=[]來接收數組裡面的值可以直接使用。 字傳父是通過動态給父元素綁定自定義事件.子元件在觸發事件的時候釋出事件(釋出者) 父元件是訂閱者執行事件。

slot插槽。想在元件中插入元素就要用插槽。如果沒有指定的插槽,插入到預設的slot裡面 是因為檢測到有template則編譯template放入渲染函數裡面放在app裡面,是以裡面的代碼就不執行。使用template内容替換app裡面的内容。是以不顯示。要用到插槽才能顯示子元件調用父元件的方法 slot父元件調用子元件的方法

this.$refs

.元件名

keep-alive

是vue提供的标簽,緩存在切換元件的時候不讓銷毀

兄弟通信：var EventBus = new Vue();//生成vue執行個體

EventBus

.$emit

(‘red’)釋出消息。 EventBus.

$on

(‘red’, () => { this.isRed = true })訂閱。

js檔案是同步執行的。

想讓js異步執行有兩種方法: async 和 defer 屬性

注： 所有的defer 腳本保證是按順序依次執行的。

async屬性是HTML5新增的。作用和defer類似，但是它将在下載下傳後盡快執行，不能保證腳本會按順序執行。它們将在onload 事件之前完成。