1 原生/函數庫/框架
原生DOM/BOM是瀏覽器自帶，比較繁瑣；jQuery函數庫第三方，簡單，僅對四個步驟的API進行簡化，沒有對流程進行簡化，存在大量重複操作；
框架：Vue/Angular/React，框架是半成品項目，從流程上根本的簡化開發，消除重複操作
2 vue
Vue是漸進式的基於MVVM的純前端的js框架。需要node.js在運行之前將vue編譯成瀏覽器認識的HTML、CSS、js文件
漸進式：根據需要選擇部分組件逐漸應用；
以數據爲主的項目都可以用vue開發
Vue的使用
-
下載vue.js到客戶端，在網頁中引入
官網：cn.vuejs.org
開發版：包含完備的調試信息；生產版：刪除調試信息
1）<script src=“js/vue.js”>
2）編寫靜態頁面：<div id="app"> 在需要顯示數據的位置用{{變量}}佔位 </div>3）在自定義腳本
<script> var vm=new Vue({ el:”#app”, data:{ 頁面需要的變量:值, ... : … } }) </script>data中的變量值會自動替換{{}}的位置，修改內存中data下的變量值，實現頁面自動更新
-
安裝腳手架工具
3 vue原理
傳統網頁劃分：HTML(定義網頁內容)、CSS(添加網頁樣式)、JS(添加交互行爲)；由於HTML和CSS都是靜態的，任何交互修改都需要JS實現導致重複代碼過多
MVVM模式：對前端內容進行重新劃分：每個html文件拆分成多個組件文件：.vue/.component
View視圖：HTML+CSS；
Model模型數據：在內存中定義的或Ajax請求回來的，要加載到頁面的所有數據的統稱；模型數據中的值，稱爲模型變量；
ViewModel框架(控制器)：自動將頁面View和模型數據Model同步
- 虛擬DOM樹:
基於原生DOM樹生成的，僅包含可能變化的元素的簡化版DOM樹。
優點：極其便於快速遍歷，封裝原生DOM操作，避免重複編碼；僅修改發生變化的元素，效率高！ - 響應系統:
監視模型數據的變化，並通知框架修改頁面的機制
通知原理: 自動給每個模型變量添加get()和set()訪問器屬性。每次修改模型變量時，都會觸發set()，在set()中發送通知給DOM樹。
4 綁定語法
{{模型變量}} 學名: 插值語法Interpolation
{{表達式}}
{{實例化對象}}
{{全局函數}}
{{對象的屬性}}
{{數組的元素}}
{{三目}}
不能寫程序結構：if else while for do while switch case
問題: 只能綁定內容，不能綁定屬性和事件
5 指令(directive)
增強HTML功能的特殊屬性，因爲HTML本身是靜態的，沒有程序必須的元素: 變量、分支、循環
在開始標籤<ANY 指令名=”值”>，包括:
-
v-bind: 綁定屬性:
<ANY v-bind:屬性名=”模型變量/表達式”
可簡寫爲: <ANY :屬性名=”模型變量/表達式” -
v-on: 綁定事件處理函數
<ANY v-on:事件名=”處理函數(參數值,…,$event)”>
可簡寫爲:
<ANY @事件名=” 處理函數(參數值,…,$event)”處理函數定義在: new Vue({ el:”#app”, data:{ … }, methods:{ 處理函數(形參,…){//vue省略了:function … … } } })獲得事件對象e: 2步:
事件：<ANY @事件名=”處理函數($event)” 處理函數： methods:{ 處理函數(e){ e就是DOM的事件對象 } }事件修飾符: 代替事件對象的API
-
阻止默認行爲: e.preventDefault()
<ANY @click.prevent=”處理函數()” -
取消冒泡: e.stopPropagation()
<ANY @click.stop=”處理函數()”
-
-
v-if: 根據條件控制元素的可見不可見
單獨使用: <ANY v-if=”條件表達式”>控制一個元素的可見不可見
聯合使用: v-if v-else-if v-else控制多個元素選其一顯示
聯合使用的元素必須緊鄰 -
v-show: 根據條件控制元素的可見不可見
v-show是通過display:none隱藏——效率高；
v-if 是通過修改DOM樹(是否加載DOM節點)實現隱藏——直接將元素完全去掉，效率低；
如果控制多個元素選其一顯示時，首選v-if v-else-if v-else -
v-for: 反覆生成多個相同結構的HTML片段
<parent> <child v-for=”(value,i) in/of 數組”> <sub>value和i可用於更子級元素的綁定</sub> </child> </parent> -
v-text 和 v-html:
代替{{}}綁定元素的內容:
如果綁定的是HTML片段: 用v-html
如果綁定的是純文本內容: 用v-text -
v-cloak: 在Vue對象加載完之前，臨時隱藏受監視的元素(因爲在vue對象加載完之前，已經在網頁上顯示內容)
1）自定義選擇器屬性[v-cloak]{ display:none }
2）在要隱藏的元素上，添加v-cloak屬性:<ANY v-cloak >
原理: 當Vue對象加載完，自動查找v-cloak屬性移出 -
v-once: 僅在首次加載時渲染元素和組件一次，隨後的重新渲染，元素/組件及其所有的子節點將被視爲靜態內容並跳過<ANY v-once>
原理: 首次綁定結束，從虛擬DOM中移除該元素 -
v-pre: 跳過元素及其子內容的編譯過程