01VueJS基礎1

準備開始

---

vue基礎

---

(1).歷史介紹

• angular 09年，年份較早，一開始你們是拒絕
• react 2013年, 用戶體驗好，直接拉到一堆粉絲
• vue 2014年, 用戶體驗好

(2).前端框架與庫的區別?

• jquery 庫 -> DOM(操做DOM) + 請求

• art-template 庫 -> 模板引擎

• 框架 = 全方位功能齊全

  • 簡易的DOM體驗 + 發請求 + 模板引擎 + 路由功能

• KFC的世界裏,庫就是一個小套餐, 框架就是全家桶

• 代碼上的不一樣

  • 通常使用庫的代碼，是調用某個函數，咱們本身把控庫的代碼
  • 通常使用框架，其框架在幫咱們運行咱們編寫好的代碼
    • 框架: 初始化自身的一些行爲
      • 執行你所編寫的代碼
      • 施放一些資源

(3).vue起步

• 1:引包

• 2:啓動 new Vue({el:目的地,template:模板內容});

• options

  • 目的地 el

  • 內容 template

  • 數據 data 保存數據屬性

    數據驅動視圖

vue的文件介紹

(4).插值表達式

• {{ 表達式 }}

  • 對象 (不要連續3個{{ {name:'jack'} }})
  • 字符串 {{ 'xxx' }}
  • 判斷後的布爾值 {{ true }}
  • 三元表達式 {{ true?'是正確':'錯誤' }}

• 能夠用於頁面中簡單粗暴的調試

• 注意: 必須在data這個函數中返回的對象中聲明

(5).什麼是指令

• 在vue中提供了一些對於頁面 + 數據的更爲方便的輸出,這些操做就叫作指令, 以v-xxx表示

  • 好比html頁面中的屬性 ```
    ``

• 好比在angular中 以ng-xxx開頭的就叫作指令

• 在vue中 以v-xxx開頭的就叫作指令

• 指令中封裝了一些DOM行爲, 結合屬性做爲一個暗號, 暗號有對應的值,根據不一樣的值，框架會進行相關DOM操做的綁定

(6).vue中經常使用的v-指令演示

• v-text:元素的InnerText屬性,必須是雙標籤 跟{{ }}效果是同樣的 使用較少
• v-html: 元素的innerHTML
• v-if : 判斷是否插入這個元素,至關於對元素的銷燬和建立
• v-else-if
• v-else
• v-show 隱藏元素 若是肯定要隱藏, 會給元素的style加上display:none。是基於css樣式的切換

v-text 只能用在雙標籤中
 v-text 其實就是給元素的innerText賦值
 v-html 其實就是給元素的innerHTML賦值
 v-if 若是值爲false,會留下一個<!---->做爲標記，萬一將來v-if的值是true了，就在這裏插入元素
 若是有if和else就不須要單獨留坑了
 若是全用上  v-if 相鄰v-else-if 相鄰 v-else 不然 v-else-if能夠不用
 v-if和v-else-if都有等於對應的值，而v-else直接寫
 v-if家族都是對元素進行插入和移除的操做
 v-show是顯示與否的問題
 注意: 指令其實就是利用屬性做爲標識符,簡化DOM操做,
  看：v-model="xxx"
  v-model 表明要作什麼  xxx表明針對的js內存對象
  寫在那個元素上，就對哪一個元素操做

複製代碼

(7).v-if和v-show的區別 (官網解釋)

v-if 是「真正」的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。

相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。

通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。

(8).v-bind使用

• 給元素的屬性賦值

  • 能夠給已經存在的屬性賦值 input value
  • 也能夠給自定義屬性賦值 mydata

• 語法 在元素上 v-bind:屬性名="常量||變量名"

• 簡寫形式 :屬性名="變量名"

• <div v-bind:原屬性名="變量"></div>
  <div :屬性名="變量">
      
  </div>
  複製代碼

(9).v-on的使用

• 處理自定義原生事件的,給按鈕添加click並讓使用變量的樣式改變
• 普通使用 v-on:事件名="表達式||函數名"
• 簡寫方式 @事件名="表達式"

1-9知識點階段總結

• 如何啓動vue : 1:引包 2:留坑 3:啓動(new Vue)
  • options: el/template/data函數
• 更便捷的操做DOM及數據 v-xxx指令
  • v-text/v-html/v-if/v-show/v-bind/v-on
  • v-bind綁定屬性值
  • v-on綁定事件

(10).v-model

• 雙向數據流（綁定）
  • 頁面改變影響內存(js)
  • 內存(js)改變影響頁面

(11).v-bind 和 v-model 的區別?

• input v-model="name"
  • 雙向數據綁定 頁面對於input的value改變，能影響內存中name變量
  • 內存js改變name的值，會影響頁面從新渲染最新值
• input :value="name"
  • 單向數據綁定 內存改變影響頁面改變
• v-model: 其的改變影響其餘 v-bind: 其的改變不影響其餘
• v-bind就是對屬性的簡單賦值,當內存中值改變，仍是會觸發從新渲染

(12).v-for的使用

• 基本語法 v-for="item in arr"
• 對象的操做 v-for="item in obj"
• 若是是數組沒有id
  • v-for="(item,index) in arr" :class="index"
• 各中v-for的屬性順序(瞭解)
  • 數組 item,index
  • 對象 value,key,index

漂亮的列表

• class 是可變的

關於對象內的this

• vue已經把之前this是window或者事件對象的問題搞定了
• methods和data自己是在同一個對象中的,因此在該對象中能夠經過this.隨意取
• this.xxx 取data中的值, this.xxxMethod調methods中的函數

(13).局部組件的使用

​ 渲染組件-父使用子組件

• 1: 建立子組件(對象)
  • var Header = { template:'模板' , data是一個函數,methods:功能,components:子組件們 }
• 2: 在父組件中聲明,根屬性components:{ 組件名:組件對象 }
• 3: 在父組件要用的地方使用 <組件名></組件名>
  • 在不一樣框架中,有的不支持大寫字母，用的時候
    • 組件名 MyHeader
    • 使用 my-header
• 總結: 有父，聲子，掛子，用子

（14）組件深刻

---

父子組件傳值(父傳子)

• 1:父用子的時候經過屬性Prop傳遞
• 2:子要聲明props:['屬性名'] 來接收
• 3:收到就是本身的了，隨便你用
  • 在template中 直接用
  • 在js中 this.屬性名 用
• 總結:父傳,子聲明,就是子的了
• 小補充: 常量傳遞直接用，變量傳遞加冒號

總結父傳子

• 父用子 先聲子,掛子,用子
• 父傳子 父傳子(屬性),子聲明(收),子直接用(就是本身的同樣)

註冊全局組件

• 應用場景: 多出使用的公共性功能組件，就能夠註冊成全局組件,減小冗餘代碼
• 全局API Vue.component('組件名',組件對象);

附加功能:過濾器&監視改動

• filter
  • 將數據進行添油加醋的操做
  • 過濾器分爲兩種
    • 1:組件內的過濾器(組件內有效)
    • 2:全局過濾器(全部組件共享)
  • 先註冊,後使用
  • 組件內 filters:{ 過濾器名:過濾器fn } 最終fn內經過return產出最終的數據
  • 使用方式是 {{ 原有數據 | 過濾器名 }}
  • 需求
    • 頁面input框輸入字符串, 另外一邊顯示其反轉的內容
  • 過濾器fn:
    • 聲明function(data,argv1,argv2...){}
    • 使用{{ 數據 | 過濾器名(參數1,參數2) }}
• watch 監視單個
• computed 監視多個

模塊化

• webpack命令 npm init -y npm install webpack@2.2.1 --save-dev --registry https://registry.npm.taobao.org
• package.json文件 "scripts": { "test": "webpack ./main.js ./build.js" },
• 命令行運行 npm run test

ES6模塊

• 導入和導出只能存在頂級做用域
• require引入是代碼執行的時候才加載
• import 和export 都是提早加載 ，加載在代碼執行以前

箭頭函數和function

• 一方面箭頭函數是種簡寫形式
• 應用場景: 因爲箭頭函數自己沒有this和arguments，一般用在事件類的回調函數上，讓其向上級function綁定this，而非事件對象
• 箭頭函數不能夠做爲構造函數

ES6函數簡寫

• 用在對象的屬性中

fn3() { //幹掉了:function,用在對象的屬性中
				console.log(this);
},
複製代碼

key

• 使用子組件循環輸出一堆數據
• 不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。
• 建議v-for就寫，提高性能，避免vue運算,key就是記錄元素與dom間的位置關係

<son v-for="(item,index) in persons" :key="index" ></son>
複製代碼

slot

• slot就是子組件裏給DOM留下的坑
• <子組件>DOM</子組件>
• slot動態的DOM、props是動態的數據

組件生命週期

• 須要頻繁的建立和銷燬組件
  • 好比頁面中部份內容顯示與隱藏，可是用的是v-if
• 組件緩存
  • 內置組件中
  • 被其包裹的組件，在v-if=false的時候，不會銷燬，而是停用
  • v-if="true" 不會建立,而是激活
  • 避免頻繁建立組件對象的性能損耗
• 成對比較
  • created 和 beforeCreate
    • A 能夠操做數據 B 數據沒有初始化
  • mounted 和 beforeMount
    • A 能夠操做DOM B 還未生成DOM
  • updated 和 beforeUpdate
    • A 能夠獲取最終數據 B 能夠二次修改
  • 頻繁銷燬建立的組件使用內置組件包裹

activated(){  //激活的 keep-alive v-if="true"
		console.log('activated')
	},
	deactivated(){  //停用的 keep-alive v-if="false"
		console.log('deactivated')
	},
	beforeDestroy(){ //銷燬前 v-if="false"
		console.log('beforeDestroy')
	},
	destroyed(){//銷燬後 v-if="false"
		console.log('destroyed')
	},
複製代碼

獲取DOM元素

• 救命稻草, document.querySelector

• 1: 在template中標識元素 ref="xxxx"

• 2: 在要獲取的時候, this.$refs.xxxx 獲取元素

  • 建立組件,裝載DOM,用戶點擊按鈕

• ref在DOM上獲取的是原生DOM對象

• ref在組件上獲取的是組件對象

  • $el 是拿其DOM
  • 這個對象就至關於咱們平時玩的this,也能夠直接調用函數