我們知道jq是簡化了dom操作，而react和vue則是通過使用虛擬dom的方式，不需要頻繁的更改ui界面，而是通過更改數(shù)據(jù)的方式來更新界面。我們知道些jq插件時會在IFFE中傳入jQuery，jQuery在此程序中映射為符號，這樣可以避免$號被其他庫覆寫。其實vue中new Vue（）對象，效果也是類似，可以避免vue范圍類的數(shù)據(jù)或變量被污染。我們先來看一些基本的用法插入文本值

v-html 直接插入html結(jié)構(gòu) 

v-bind屬性 <a :href="url" rel="external nofollow" > 

 v-if 

v-else 用作 v-if 的 else-if 塊。可以鏈式的多次使用

v-model v-model 指令用來在 input、select、text、checkbox、radio 等表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定，根據(jù)表單上的值，自動更新綁定的元素的值。

v-on 按鈕的事件我們可以使用 v-on 監(jiān)聽事件，并對用戶的輸入進行響應(yīng)。 <a @click="doSomething">

v-show

Vue.js 允許你自定義過濾器，被用作一些常見的文本格式化。

v-for 數(shù)組

模板中使用 v-for

v-for 可以通過一個對象的屬性來迭代數(shù)據(jù)

computed與method 可以說使用 computed 性能會更好，但是如果你不希望緩存，你可以使用 methods 屬性。

computed 屬性默認只有 getter ，不過在需要時你也可以提供一個 setter

$watch

style 在對象中傳入更多屬性用來動態(tài)切換多個 class

直接綁定到一個樣式對象,v-bind:style 可以使用數(shù)組將多個樣式對象應(yīng)用到一個元素上

事件

復選框

單選框

select 列表

組件組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。全局組件所有實例都能用全局組件 

局部組件

prop 是父組件用來傳遞數(shù)據(jù)的一個自定義屬性。父組件的數(shù)據(jù)需要通過 props 把數(shù)據(jù)傳給子組件，子組件需要顯式地用 props 選項聲明 "prop"

自定義事件父組件是使用 props 傳遞數(shù)據(jù)給子組件，但如果子組件要把數(shù)據(jù)傳遞回去，就需要使用自定義事件

Vue.js 路由允許我們通過不同的 URL 訪問不同的內(nèi)容。

安裝

1、直接下載 / CDN https://unpkg.com/vue-router/dist/vue-router.js

2、NPM 推薦使用淘寶鏡像： cnpm install vue-router

Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應(yīng)用過渡效果。 Vue 提供了內(nèi)置的過渡封裝組件，該組件用于包裹要實現(xiàn)過渡效果的組件。

mixin mixins就是定義一部分公共的方法或者計算屬性,然后混入到各個組件中使用,方便管理與統(tǒng)一修改。如果組件中定義的方法與混入對象中的方法/屬性一樣,組件中的優(yōu)先級大于混入對象中的(方法會調(diào)用多次)

Ajax Vue 要實現(xiàn)異步加載需要使用到 vue-resource 庫 get請求

post 發(fā)送數(shù)據(jù)到后端，需要第三個參數(shù) {emulateJSON:true}。 emulateJSON 的作用： 如果Web服務(wù)器無法處理編碼為 application/json 的請求，你可以啟用 emulateJSON 選項。

本文升華自菜鳥教程vue模塊詳細的demo見我的 github： https://github.com/JserJser/reactWebApp/tree/master/vue-cdn

最新評論