準(zhǔn)備開始

vue基礎(chǔ)

歷史介紹

• angular 09年退疫，年份較早豌汇，一開始大家是拒絕 star:33.4k
• react 2013年, 用戶體驗(yàn)好手销，直接拉到一堆粉絲 star:89k
• vue 2014年, 用戶體驗(yàn)好 star:84.6k

前端框架與庫的區(qū)別?

• jquery 庫 -> DOM(操作DOM) + 請(qǐng)求
• art-template 庫 -> 模板引擎
• 框架 = 全方位功能齊全
  • 簡易的DOM體驗(yàn) + 發(fā)請(qǐng)求 + 模板引擎 + 路由功能
• KFC的世界里,庫就是一個(gè)小套餐, 框架就是全家桶
• 代碼上的不同
  • 一般使用庫的代碼薄疚，是調(diào)用某個(gè)函數(shù)职员，我們自己把控庫的代碼
  • 一般使用框架麻蹋，其框架在幫我們運(yùn)行我們編寫好的代碼
    • 框架: 初始化自身的一些行為
      • 執(zhí)行你所編寫的代碼
      • 施放一些資源

vue起步

• 1:引包

• 2:啟動(dòng) new Vue({el:目的地,template:模板內(nèi)容});

• options

  • 目的地 el
  • 內(nèi)容 template
  • 數(shù)據(jù) data

vue的文件介紹

• [圖片上傳失敗...(image-58cb6f-1553678176803)]

插值表達(dá)式

• {{ 表達(dá)式 }}

  • 對(duì)象 (不要連續(xù)3個(gè){{ {name:'jack'} }})
  • 字符串 {{ 'xxx' }}
  • 判斷后的布爾值 {{ true }}
  • 三元表達(dá)式 {{ true?'是正確':'錯(cuò)誤' }}

• 可以用于頁面中簡單粗暴的調(diào)試

• 注意: 必須在data這個(gè)函數(shù)中返回的對(duì)象中聲明

什么是指令

• 在vue中提供了一些對(duì)于頁面 + 數(shù)據(jù)的更為方便的輸出,這些操作就叫做指令, 以v-xxx表示

  • 類似于html頁面中的屬性 `````

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

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

• 指令中封裝了一些DOM行為, 結(jié)合屬性作為一個(gè)暗號(hào), 暗號(hào)有對(duì)應(yīng)的值,根據(jù)不同的值，框架會(huì)進(jìn)行相關(guān)DOM操作的綁定

vue中常用的v-指令演示

• v-text 元素的InnerText屬性,必須是雙標(biāo)簽
• v-html 元素的innerHTML
• v-if 判斷是否插入這個(gè)元素
• v-else-if
• v-else
• v-show 隱藏元素 如果確定要隱藏, 會(huì)給元素的style加上display:none

 v-text 只能用在雙標(biāo)簽中
 v-text 其實(shí)就是給元素的innerText賦值
 v-html 其實(shí)就是給元素的innerHTML賦值
 v-if 如果值為false,會(huì)留下一個(gè)<!---->作為標(biāo)記焊切，萬一未來v-if的值是true了扮授，就在這里插入元素
 如果有if和else就不需要單獨(dú)留坑了
 如果全用上  v-if 相鄰v-else-if 相鄰 v-else 否則 v-else-if可以不用
 v-if和v-else-if都有等于對(duì)應(yīng)的值，而v-else直接寫
 v-if家族都是對(duì)元素進(jìn)行插入和移除的操作
 v-show是顯示與否的問題
 注意: 指令其實(shí)就是利用屬性作為標(biāo)識(shí)符,簡化DOM操作,
  看：v-model="xxx"
  v-model 代表要做什么  xxx代表針對(duì)的js內(nèi)存對(duì)象
  寫在那個(gè)元素上专肪，就對(duì)哪個(gè)元素操作

v-bind使用

• 給元素的屬性賦值

  • 可以給已經(jīng)存在的屬性賦值 input value
  • 也可以給自定義屬性賦值 mydata

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

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

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

• dsad

v-on的使用

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

[圖片上傳失敗...(image-58b0ae-1553678176807)]

階段總結(jié)

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

v-model

• 雙向數(shù)據(jù)流（綁定）
  • 頁面改變影響內(nèi)存(js)
  • 內(nèi)存(js)改變影響頁面

v-bind 和 v-model 的區(qū)別?

• input v-model="name"
  • 雙向數(shù)據(jù)綁定 頁面對(duì)于input的value改變刹勃，能影響內(nèi)存中name變量
  • 內(nèi)存js改變name的值，會(huì)影響頁面重新渲染最新值
• input :value="name"
  • 單向數(shù)據(jù)綁定 內(nèi)存改變影響頁面改變
• v-model: 其的改變影響其他 v-bind: 其的改變不影響其他
• v-bind就是對(duì)屬性的簡單賦值,當(dāng)內(nèi)存中值改變嚎尤，還是會(huì)觸發(fā)重新渲染

v-for的使用

• 基本語法 v-for="item in arr"
• 對(duì)象的操作 v-for="item in obj"
• 如果是數(shù)組沒有id
  • v-for="(item,index) in arr" :class="index"
• 各中v-for的屬性順序(了解)
  • 數(shù)組 item,index
  • 對(duì)象 value,key,index

漂亮的列表

• class 是可變的

關(guān)于對(duì)象內(nèi)的this

• vue已經(jīng)把以前this是window或者事件對(duì)象的問題搞定了
• methods和data本身是在同一個(gè)對(duì)象中的,所以在該對(duì)象中可以通過this.隨意取
• this.xxx 取data中的值, this.xxxMethod調(diào)methods中的函數(shù)

渲染組件-父使用子組件

• 1: 創(chuàng)建子組件(對(duì)象)
  • var Header = { template:'模板' , data是一個(gè)函數(shù),methods:功能,components:子組件們 }
• 2: 在父組件中聲明,根屬性components:{ 組件名:組件對(duì)象 }
• 3: 在父組件要用的地方使用 <組件名></組件名>
  • 在不同框架中,有的不支持大寫字母荔仁，用的時(shí)候
    • 組件名 MyHeader
    • 使用 my-header
• 總結(jié): 有父，生子芽死，聲明乏梁，使用

繼續(xù)

父子組件傳值(父?jìng)髯?

• 1:父用子的時(shí)候通過屬性傳遞
• 2:子要聲明props:['屬性名'] 來接收
• 3:收到就是自己的了，隨便你用
  • 在template中 直接用
  • 在js中 this.屬性名 用
• 總結(jié):父?jìng)?子聲明,就是子的了
• 小補(bǔ)充: 常量傳遞直接用关贵，變量傳遞加冒號(hào)

總結(jié)父?jìng)髯?/h4>

• 父用子 先有子,聲明子,使用子
• 父?jìng)髯?父?jìng)髯?屬性),子聲明(收),子直接用(就是自己的一樣)

注冊(cè)全局組件

• 應(yīng)用場(chǎng)景: 多出使用的公共性功能組件遇骑，就可以注冊(cè)成全局組件,減少冗余代碼
• 全局API Vue.component('組件名',組件對(duì)象);

附加功能:過濾器&監(jiān)視改動(dòng)

• filter
  • 將數(shù)據(jù)進(jìn)行添油加醋的操作
  • 過濾器分為兩種
    • 1:組件內(nèi)的過濾器(組件內(nèi)有效)
    • 2:全局過濾器(所有組件共享)
  • 先注冊(cè),后使用
  • 組件內(nèi) filters:{ 過濾器名:過濾器fn } 最終fn內(nèi)通過return產(chǎn)出最終的數(shù)據(jù)
  • 使用方式是 {{ 原有數(shù)據(jù) | 過濾器名 }}
  • 需求
    • 頁面input框輸入字符串, 另一邊顯示其反轉(zhuǎn)的內(nèi)容
  • 過濾器fn:
    • 聲明function(data,argv1,argv2...){}
    • 使用{{ 數(shù)據(jù) | 過濾器名(參數(shù)1,參數(shù)2) }}
• watch 監(jiān)視單個(gè)
• cumputed 監(jiān)視多個(gè)

模塊化

• 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" },
• 命令行運(yùn)行 npm run test

ES6模塊

• 導(dǎo)入和導(dǎo)出只能存在頂級(jí)作用域
• require引入是代碼執(zhí)行的時(shí)候才加載
• import 和export 都是提前加載 ，加載在代碼執(zhí)行之前

箭頭函數(shù)和function

• 一方面箭頭函數(shù)是種簡寫形式
• 應(yīng)用場(chǎng)景: 由于箭頭函數(shù)本身沒有this和arguments揖曾，通常用在事件類的回調(diào)函數(shù)上落萎，讓其向上級(jí)function綁定this，而非事件對(duì)象
• 箭頭函數(shù)不可以作為構(gòu)造函數(shù)

ES6函數(shù)簡寫

• 用在對(duì)象的屬性中

fn3() { //干掉了:function,用在對(duì)象的屬性中
                console.log(this);
        },

key

• 使用子組件循環(huán)輸出一堆數(shù)據(jù)
• 不依賴子組件狀態(tài)或臨時(shí) DOM 狀態(tài) (例如：表單輸入值) 的列表渲染輸出炭剪。
• 建議v-for就寫练链，提升性能，避免vue運(yùn)算,key就是記錄元素與dom間的位置關(guān)系

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

slot

• slot就是子組件里給DOM留下的坑
• <子組件>DOM</子組件>
• slot動(dòng)態(tài)的DOM念祭、props是動(dòng)態(tài)的數(shù)據(jù)

組件生命周期

• 需要頻繁的創(chuàng)建和銷毀組件
  • 比如頁面中部分內(nèi)容顯示與隱藏兑宇，但是用的是v-if
• 組件緩存
  • 內(nèi)置組件中<keep-alive>
  • 被其包裹的組件，在v-if=false的時(shí)候，不會(huì)銷毀隶糕，而是停用
  • v-if="true" 不會(huì)創(chuàng)建,而是激活
  • 避免頻繁創(chuàng)建組件對(duì)象的性能損耗
• 成對(duì)比較
  • created 和 beforeCreate
    • A 可以操作數(shù)據(jù) B 數(shù)據(jù)沒有初始化
  • mounted 和 beforeMount
    • A 可以操作DOM B 還未生成DOM
  • updated 和 beforeUpdate
    • A 可以獲取最終數(shù)據(jù) B 可以二次修改
  • 頻繁銷毀創(chuàng)建的組件使用內(nèi)置組件<keep-alive></keep-alive>包裹

    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中標(biāo)識(shí)元素 ref="xxxx"

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

  • 創(chuàng)建組件,裝載DOM,用戶點(diǎn)擊按鈕

• ref在DOM上獲取的是原生DOM對(duì)象

• ref在組件上獲取的是組件對(duì)象

  • $el 是拿其DOM
  • 這個(gè)對(duì)象就相當(dāng)于我們平時(shí)玩的this,也可以直接調(diào)用函數(shù)