VUE使用總結

新建立的了乙個***，歡迎在工作的開發者，尤其是vue和小程式的同志們 771402271

好久沒更新部落格，確實是自己已經懶癌晚期，最近畢業剛工作3個月，公司開發一直在用vue，自己個人也比較喜歡這個框架，今天就對自己學習到和用到的知識點作一些總結，希望能幫到大家。

vue

知道vue也一定聽說過react 和 angular ，相對於這兩個框架來說，vue很輕量，打包後體積只有20k+，同時學習起來也比較簡單，vue借鑑了兩個框架的很多優點。當然框架沒有說最好，只有最適合，建議多學習嘗試。

眾所周知vue是乙個mvvm框架，這裡的mvvm指的僅僅是前端，和後端無關。在mvvm框架中，檢視和資料不能直接通訊，而是通過中間人viewmodel，viewmodel它可以監聽到資料的變化，然後通知檢視做更新。同時它也可以監聽到檢視在改變，使資料改變。我們看下面的例子就大概懂了。

舉例：

// 這是我們的view 檢視

//輸入框，繫結了資料message

常用語法

# 文字插值

// 繫結的資料物件上 msg 屬性發生了改變，插值處的內容都會更新。

message: }

// 也可以用指令的方式

指令 (directives) 是帶有v-字首的特殊屬性。其實就是一種命令，或者是規則。

v-if v-else-if v-else: 滿足某個條件的時候顯示。

//當年齡大於50的時候才渲染這個標籤

// 當年齡大於20且小於50的時候渲染當前標籤

// 其他的情況渲染此標籤

//v-if 可單獨使用，也可和v-else-if v-else 一起使用，來控制不同情況下的檢視。

v-show：簡單的切換 display:block 和 none, 和 v-if不同。帶有v-show的元素始終會被渲染

// 如果yes為真就顯示，為假就不顯示
var vm = new vue(
})

總結： v-show適用於兩種狀態的切換，v-if適用於條件判斷。

v-for指令：用於迴圈

data: ,,]

}})

v-bind指令

v-bind指令可以在後面帶乙個引數，中間用冒號隔開，這個引數一般是html的屬性，比如v-bind:class ,可縮寫為:class，這個class和原來的class 並不衝突。

.show
// 如果yes為真就新增名為show的class，反之新增off
var vm = new vue(
})

v-on指令

專門用於繫結事件的指令，用法和v-blind差不多，比如新增點選事件< a v-on:click="方法名 / 執行語句"> ，可直接縮寫為@click，可直接繫結乙個方法，也可以直接使用內聯語句

#修飾符

修飾符修飾符 (modifiers) 是以半形句號 . 指明的特殊字尾，指明乙個指令應該以特殊方式繫結。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件的時候阻止預設事件：

#計算屬性computed：在正常情況下，**中可以直接進行簡單的運算，但是如果太多就顯得難以維護。而計算屬性就是將這個邏輯提取出來，專門來維護。如下例子：

}"
}"var vm = new vue(,computed: 
}})

#方法methods：可實現和計算屬性一樣的功能

}"
}"var vm = new vue(,methods: 
}})

方法和計算屬性區別：

計算屬性存在快取，只有依賴的變數發現改變的時候才會重新求值，如上，只有message發生改變才會重新求值，而methods每次渲染都會重新執行。所以要根據業務來選擇。

#觀察watch

只有乙個乙個監聽資料，只要這個資料發生變化，就會在返回兩個引數，第乙個是當前的值，第二個是變化前的值，每當變化的時候，則會觸發函式體的裡的邏輯行為，來進邏輯後續操作

watch: 
}

#過濾器

過濾器在開發中會經常用到，比如我們要顯示乙個日期，但是後端給我們的資料是像這樣的3463782000時間戳，我們就必須做以下轉換。例如：

}  // date在這裡就是個過濾器。實際上就是乙個函式，函式的第乙個引數就是 | 前面的message，也就是說message會被當做引數傳入到date函式中進行處理，返回的結果就是最終顯示的結果，注意過濾器函式都必須有返回值。
new vue(
date = new date(date);
if (isnan(date.getfullyear())) 
if (/(y+)/.test(fmt)) 
const o = ;
for (const k in o) )`).test(fmt)) 
}return fmt;}}

#混合mixins：

我們知道vue例項中會傳入乙個物件，裡面有方法，計算屬性等，假如有兩個vue例項，他們有很多公用的東西，那麼就可以用到混合了，混合可以當做乙個vue例項，同時它又可以和任何乙個

物件進行組合。如下： am 和 vm 都需要使用方法foo,這個時候就可以宣告乙個混合來復用。

var mixin = 
}}var vm = new vue(
}})var am = new vue(
}})

#給乙個物件註冊乙個不存在的屬性

假如我們需要監聽物件下某個不存在的屬性，那麼我們可以通過set去建立。

全域性註冊： vue.set(item, 'checked', true) item.checked = true

區域性註冊： this.$set(item, 'checked', true)

#元件之間的通訊

元件的基礎就暫且不說了，看官方也能懂，直接說下通訊，元件之間，有時候需要傳遞資料或者資料的狀態，比如我這邊點了按鈕，需要父元件得到並且做出一定的改變。所以元件之間需要通訊。

這個時候就分三種情況：父元件傳遞訊息給子元件，子元件傳遞訊息給父元件，兄弟元件之間通訊

1 父元件傳遞資料給子元件：props

父元件// 子元件在父元件內被呼叫，message是來自于父元件的資料，直接以屬性的形式傳遞

子元件需要宣告props屬性來接收資料，資料可以和data裡的資料一樣使用

vue.component('child', )

2 子元件傳遞資訊給父元件：例：當點選按鈕時，通知父元件

父元件}   // 子元件呼叫被監聽派發出的時間increment,監聽到後呼叫incrementtotal方法
new vue(,
methods: 
}})

子元件：vue.component('button-counter', }
', data: function () 
},methods: 
},})

注意：在子元件中不要直接更改props的值，不推薦也不支援，想要用可以直接賦值給乙個變數，或者用計算屬性，如果需要改變父元件這個值怎麼辦呢，就可以利用watch監聽傳來的props資料，然後把這個資料賦給乙個變數，

這樣我們就可以操作這個變數，再$emit派發事件把想要改變的資料傳給父元件，父元件再監聽。

3 兄弟元件通訊

var bus = new vue()  宣告vue例項
bus.$emit('id-selected', 1) // 派發事件和資料
bus.$on('id-selected', function (id) )

先說到這裡。。。。。

VUE使用總結

vue使用總結

vue使用總結

VUE使用總結

VUE使用總結

vue使用總結

vue使用總結

VUE使用總結

相關推薦