我們知道jq是簡化了dom操作,而react和vue則是通過使用虛擬dom的方式,不需要頻繁的更改ui界面,而是通過更改數據的方式來更新界面。
我們知道些jq插件時會在IFFE中傳入jQuery,jQuery在此程序中映射為符號,這樣可以避免$號被其他庫覆寫。其實vue中new Vue()對象,
效果也是類似,可以避免vue范圍類的數據或變量被污染。
我們先來看一些基本的用法
插入文本值
v-html 直接插入html結構
v-bind屬性
v-if
v-else
用作 v-if 的 else-if 塊。可以鏈式的多次使用
v-model
v-model 指令用來在 input、select、text、checkbox、radio 等表單控件元素上創建雙向數據綁定,根據表單上的值,自動更新綁定的元素的值。
v-on
按鈕的事件我們可以使用 v-on 監聽事件,並對用戶的輸入進行響應。
<a @click="doSomething">
v-show
Vue.js 允許你自定義過濾器,被用作一些常見的文本格式化。
v-for
數組
模板中使用 v-for
v-for 可以通過一個對象的屬性來迭代數據
computed與method
可以說使用 computed 性能會更好,但是如果你不希望緩存,你可以使用 methods 屬性。
computed 屬性默認只有 getter ,不過在需要時你也可以提供一個 setter
$watch
style
在對象中傳入更多屬性用來動態切換多個 class
直接綁定到一個樣式對象,v-bind:style 可以使用數組將多個樣式對象應用到一個元素上
事件
復選框
單選框
select 列表
組件
組件(Component)是 Vue.js 最強大的功能之一。
組件可以擴展 HTML 元素,封裝可重用的代碼。
全局組件
所有實例都能用全局組件
局部組件
prop 是父組件用來傳遞數據的一個自定義屬性。
父組件的數據需要通過 props 把數據傳給子組件,子組件需要顯式地用 props 選項聲明 "prop"
自定義事件
父組件是使用 props 傳遞數據給子組件,但如果子組件要把數據傳遞回去,就需要使用自定義事件
Vue.js 路由允許我們通過不同的 URL 訪問不同的內容。
安裝
1、直接下載 / CDN
https://unpkg.com/vue-router/dist/vue-router.js
2、NPM
推薦使用淘寶鏡像:
cnpm install vue-router
Vue 在插入、更新或者移除 DOM 時,提供多種不同方式的應用過渡效果。
Vue 提供了內置的過渡封裝組件,該組件用於包裹要實現過渡效果的組件。
mixin
mixins就是定義一部分公共的方法或者計算屬性,然后混入到各個組件中使用,方便管理與統一修改。
如果組件中定義的方法與混入對象中的方法/屬性一樣,組件中的優先級大於混入對象中的(方法會調用多次)
Ajax
Vue 要實現異步加載需要使用到 vue-resource 庫
get請求
post 發送數據到后端,需要第三個參數 {emulateJSON:true}。
emulateJSON 的作用: 如果Web服務器無法處理編碼為 application/json 的請求,你可以啟用 emulateJSON 選項。
本文升華自菜鳥教程vue模塊
詳細的demo見我的github:https://github.com/JserJser/reactWebApp/tree/master/vue-cdn