cdn模式下vue的基本用法

咱們知道jq是簡化了dom操做,而react和vue則是經過使用虛擬dom的方式,不須要頻繁的更改ui界面,而是經過更改數據的方式來更新界面。
咱們知道些jq插件時會在IFFE中傳入jQuery,jQuery在此程序中映射爲符號,這樣能夠避免$號被其餘庫覆寫。其實vue中new Vue()對象,
效果也是相似,能夠避免vue範圍類的數據或變量被污染。
咱們先來看一些基本的用法
插入文本值

v-html 直接插入html結構

v-bind屬性

<a :href="url">

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 訪問不一樣的內容。
安裝
一、直接下載 / CDN
https://unpkg.com/vue-router/dist/vue-router.js
二、NPM
推薦使用淘寶鏡像:
cnpm install vue-router

Vue 在插入、更新或者移除 DOM 時,提供多種不一樣方式的應用過渡效果。
Vue 提供了內置的過渡封裝組件,該組件用於包裹要實現過渡效果的組件。

mixin
mixins就是定義一部分公共的方法或者計算屬性,而後混入到各個組件中使用,方便管理與統一修改。
若是組件中定義的方法與混入對象中的方法/屬性同樣,組件中的優先級大於混入對象中的(方法會調用屢次)

Ajax
Vue 要實現異步加載須要使用到 vue-resource 庫
get請求

post 發送數據到後端,須要第三個參數 {emulateJSON:true}。
emulateJSON 的做用: 若是Web服務器沒法處理編碼爲 application/json 的請求,你能夠啓用 emulateJSON 選項。
html

本文昇華自菜鳥教程vue模塊
詳細的demo見個人github:https://github.com/JserJser/reactWebApp/tree/master/vue-cdnvue

相關文章
相關標籤/搜索