-
閱讀官方編碼風格指南。
查看全部 -
組件化特點：獨立；可復用；整體化
組件化目的：實現功能模塊復用；高執行效率；開發單頁面復雜應用（可更好地拆分功能模塊）
拆分原則：300行原則；復用原則；業務復雜性原則
組件化的問題：組件狀態管理--使用vuex管理；多組件的混合使用，多頁面、復雜業務--使用vue-router管理；組件間的傳參、消息、事件管理--props，emit/on，bus
查看全部 -
【常用指令】
v-on：綁定事件；v-bind：綁定屬性；
v-if，v-else，v-else-if配合js判斷表達式實現條件選擇；各條件分支之間若不互斥則按序執行最前一個分支；
v-show：若滿足條件則展現；
v-for：為列表、數組、對象數組等容器中每個元素循環執行相同語句；
【style與class綁定】
v-bind綁定style：在html標簽中使用v-bind:將其屬性綁定至Vue實例中的style對象，再于Vue實例的style對象中以對象形式定義style內容：style對象名: { color: 'red', textShadow: '0 0 5px #232323'}
v-bind綁定class：在html標簽中使用v-bind:class="['active', 'add', {'another':true(or判斷語句)}]"實現對其class屬性的綁定；應用舉例：可在循環中根據每個循環對象的某屬性值判斷是否對其綁定對應class
查看全部 -
watch監聽器：監聽Vue中成員的值是否發生變化，是則執行watch中定義的該被監聽元素的對應方法——監聽單個變量，異步場景使用
computed計算屬性：對已有的成員進行計算等操作，返回為不同名稱的本實例內新成員（或已有成員？），其依賴的Vue實例內部成員值發生變化時會觸發computed的執行——監聽多個變量，數據聯動使用
查看全部 -
html:<head>中進行樣式、元數據的聲明；<body>為網頁展示的部分。
引入VUE方式：在<head>中以<script src="">標簽方式引入。src有兩種方式，1. 下載后以本地引入；2. CDN（以網址方式）引用。
新建Vue對象，并關聯至div或p標簽上（有多種關聯方式，id、name、class等），但多個同class的div并列時會優先選擇在前的一個div生效，其后不綁定；以{{msg}}形式使用Vue對象中的成員，如data等。
查看全部 -
compute觸發條件是：本實例里面的變量，元素發生了改變
查看全部 -
v-bind: 是綁定屬性的命令，可以取data中定義的值，不需要使用雙括號進行引用
查看全部 -
computed計算屬性，定義的返回值變量可以在html代碼中使用雙大括號進行取值，和data屬性中定義的變量一樣
查看全部 -
v-bind:id="data中定義的屬性名稱";
查看全部 -
集成Vue
集成場景：
【1】單頁面、多頁面引入Vue.js（CDN的方式引用vue）
【2】復雜單頁面應用Vue?cli工具（點后端分離的應用，使用Vue?cli來生成模板項目，使用Vue?cli就可以添加路由組件、狀態管理組件等，這里就可以省略配置webpack等，提高生產效率）
開發工作流：
【1】需求調研（確定需求）
【2】交互設計、邏輯設計、接口設計
【3】代碼實現、測試運行、線上部署
git簡介：
git定義：代碼版本管理工具。
【1】創建項目git clone,git init
【2】創建分支，推送分支，合并分支
【3】刪除分支、回退版本
git命令：
1、刪除git倉庫上的分支后，刪除遠程倉庫的分支命令：git push origin :分支名稱。
2、回退版本到上一個：git reset --hard head^
3、回退到某一版本：
git log
git reset --hard?logId
查看全部 -
如何進行調試
【1】通過console.log('信息')，或者console.error('信息')
【2】通過alert('信息'),但是這里需要注意，只有點擊了確定，alert下面的代碼才會執行
【3】添加debugger關鍵詞，當點擊時候，Chrome選項卡會自動跳到Sources
并且可以和debugger結合使用this.變量，this.方法，如圖。
Chrome的Vue插件第一個小選項卡可以看得到頁面有哪些組件，以及組件里有哪些屬性，第二個選項卡，就是用來調試vue的vuex的state、mutation等。
Chrome的Network主要是用來查看頁面上有哪些加載的項。XHR就是頁面發起了那些請求。
調試頁面交互時，可以選擇如下圖，他就會加載很慢，就可以查看到加載的狀態
如果不想使用debugger，可以將vue綁定到window這個全局變量里，他需要綁定到mount里。
mounted(){}相當于vue生命周期，也就是組件掛載完成之后執行的方法。
查看全部 -
Vuex介紹
單項數據流概念：頁面是由很多視圖組成，用戶的操作會帶來狀態的變化，狀態的變化又會驅動視圖的更新，如果沒有采用這種數據流方式開發，那么組件之間這種狀態管理就會變得異常復雜。
使用Vuex解決常見的問題：
【1】多個視圖依賴同一個狀態（例如：菜單導航）
【2】來自不同視圖的行為需要變更同一狀態（例：評論彈幕）
vuex介紹：為Vue.js開發的狀態管理模式，組件狀態集中管理，組件狀態改變遵循統一的規則，vuex組件會在項目中會生成store.js,該文件中可以看到它引入了vuex，并且在Vue上綁定了Vuex。
Vuex.Store函數中傳入的對象有三個參數，分別為state、mutations、actions，這節主要講解statu和mutations
state：組件的狀態在這里做集中的管理。
mutations：它是唯一一個可以改變vuex里面的狀態的方法集，所有方法都放在這里面。
舉例：Info組件傳入一個狀態到About組件，這里在Infu.vue中添加一個按鈕，并給該按鈕綁定點擊事件，每次點擊在瀏覽器調試窗中都輸出一句話，打開瀏覽器的調式模式，打開vue組件，在這里可以看到vue中有哪些組件。
頁面上使用vuex方式：在<script>標簽中引入(import store from '@/store')，后邊.js可以省略，如圖（可以查看vue-cli的config，可以知道這里的@代碼src）,第二步還需要引入，也就是再寫上store,如下圖。
這里給傳遞的狀態起的名稱為count，并且初始值為0，在mutations定義一個方法，該方法每次會對count++。
vue中改變statu的狀態的方式：使用store.commit('方法名'),這樣每次點擊按鈕時，就會提交這個increase，然后就會改變這個狀態。打開vue的調式工具，點擊第二個，表形狀的，它就是vuex，點擊添加，旁邊就會輸出increase,并且狀態也會發生改變。
把這個狀態傳入到About.vue這個組件：同樣引入store，然后引用它即可。
這樣每次點擊之后，About這個組件里的數也會隨著變化。
使用vuex：首先由store.js文件，然后vue引用vuex這個組件（Vue.use(Vuex)),然后定義statu和mutations,statu是我們共有的狀態，mutations里定義的是改變這個狀態的方法。
組件中使用vuex，首先需要引入store.js這個文件，然后引用store,最后是通過store.commit('mutations中函數名')來提交修改。
查看全部 -
vue-router介紹：通過在路由里引入組件，就可以通過路由來加載組件。
vue-router概念
1、組合組件的（在vue文件夾下的index.js中組合組件，path，name，component，path表示點擊組件時的路徑跳轉，name表示組件名稱，component表示把誰作為組件）
2、通過路由去加載組件。
當創建了一個項目后，會在該項目里產生router.js文件，這里默認的產生了兩個默認的路由。
第一個路由，path為/代表根目錄，使用的組件component為Home組件，最上面也使用import引入了Home
創建組件：
【1】views下新建vue文件（template表示頁面模板，script表示組件執行的代碼，style樣式）
【2】路由中引入vue文件（此時需要編寫一個鏈接，這樣才可以鏈接到該組件）
【3】App.vue中添加<router-link to="/info">Info</router-link>
查看全部 -
vue代碼規范
vue風格指南：https://cn.vuejs.org/v2/guide/（vue教程、API等）
vue.js官方：學習——>風格指南——>推薦看優先級A和優先級B的
查看全部 -
vue組件化思想（獨立、可復用、整體化）
組件：相當于一個模塊，單獨存在vue應用里，可以在多個頁面復用的，這個組件包含整個業務所需要用到的業務邏輯和樣式。
組件化的目的（功能模塊復用、高執行效率、開發單頁面復雜應用）：實現功能模塊的復用，不需要把業務代碼重復的去編寫。組件化提供了維護性，代碼執行效率高，調用渲染等。開發單頁面復雜應用方便快捷，可以把復雜的業務邏輯進行拆分。
拆分原則：
【1】300行原則：業務代碼不要超過300行，整個組件包括樣式、業務代碼盡量保證在300行左右。
【2】復用原則：舉個例子，比如頭部的導航和底部的導航信息，還有側邊欄，這些經常復用的功能代碼。
【3】業務復雜性原則：組件化帶來的問題。
1、組件狀態管理：vuex
2、多組件的混合使用，多頁面，復雜業務：vue-router
3、組件的傳參、消息、事件管理：props,emit/on,bus
查看全部
舉報