前言：自己是iOS開發(fā)，工作中做底層C開發(fā)，，想再拓展下知識(shí)面，著手學(xué)習(xí)Vue，因?yàn)橹肮ぷ髦杏眠^AngularJS，再者自己本身就是移動(dòng)端的開發(fā)，所以學(xué)習(xí)起來比較簡(jiǎn)單。
1、公共庫以及開發(fā)工具下載
（1） VSCode 開發(fā)工具 ( 官網(wǎng)下載 ）
（2） Vue.js? ( 官網(wǎng)下載開發(fā)版本 )
引用方法：<script src="../vue.js"></script>
（3） jquery-3.4.1 ( 官網(wǎng)下載 )
引用方法：<script src="../jquery-3.4.1/jquery-3.4.1.js"></script>
2、Vue視頻是在幕客網(wǎng)找的，有需要的可以下載，百度網(wǎng)盤，提取碼: 2mff
3、npm的簡(jiǎn)單使用
4、學(xué)習(xí)Vue的前提：
要知道最根本的html基礎(chǔ)，標(biāo)簽，CSS 樣式，JQuery，了解 note.js（主要是搭后臺(tái)服務(wù)器環(huán)境）
JS（javascript），ES6，webpack（打包工具），
npm（環(huán)境配置，依賴庫）
Axios （阿賈克斯數(shù)據(jù)獲取）? Vue Router (多頁面之間的路由)
Vuex （各個(gè)組件之間的數(shù)據(jù)共享）? 異步組件（上線，性能更優(yōu)）
Stylus （編寫前端頁面樣式）
4、Vue視頻項(xiàng)目介紹
3、下面就記錄下自己的學(xué)習(xí)筆記
< 3.1 > 項(xiàng)目初建，后面用到出現(xiàn)過的屬性就不一一標(biāo)明，具體可以參考 Vue中文文檔
JQuery 實(shí)現(xiàn)上面邏輯
上面邏輯實(shí)現(xiàn)了（輸入框點(diǎn)擊提交，在li中新增一個(gè)，并清空了輸入框的內(nèi)容），現(xiàn)在增加如下需求（點(diǎn)擊 li 對(duì)應(yīng)的某一個(gè)值，直接刪除）
創(chuàng)建一個(gè) div 標(biāo)簽，并綁定相對(duì)應(yīng)的屬性，添加對(duì)應(yīng)的方法
創(chuàng)建Vue實(shí)例，實(shí)現(xiàn)上面div的方法以及處理對(duì)應(yīng)的屬性
視頻學(xué)完后，自己做一遍以上需求
總結(jié)：11月4日
獲取Class屬性? ? var image = document.getElementsByClassName('qqImage');
獲取Id屬性為? ? var text = document.getElementById('text');
獲取class里的屬性? var btn = document.getElementsByTagName('button');
組件綁定方法：v-on:click="clickAction" (簡(jiǎn)寫為： @click="clickAction")
循環(huán)遍歷list里的內(nèi)容賦值給item： v-for="item in list" 也可寫成? ? v-for="item of list"
v-bind:content="item"? ：? 將 ‘item’ 的值賦值給 ‘content’（可以簡(jiǎn)寫為 :content="item" ）
注冊(cè)Vue實(shí)例
全局組件與局部組件的創(chuàng)建
實(shí)例下新增屬性：components , 創(chuàng)建的局部組件進(jìn)行注冊(cè)
<template>這是個(gè)占位標(biāo)簽，例如循環(huán)最外層進(jìn)行包裹</template>
局部組件methods屬性下添加this.$emit("delete",this.index);
相當(dāng)于發(fā)送一個(gè)通知，通知名稱叫做 ‘delete’，并在li標(biāo)簽中進(jìn)行監(jiān)聽（li 標(biāo)簽添加@delete="deleteItem"）
數(shù)組的7個(gè)操作方法：
Vue.set(vm.list,1,"liming")? //實(shí)例方法替換，下標(biāo)為1，改為 liming
vm.$set(vm.list,1,"liming")? //對(duì)象方法替換，下標(biāo)為1，改為 liming
//數(shù)組的操作方法
? ? ? pop:? ? 把數(shù)組的最后一項(xiàng)刪除掉? ? ? ? //vm.list.shift()
? ? ? push:? ? 添加一項(xiàng)? ? ? ? ? ? ? ? ? ? //vm.list.push("girls")
? ? ? shift:? 刪除數(shù)組的第一項(xiàng)? ? ? ? ? ? //vm.list.shift()
? ? ? unshift: 往數(shù)組中的第一項(xiàng)之前添加內(nèi)容? //vm.list.unshift("Liming")
? ? ? splice:? 根據(jù)某個(gè)字符串進(jìn)行截取? ? ? ?
? ? ? ? ? ? ? ? ? ? vm.list.splice(1,2) 刪除起始下標(biāo)為1，長(zhǎng)度為2的值
? ? ? ? ? ? ? ? ? ? vm.list.splice(1,2,"liming") 將下標(biāo)為1，長(zhǎng)度為2的兩個(gè)值替換成 liming
? ? ? ? ? ? ? ? ? ? vm.list.splice(1,1,"liming") 將下標(biāo)為1的值替換成 liming
? ? ? ? ? ? ? ? ? ? ? vm.list.splice(1,0,"liming") 在下標(biāo)為1的后面添加一個(gè)值
? ? ? ? sort:? ? 數(shù)組的排序? ? ? //vm.list.sort()? ? 字符串按首字母排序，數(shù)字按大小
? ? ? ? reverse: 對(duì)數(shù)組進(jìn)行取反? ? ? //vm.list.reverse() 倒序排列
< 3.2 > 復(fù)習(xí)Vue基礎(chǔ)，學(xué)習(xí)Vue的生命周期，閱讀官網(wǎng)文檔
總結(jié)：11月7日
//生命周期函數(shù)就是vue實(shí)例在某一個(gè)時(shí)間點(diǎn)會(huì)自動(dòng)執(zhí)行的函數(shù)
? ? ? ? ? ? //組件即將創(chuàng)建
? ? ? ? ? ? beforeCreate:function(){
? ? ? ? ? ? ? ? console.log("beforeCreate")
? ? ? ? ? ? },
? ? ? ? ? ? //組件已經(jīng)創(chuàng)建
? ? ? ? ? ? created:function(){
? ? ? ? ? ? ? ? console.log("created")
? ? ? ? ? ? },
? ? ? ? ? ? //組件即將顯示
? ? ? ? ? ? beforeMount:function(){
? ? ? ? ? ? ? ? console.log("beforeMount")
? ? ? ? ? ? },
? ? ? ? ? ? //組件已經(jīng)顯示
? ? ? ? ? ? mounted:function(){
? ? ? ? ? ? ? ? console.log("mounted")
? ? ? ? ? ? },
? ? ? ? ? ? //組件即將被銷毀的時(shí)候調(diào)用? 銷毀組件方法： vm.$destroy()
? ? ? ? ? ? beforeDestroy:function(){
? ? ? ? ? ? ? ? console.log("beforeDestroy")
? ? ? ? ? ? },
? ? ? ? ? ? //組件已經(jīng)被銷毀的時(shí)候調(diào)用
? ? ? ? ? ? destroyed:function(){
? ? ? ? ? ? ? ? console.log("destroyed")
? ? ? ? ? ? },
? ? ? ? ? ? //數(shù)據(jù)即將發(fā)生改變
? ? ? ? ? ? beforeUpdate:function(){
? ? ? ? ? ? ? ? console.log("beforeUpdate")
? ? ? ? ? ? },
? ? ? ? ? ? //數(shù)據(jù)已經(jīng)發(fā)生改變
? ? ? ? ? ? updated:function(){
? ? ? ? ? ? ? ? console.log("updated")
? ? ? ? ? ? }
< 3.3 >? Vue 計(jì)算屬性，方法，偵聽器改變屬性值
了解 set 和 get 方法 ， Vue樣式綁定（class 和 style 樣式 綁定）
模版語法
計(jì)算屬性，方法，偵聽器改變屬性值
set 和 get 方法
Vue樣式綁定
總結(jié)：11月9日
（1）計(jì)算屬性，方法，偵聽器 改變屬性值
（2）了解 set 和 get 方法
（3）通過class 和 style 綁定樣式
< 3.4 > Vue樣式綁定，條件渲染
總結(jié)：11月12日
通過class和style綁定樣式
（1）<div :style = "styleObj" @click="clickItem"> hello Vue</div>
（2）<div @click = "clickFunction" :class="[activated]"> hello Vue</div>
Vue的條件渲染，v-if ， v-else ， v-else-if
v-if? 和 v-else 必須一起
< 3.5 > 深入理解Vue組件
is 的用法
ref對(duì)應(yīng)的是標(biāo)簽，拿到標(biāo)簽所顯示的內(nèi)容
ref對(duì)應(yīng)的是組件， 進(jìn)行求和操作，子組件向父組件傳值
總結(jié)：11月18日
（1）is的用法，防止變成同一級(jí)
（2）子組件向父組件進(jìn)行傳值
創(chuàng)建子組件，在需要監(jiān)聽的地方注冊(cè)監(jiān)聽器,名稱是change? ? this.$emit('change')
在div 標(biāo)簽中添加這個(gè)監(jiān)聽方法，@change = “sum”? (當(dāng)監(jiān)聽的值改變時(shí)，執(zhí)行sum 方法)
在Vue實(shí)例的 methods 下 添加 sum 方法
（3）ref的應(yīng)用（結(jié)合第二步）
通過 this.$refs.world1.number 拿到 ref為world1 的 number 的內(nèi)容
父子組件傳值復(fù)習(xí)
組件參數(shù)校驗(yàn)與Props特性
總結(jié)：11月21日
1、視頻4-2，復(fù)習(xí)了ref 的應(yīng)用，父子組件傳值
2、創(chuàng)建局部組件時(shí)，在vue實(shí)例 components 屬性下進(jìn)行注冊(cè)
3、:content 和 content 的不同，加冒號(hào)代表定義的數(shù)字，不加冒號(hào)代表定義的字符串
4、this.$emit('change',1,'zhoubin') 后面可以添加參數(shù)，接收參數(shù)時(shí)后面與之對(duì)應(yīng)
5、局部組件屬性 template 下定義的是這個(gè)局部組件的模版
6、組件校驗(yàn)
type：String（聲明類型）
required：true（參數(shù)是否必傳）
default：‘默認(rèn)展示’ （如果必傳參數(shù)沒傳的話，默認(rèn)展示的數(shù)據(jù)）
validator:function(value)? {? return (value.length > 5)? } (校驗(yàn)器校驗(yàn)傳入?yún)?shù)的長(zhǎng)度大于5)
7、props特性：
（1）父組件傳的參數(shù)（如content），子組件必須去接收，在 props:[‘content’] 定義
（2）不會(huì)將屬性顯示在dom標(biāo)簽中
8、非props特性：
父組件傳的參數(shù)（如content），子組件沒有接收，會(huì)顯示在子組件最外層dom標(biāo)簽中
最近公司項(xiàng)目比較忙，好久都沒來學(xué)習(xí)了，把這幾天學(xué)的知識(shí)點(diǎn)記錄下
插槽，通過插槽用父組件向子組件傳遞
作用域插槽
v-once的性能優(yōu)化
總結(jié)：2020-01-15
<1>插槽：可以用 slot = “header” 來標(biāo)識(shí)具體是哪個(gè)插槽，在使用的時(shí)候，在模版中定義
<slot name="header"> 默認(rèn)顯示的內(nèi)容 </slot>
<2>作用域插槽：用 template 標(biāo)簽來包裹 ，slot - scope? = "content"? 聲明子組件的模版內(nèi)容都放在content 里，具體看作用域插槽的示例
<3> v-once：根據(jù)上圖示例來看，使用v-once的好處就是不用每次都需要重新去創(chuàng)建，直接從緩存中讀取，優(yōu)化了界面的性能
結(jié)語：
目前第四章學(xué)習(xí)完結(jié)，準(zhǔn)備開始第五章《Vue中的動(dòng)畫特效》，本文會(huì)實(shí)時(shí)更新，如有問題，多交流溝通。
