Vue基礎
-
常用指令
循環v-for
數組v-for="name in arr" , json格式v-for="name in jason", v-for="(k,v) in json"； {{$index}} , {{$key}}事件v-on:click/mouseout/mouseover/...,如： v-on:click="函數"，該指令可以簡寫為@click="函數"
顯示隱藏： v-show="true|false"
事件對象 @click="func($event)", 參數$event相當于js中的event
-
事件冒泡，阻止冒泡：
- js的方式：event.cancleBubble = true
- @click.stop
-
事件默認行為，阻止默認行為：
- js的方式： event.preventDefault()
- contextmenu.prevent
鍵盤事件：@keydown ，@keyup等等
屬性v-bind，如v-bind:src="", 簡寫:src=""
-
樣式clsaa和style
- :class="" 或 v-bind:class=""
- :style="" 或 v-bind:style=""
-
模板
- 文本{{msg}}}，指令v-text=""
- 只輸出一次 {{*msg}}
- html轉義輸出 {{{msg}}}，指令v-html=""
過濾器：{{msg | filterA}} ，{{msg | filterA, filterB}}
計算屬性computed：里面可以放置一些復雜的業務邏輯代碼
動畫效果transitions：可以結合第三方 CSS 動畫庫，如 Animate.css 結合使用十分有用
-
Vue生命周期
- beforeCreate：實例剛剛被創建，屬性還沒有
- created：vue實例已經創建，有屬性了
- beforeCompile：編譯之前，如編譯{{msg}}里面的內容
- compiled：編譯之后
- ready：將結點插入到document文檔中 （2.0后變為mounted）
- beforeDestroy：在vue實例銷毀之前
- destroyed： vue實例銷毀之后
lifecycle.png -
vue實例簡單方法（var vm = new Vue(...)）
- vm.$el：vue實例掛載的結點元素
- vm.$data：就是data
- vm.$mount：手動掛載vue
- vm.$options：獲取自定義屬性
- vm.destroy：銷毀vue實例
- vm.$log：查看vue實例現在數據的狀態
- vm.$watch：數據監聽
-
webpack配置認識
- entry：配置入口js：main.js
- output：配置打包后的信息
- path：輸出文件的路徑(_dirname：文件當前所在目錄地址)
- filename：輸出的文件名稱：build.js
- loaders：下載編譯相關文件的loader，如：vue-loader、css-loader、vue-style-loader，vue-html-loader、vue-hot-reload-api等
-
vue-cli 腳手架
安裝：npm install vue-cli -g
-
父子組件通信
- 子組件獲取父組件數據：props
- 父組件獲取子組件的數據：父組件可以在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件
- 使用 $on(eventName) 監聽事件
- 使用 $emit(eventName) 觸發事件
-
支持Vue的UI組件
- ElementUI（PC端）
- MintUI（移動端）
-
Vue自定義組件的寫法
自定義組件可以使用Vue.use(componentName)方法引用，如編寫loading.vue組件：
目錄結構：
|- components/
|- loading/
|- loading.vue
|- index.js
在loading.vue中按照一般組件的方式定義組件功能及樣式模板，然后在index.js中導出組件:-
index.js
1.png - 最后在main.js中使用Vue.use
-
-
監聽路由變化 (使用vue-router)
watch(){ $route(to, from){ ... } } -
axios發送http請求
