# 章節引導 ***** [TOC] # 1. Vue.js是什么? 1). 一位華裔前Google工程師(尤雨溪)開發的前端js庫 2). 作用: 動態構建用戶界面 3). 特點: * 遵循MVVM模式 * 編碼簡潔, 體積小, 運行效率高, 移動/PC端開發 * 它本身只關注UI, 可以輕松引入vue插件和其它第三庫開發項目 4). 與其它框架的關聯: * 借鑒angular的模板和數據綁定技術 * 借鑒react的組件化和虛擬DOM技術 5). vue包含一系列的擴展插件(庫): * vue-cli: vue腳手架 * vue-resource(axios): ajax請求 * vue-router: 路由 * vuex: 狀態管理 * vue-lazyload: 圖片懶加載 * vue-scroller: 頁面滑動相關 * mint-ui: 基于vue的組件庫(移動端) * element-ui: 基于vue的組件庫(PC端) # 2. 基本使用 1). 引入vue.js 2). 創建Vue實例對象(vm), 指定選項(配置)對象 el : 指定dom標簽容器的選擇器 data : 指定初始化狀態數據的對象/函數(返回一個對象) 3). 在頁面模板中使用{{}}或vue指令 # 3. Vue對象的選項 ## 1). el 指定dom標簽容器的選擇器 Vue就會管理對應的標簽及其子標簽 ## 2). data 對象或函數類型 指定初始化狀態屬性數據的對象 vm也會自動擁有data中所有屬性 頁面中可以直接訪問使用 數據代理: 由vm對象來代理對data中所有屬性的操作(讀/寫) ## 3). methods 包含多個方法的對象 供頁面中的事件指令來綁定回調 回調函數默認有event參數, 但也可以指定自己的參數 所有的方法由vue對象來調用, 訪問data中的屬性直接使用this.xxx ## 4). computed 包含多個方法的對象 對狀態屬性進行計算返回一個新的數據, 供頁面獲取顯示 一般情況下是相當于是一個只讀的屬性 利用set/get方法來實現屬性數據的計算讀取, 同時監視屬性數據的變化 如何給對象定義get/set屬性 在創建對象時指定: get name () {return xxx} / set name (value) {} 對象創建之后指定: Object.defineProperty(obj, age, {get(){}, set(value){}}) ## 5). watch 包含多個屬性監視的對象 分為一般監視和深度監視 xxx: function(value){} xxx : { deep : true, handler : fun(value) } 另一種添加監視方式: vm.$watch('xxx', function(value){}) # 4. 過渡動畫 利用vue去操控css的transition/animation動畫 模板: 使用<transition name='xxx'>包含帶動畫的標簽 css樣式 .fade-enter-active: 進入過程, 指定進入的transition .fade-leave-active: 離開過程, 指定離開的transition .xxx-enter, .xxx-leave-to: 指定隱藏的樣式 編碼例子 .xxx-enter-active, .xxx-leave-active { transition: opacity .5s } .xxx-enter, .xxx-leave-to { opacity: 0 } <transition name="xxx"> <p v-if="show">hello</p> </transition> # 5. 生命周期 vm/組件對象 生命周期圖 主要的生命周期函數(鉤子) created() / mounted(): 啟動異步任務(啟動定時器,發送ajax請求, 綁定監聽) beforeDestroy(): 做一些收尾的工作 # 6. 自定義過濾器 ## 1). 理解 對需要顯示的數據進行格式化后再顯示 ## 2). 編碼 1). 定義過濾器 Vue.filter(filterName, function(value[,arg1,arg2,...]){ // 進行一定的數據處理 return newValue }) 2). 使用過濾器 <div>{{myData | filterName}}</div> <div>{{myData | filterName(arg)}}</div> # 7. vue內置指令 v-text/v-html: 指定標簽體 * v-text : 當作純文本 * v-html : 將value作為html標簽來解析 v-if v-else v-show: 顯示/隱藏元素 * v-if : 如果vlaue為true, 當前標簽會輸出在頁面中 * v-else : 與v-if一起使用, 如果value為false, 將當前標簽輸出到頁面中 * v-show: 就會在標簽中添加display樣式, 如果vlaue為true, display=block, 否則是none v-for : 遍歷 * 遍歷數組 : v-for="(person, index) in persons" * 遍歷對象 : v-for="value in person" $key v-on : 綁定事件監聽 * v-on:事件名, 可以縮寫為: @事件名 * 監視具體的按鍵: @keyup.keyCode @keyup.enter * 停止事件的冒泡和阻止事件默認行為: @click.stop @click.prevent * 隱含對象: $event v-bind : 強制綁定解析表達式 * html標簽屬性是不支持表達式的, 就可以使用v-bind * 可以縮寫為: :id='name' * :class * :class="a" * :class="{classA : isA, classB : isB}" * :class="[classA, classB]" * :style :style="{color : color}" v-model * 雙向數據綁定 * 自動收集用戶輸入數據 ref : 標識某個標簽 * ref='xxx' * 讀取得到標簽對象: this.$refs.xxx # 8. 自定義指令 ## 1). 注冊全局指令 Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toUpperCase() }) ## 2). 注冊局部指令 directives : { 'my-directive' : function(el, binding) { el.innerHTML = binding.value.toUpperCase() } } ## 3). 使用指令 <div v-my-directive='xxx'>