關注大話編程，一起提升技能。
準備開始
本章要給大家帶來的內容是相關Vue中的組件以及一系列常用屬性。
本章合適人群囊括了除已有開發經驗人員以外的小白新手，從how、why、what三個角度來讓大家理解並使用該技術
歷史介紹(數據源自2017年github)
- angular 09年，年份較早，一開始大家是拒絕 star:33.4k
- react 2013年, 用戶體驗好，直接拉到一堆粉絲 star:89k
- vue 2014年, 用戶體驗好 star:84.6k
前端框架與庫的區別?
- jquery 庫 -> DOM(操作DOM) + 請求
- art-template 庫 -> 模板引擎
- 框架 = 全方位功能齊全
- 簡易的DOM體驗 + 發請求 + 模板引擎 + 路由功能
- KFC的世界裡,庫就是一個小套餐, 框架就是全家桶
- 代碼上的不同
- 一般使用庫的代碼，是調用某個函數，我們自己把控庫的代碼
- 一般使用框架，其框架在幫我們運行我們編寫好的代碼
- 框架: 初始化自身的一些行為
- 執行你所編寫的代碼
- 施放一些資源
vue起步
1:引包
2:啟動 new Vue({el:目的地,template:模板內容});
3:options
- 目的地 el
- 內容 template
- 數據 data
- vue的文件介紹
- 目錄介紹
vue的文件介紹
- 目錄介紹
插值表達式
- {{ 表達式 }}
- 對象 (不要連續3個{{ {name:‘jack’} }})
- 字符串 {{ ‘xxx’ }}
- 判斷後的布爾值 {{ true }}
- 三元表達式 {{ true?‘是正確’:‘錯誤’ }}
- 可以用於頁面中簡單粗暴的調試
- 注意: 必須在data這個函數中返回的對象中聲明
什麼是指令
- 在vue中提供了一些對於頁面 + 數據的更為方便的輸出,這些操作就叫做指令, 以v-xxx表示
- 類似於html頁面中的屬性 ```
- 比如在angular中 以ng-xxx開頭的就叫做指令
- 在vue中 以v-xxx開頭的就叫做指令
- 指令中封裝了一些DOM行為, 結合屬性作為一個暗號, 暗號有對應的值,根據不同的值，框架會進行相關DOM操作的綁定
- vue中常用的v-指令演示
- v-text 元素的InnerText屬性,必須是雙標籤
- v-html 元素的innerHTML
- v-if 判斷是否插入這個元素
- v-else-if
- v-else
- v-show 隱藏元素 如果確定要隱藏, 會給元素的style加上display:none
<code>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內存對象
寫在那個元素上，就對哪個元素操作/<code>
v-bind使用
- 給元素的屬性賦值可以給已經存在的屬性賦值 input value也可以給自定義屬性賦值 mydata
- 語法 在元素上 v-bind:屬性名="常量||變量名"
- 簡寫形式 :屬性名="變量名"
<code>/<code>
v-on使用
- 處理自定義原生事件的,給按鈕添加click並讓使用變量的樣式改變
- 普通使用 v-on:事件名="表達式||函數名"
- 簡寫方式 @事件名="表達式"
階段總結
- 如何啟動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綁定事件
v-model
- 雙向數據流（綁定）
- 頁面改變影響內存(js)
- 內存(js)改變影響頁面
v-bind 和 v-model 的區別?
- input v-model="name"
- 雙向數據綁定 頁面對於input的value改變，能影響內存中name變量
- 內存js改變name的值，會影響頁面重新渲染最新值
- input :value="name"
- 單向數據綁定 內存改變影響頁面改變
- v-model: 其的改變影響其他 v-bind: 其的改變不影響其他
- v-bind就是對屬性的簡單賦值,當內存中值改變，還是會觸發重新渲染
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 是可變的
<code>.red { background-color:red;}
.big { font-size:50px;}
又大又紅 /<code>效果是字體大背景色是紅色的div
關於對象內的this
- vue已經把以前this是window或者事件對象的問題搞定了
- methods和data本身是在同一個對象中的,所以在該對象中可以通過this.隨意取
- this.xxx 取data中的值, this.xxxMethod調methods中的函數
渲染組件-父使用子組件
1: 創建子組件(對象)
var Header = { template:'模板' , data是一個函數,methods:功能,components:子組件們 }
2: 在父組件中聲明,根屬性components:{ 組件名:組件對象 }
3: 在父組件要用的地方使用 組件名>
- 在不同框架中,有的不支持大寫字母，用的時候
- 組件名 MyHeader
- 使用 my-header
父子組件傳值(父傳子)
- 1:父用子的時候通過屬性傳遞
- 2:子要聲明props:[‘屬性名’] 來接收
- 3:收到就是自己的了，隨便你用在template中 直接用在js中 this.屬性名 用
小補充: 常量傳遞直接用，變量傳遞加冒號
總結父傳子
- 父用子 先有子,聲明子,使用子
- 父傳子 父傳子(屬性),子聲明(收),子直接用(就是自己的一樣)
註冊全局組件
- 應用場景: 多出使用的公共性功能組件，就可以註冊成全局組件,減少冗餘代碼
- 全局API Vue.component('組件名',組件對象);
附加功能:過濾器&監視改動
1.filter
- 將數據進行添油加醋的操作
- 過濾器分為兩種
- 1:組件內的過濾器(組件內有效)
- 2:全局過濾器(所有組件共享)
- 先註冊,後使用
- 組件內 filters:{ 過濾器名:過濾器fn } 最終fn內通過return產出最終的數據
- 使用方式是 {{ 原有數據 | 過濾器名 }}
- 需求
- 頁面input框輸入字符串, 另一邊顯示其反轉的內容
- 過濾器fn:
- 聲明function(data,argv1,argv2...){}
- 使用{{ 數據 | 過濾器名(參數1,參數2) }}
2.watch 監視單個
3.cumputed 監視多個
key
- 使用子組件循環輸出一堆數據
- 不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。
- 建議v-for就寫，提升性能，避免vue運算,key就是記錄元素與dom間的位置關係
<code>/<code>
slot
- slot就是子組件裡給DOM留下的坑
- DOM子組件>
- slot動態的DOM、props是動態的數據
組件生命週期
1.需要頻繁的創建和銷燬組件
- 比如頁面中部分內容顯示與隱藏，但是用的是v-if
2.組件緩存
- 內置組件中
- 被其包裹的組件，在v-if=false的時候，不會銷燬，而是停用
- v-if=“true” 不會創建,而是激活
- 避免頻繁創建組件對象的性能損耗
3.成對比較
- created 和 beforeCreate
- A 可以操作數據 B 數據沒有初始化 mounted 和 beforeMount
- A 可以操作DOM B 還未生成DOM updated 和 beforeUpdate
- A 可以獲取最終數據 B 可以二次修改
- 頻繁銷燬創建的組件使用內置組件包裹
<code>activated(){ //激活的 keep-alive v-if="true"
\t\tconsole.log('activated')
\t},
\tdeactivated(){ //停用的 keep-alive v-if="false"
\t\tconsole.log('deactivated')
\t},
\tbeforeDestroy(){ //銷燬前 v-if="false"
\t\tconsole.log('beforeDestroy')
\t},
\tdestroyed(){//銷燬後 v-if="false"
\t\tconsole.log('destroyed')
\t},/<code>獲取DOM元素
- 救命稻草, document.querySelector
1: 在template中標識元素 ref=“xxxx”
2: 在要獲取的時候, this.$refs.xxxx 獲取元素
- 創建組件,裝載DOM,用戶點擊按鈕
- ref在DOM上獲取的是原生DOM對象
- ref在組件上獲取的是組件對象
- $el 是拿其DOM
這個對象就相當於我們平時玩的this,也可以直接調用函數
關注大話編程，一起提升技能。
分享到:
閱讀更多 大話編程 的文章
